/* Visitor-facing direct-manipulation studio. The local authoring tool retains its own layout. */
#gallery-position{direction:ltr;unicode-bidi:isolate}

/* ========================================================
   FLOATING FROSTED HEADER
   ======================================================== */
.header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  height: 68px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  transition: background-color .2s ease, box-shadow .2s ease !important;
}

body.editor-expanded .header,
.editor-expanded .header {
  display: none !important;
}

.header nav {
  gap: 16px !important;
}

.header nav .quiet {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: color .15s ease, background-color .15s ease !important;
}

.header nav .quiet:hover {
  color: var(--ink) !important;
  background: var(--soft) !important;
}

/* ========================================================
   LANDING PAGE: HERO & TYPOGRAPHY
   ======================================================== */
.hero {
  text-align: center !important;
  padding: 42px 20px 20px !important;
}

.hero .eyebrow {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  letter-spacing: .03em !important;
  display: block !important;
  margin: 0 0 6px !important;
  background: none !important;
  border: none !important;
}

.hero h1,
#gallery-title {
  font-family: 'Thmanyah Serif Display', serif !important;
  font-feature-settings: "salt" 1, "ss01" 1, "dlig" 1, "swsh" 1 !important;
  font-size: clamp(38px, 4.4vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  margin: 8px auto 14px !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
}

.hero p {
  color: var(--muted) !important;
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  margin: 0 auto !important;
  max-width: 520px !important;
}

/* ========================================================
   LANDING PAGE: FILTERS & COLOR SWATCHES
   ======================================================== */
.catalog-filters {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.pills {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.pill {
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  white-space: nowrap !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background: #ffffff !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
}

.pill:hover {
  border-color: #cbd5e1 !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
}

.pill[aria-pressed=true] {
  background: var(--ink) !important;
  color: #ffffff !important;
  border-color: var(--ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.12) !important;
}

.filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 8px 0 12px !important;
  min-height: 48px !important;
}

.swatches {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 4px 10px !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.color-family {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: transform .15s ease, opacity .15s ease !important;
  outline: none !important;
}

.color-family:focus,
.color-family:focus-visible,
.color-family:active {
  outline: none !important;
  box-shadow: none !important;
}

.color-family:hover:not(:disabled) {
  transform: scale(1.1) !important;
}

.color-family.is-disabled {
  opacity: 0.22 !important;
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
}

.color-family.is-disabled .family-dot {
  box-shadow: none !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.family-dot {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  flex: none !important;
}

.color-family[aria-pressed=true] .family-dot {
  transform: scale(1.05) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px #9ca3af !important;
}

#template-count {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ========================================================
   SECURITY & ASSET PROTECTION SHIELD
   ======================================================== */
.canvas-area canvas,
.template-track canvas,
.template-preview,
.preview-frame,
.calligraphy-library img,
.divider-library img,
.gallery-card canvas {
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

/* ========================================================
   LANDING PAGE: CAROUSEL GALLERY & ACTIVE CARD
   ======================================================== */
.gallery-frame {
  overflow: hidden !important;
  --card-height: min(56svh, 520px) !important;
  --card-width: calc(var(--card-height) * 0.5625) !important;
  --step: calc(var(--card-width) + 24px) !important;
}

.template-track {
  display: block !important;
  position: relative !important;
  height: calc(var(--card-height) + 56px) !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  direction: ltr !important;
  touch-action: pan-y pinch-zoom !important;
  scroll-snap-type: none !important;
  outline-offset: -4px !important;
}

.gallery-card {
  position: absolute !important;
  left: 50% !important;
  top: 6px !important;
  width: var(--card-width) !important;
  direction: rtl !important;
  transform: translateX(calc(-50% + var(--slot)*var(--step) + var(--drag,0px))) scale(.93) !important;
  transform-origin: center center !important;
  transition: transform .26s cubic-bezier(0.16, 1, 0.3, 1), opacity .26s ease !important;
  z-index: 3 !important;
  opacity: .82 !important;
}

.gallery-card.is-active {
  transform: translateX(calc(-50% + var(--slot)*var(--step) + var(--drag,0px))) scale(1) !important;
  opacity: 1 !important;
  z-index: 5 !important;
}

.gallery-card.is-far {
  opacity: .45 !important;
  z-index: 1 !important;
}

.gallery-card.is-outside {
  opacity: 0 !important;
  pointer-events: none !important;
}

.single-card .gallery-card:not(.is-active) {
  display: none !important;
}

.template-preview {
  display: block !important;
  width: 100% !important;
  height: var(--card-height) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #e5e7eb !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.05) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.template-preview canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.template-preview .loading {
  position: absolute !important;
  top: 45% !important;
  left: 10px !important;
  right: 10px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* Elevated Active Card */
.gallery-card.is-active .template-preview {
  border: 1.5px solid var(--line) !important;
  box-shadow: 0 16px 45px rgba(17, 24, 39, 0.12), 0 4px 14px rgba(17, 24, 39, 0.05) !important;
  transform: translateY(-4px) !important;
  cursor: pointer !important;
}

/* Hover overlay badge on active card */
.gallery-card.is-active .template-preview::after {
  content: 'تخصيص هذا القالب' !important;
  position: absolute !important;
  bottom: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(6px) !important;
  background: rgba(17, 24, 39, 0.92) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all .22s ease !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 4 !important;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-card.is-active .template-preview:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 24px 55px rgba(17, 24, 39, 0.18), 0 6px 18px rgba(17, 24, 39, 0.08) !important;
  }
  .gallery-card.is-active .template-preview:hover::after {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Caption under each card */
.gallery-card .template-caption {
  margin: 10px 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  direction: rtl !important;
  line-height: 1.4 !important;
  padding: 0 2px !important;
}

.gallery-card .template-caption h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.gallery-card .template-caption .muted {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Hide entire gallery-selection row completely */
.gallery-selection {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================================
   LANDING PAGE: ACTION BUTTONS (CTA & ARROWS)
   ======================================================== */
.gallery-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 6px auto 32px !important;
  padding: 0 16px !important;
}

.gallery-actions .primary-button {
  width: 280px !important;
  max-width: calc(100vw - 140px) !important;
  min-height: 46px !important;
  padding: 12px 28px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: var(--ink) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.gallery-actions .primary-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18) !important;
  background: #000000 !important;
}

.gallery-actions .round-button {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--ink) !important;
  transition: all .18s ease !important;
}

.gallery-actions .round-button:hover {
  background: var(--soft) !important;
  border-color: #cbd5e1 !important;
  transform: scale(1.06) !important;
}

.gallery-actions .round-button:active {
  transform: scale(0.96) !important;
}

.gallery-actions .round-button:focus,
.gallery-actions .round-button:focus-visible {
  outline: none !important;
  border-color: #9ca3af !important;
  box-shadow: none !important;
}

/* ========================================================
   LANDING PAGE: FOOTER & PRIVACY DIALOG
   ======================================================== */
footer#privacy {
  border-top: 1px solid var(--line) !important;
  padding: 48px max(24px, calc((100vw - 1200px)/2)) 28px !important;
  margin-top: 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 2fr !important;
  gap: 30px 65px !important;
  background: #f8f9fa !important;
}

.footer-brand {
  font-family: 'Thmanyah Serif Display', serif !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}

.footer-brand span {
  display: block !important;
  font-family: 'Thmanyah Sans', sans-serif !important;
  font-size: 13px !important;
  margin-top: 8px !important;
  color: var(--muted) !important;
}

.footer-about h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
}

.footer-about p {
  font-size: 13.5px !important;
  line-height: 1.9 !important;
  color: var(--muted) !important;
  margin: 0 0 16px !important;
}

.footer-bottom {
  grid-column: 1 / -1 !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

.footer-right-note {
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.footer-left-links {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
}

.footer-terms-btn,
.footer-brand-link {
  text-decoration: none !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: color .15s ease !important;
}

.footer-terms-btn:hover,
.footer-brand-link:hover {
  text-decoration: none !important;
  color: var(--ink) !important;
}

.footer-brand-link {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.footer-dot-sep {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  user-select: none !important;
}

/* Privacy & Terms Dialog */
.privacy-terms-dialog {
  width: min(680px, 94vw) !important;
  max-width: 680px !important;
  border-radius: 20px !important;
  padding: 24px 26px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

.privacy-terms-dialog .dialog-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--line) !important;
}

.privacy-terms-dialog .dialog-heading h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.privacy-terms-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 70svh !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.policy-card {
  background: #fbfcfd !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}

.policy-card:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

.policy-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.policy-card-header .policy-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: #f1f5f9 !important;
  color: var(--ink) !important;
  flex-shrink: 0 !important;
}

.policy-card-header h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.policy-card p {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #4b5563 !important;
  margin: 0 !important;
  text-align: right !important;
}

.policy-card strong {
  color: var(--ink) !important;
}
#editor{max-width:1300px;padding:24px 24px 0;margin:auto}.editor-heading{margin:0 0 15px;min-height:44px}.editor-heading h1{font-size:25px;margin:0 0 4px}.editor-heading p{font-size:12px}.studio-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}.insert-actions{display:flex;gap:8px;flex-wrap:wrap}.tool-button{padding:8px 17px;border:1px solid var(--line);border-radius:8px;background:white;font-size:13px;min-height:42px}.tool-button:hover{border-color:#9ca3af;background:var(--soft)}.history-buttons{display:flex;align-items:center;gap:6px}.history-buttons .quiet{padding:5px 10px;white-space:nowrap}.context-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:0;background:transparent;border:0;border-radius:0;padding:0;position:relative;z-index:5}.selection-label{font-size:13px;min-width:100px;color:var(--gold)}.central-tools{display:flex;align-items:end;gap:16px;justify-content:flex-end;flex-wrap:wrap}.central-tools .field{margin:0;gap:3px;font-size:10px;color:var(--muted)}.central-tools .field:has(select){width:160px}.central-tools .field select{min-height:38px;padding:6px;font-size:13px}.font-size-control{display:flex;align-items:end;gap:3px;direction:ltr}.font-size-control .field{direction:rtl;width:54px}.font-size-control .field input{height:38px;min-height:38px;padding:6px 3px;font-size:13px;text-align:center;appearance:textfield}.font-size-control input::-webkit-inner-spin-button{appearance:none}.size-step{width:36px;min-height:38px;height:38px;font-size:22px;background:var(--soft);border-radius:7px}.tool-hint{font-size:12px;color:var(--muted);line-height:1.7}.studio-workspace{height:clamp(460px,65svh,720px);display:grid;grid-template-columns:minmax(0,1fr) 320px;border:1px solid var(--line);border-top:0;background:#eceff1;overflow:hidden}.canvas-area{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 22px 10px;gap:9px;min-width:0;position:relative}.canvas-area .preview-frame{width:min(100%,calc(var(--fit-height,480px)*var(--ratio,.5625)));height:auto;max-width:100%;aspect-ratio:var(--ratio,.5625);flex:none;border-radius:3px;overflow:visible;box-shadow:0 10px 30px rgba(17,24,39,0.08);touch-action:pan-y}.canvas-area canvas{width:100%;height:100%;display:block}.canvas-caption{font-size:11px;color:var(--muted);display:flex;justify-content:center;gap:16px;line-height:1.5;flex:none;min-height:17px}.inspector{background:white;border-right:1px solid var(--line);padding:16px;overflow:auto;min-height:0}.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.inspector-heading h2{font-size:22px;margin:0;font-weight:500}.inspector-heading .quiet{min-height:32px;padding:4px;font-size:12px}.inspector .field{margin-bottom:12px;gap:7px;font-size:12px}.inspector textarea{resize:none;height:130px;line-height:1.8;min-height:75px;font-size:15px}.inspector .panel-intro{margin-bottom:14px;font-size:12px}.format-actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}.format-button{padding:6px 12px;min-height:36px;border:1px solid var(--line);border-radius:7px;font-size:12px}.format-button[aria-pressed=true]{background:var(--soft);border-color:#d1d5db;color:#111827}.image-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.image-actions button{font-size:12px;padding:9px 12px}.selection-actions{display:flex;align-items:start;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:8px;margin-top:12px}.danger-text{color:#9d5344}.selection-more{font-size:12px}.selection-more summary{cursor:pointer;min-height:36px;display:flex;align-items:center}.selection-more[open]{background:var(--bg);padding:0 8px 8px;border-radius:8px}.selection-more button{display:block;font-size:12px;padding:4px}.layer-overlay{overflow:visible;pointer-events:none}.layer-hit{border:0;border-radius:0;touch-action:none;background:transparent;pointer-events:auto}.layer-hit:hover{border:1px dashed #6b7280}.selection-box{position:absolute;border:1.5px solid #111827;pointer-events:none;z-index:20;box-shadow:0 0 0 .5px #fff}.selection-box.cropping{border-style:dashed;border-color:#2d7c68}.resize-handle{position:absolute;width:36px;height:36px;min-height:36px;min-width:36px;padding:0;pointer-events:auto;touch-action:none;transform:translate(-50%,-50%);background:transparent;border:0;z-index:25}.resize-handle:after{content:'';position:absolute;inset:12px;background:#fff;border:1.5px solid #111827;border-radius:3px;box-shadow:0 1px 3px #0002}.handle-nw{left:0;top:0;cursor:nwse-resize}.handle-ne{left:100%;top:0;cursor:nesw-resize}.handle-sw{left:0;top:100%;cursor:nesw-resize}.handle-se{left:100%;top:100%;cursor:nwse-resize}.cropping .resize-handle:after{border-color:#2d7c68;border-radius:50%}.editor-bottom{position:relative;bottom:auto;padding:12px 0;margin:0;border-top:0;min-height:63px}.editor-bottom .primary-button{min-width:200px}.editor-bottom .muted{display:none}.studio-dialog{width:460px;padding:20px;max-height:85svh;overflow:auto}.dialog-heading{position:sticky;top:-20px;z-index:2;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:8px 0 12px;border-bottom:1px solid var(--line);margin-bottom:16px}.dialog-heading h2{font-size:22px;margin:0}.calligraphy-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.calligraphy-option{border:1px solid var(--line);border-radius:9px;background:white;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;font-size:11px;cursor:pointer;transition:all .15s ease}.calligraphy-option:hover{border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.04)}.calligraphy-option img{height:36px;max-width:92%;object-fit:contain}.calligraphy-option span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.element-name{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:right;font-size:13px;padding:10px;border-bottom:1px solid var(--line)}.element-name:hover{background:var(--soft)}#download-fallback{margin:0 0 12px;font-size:12px;padding:7px 12px}#download-fallback a{text-decoration:underline}#render-warnings{margin:8px 0 0;padding:7px 12px;font-size:12px;line-height:1.6}body.editor-expanded{overflow:hidden}#editor.is-expanded{position:fixed;inset:0;z-index:1000;background:var(--bg);max-width:none;display:flex;flex-direction:column;padding:12px;height:var(--viewport-height,100svh)}#editor.is-expanded .studio-workspace{flex:1;min-height:0;height:auto}#editor.is-expanded .editor-heading{display:none}#editor.is-expanded .studio-actions{margin-top:0}
@media(max-width:760px){.header{height:60px}.header nav{gap:10px}.header nav .small-button{padding:7px 10px;font-size:11px}.hero{padding:22px 18px 14px}.hero h1{font-size:27px;margin:7px 0}.hero p{font-size:12px;line-height:1.7}.hero .eyebrow{font-size:11px}.filter-row{padding:9px 0 13px;gap:10px;justify-content:center}.swatches{gap:5px;flex-wrap:nowrap;max-width:100%;overflow:visible}.color-family{padding:3px;min-height:36px;min-width:34px;justify-content:center}.color-family>span:not(.family-dot){display:none}.family-dot{width:23px;height:23px}.color-family[aria-pressed=true]{border-color:#9ca3af}.gallery-frame{--card-height:clamp(340px,52svh,460px);--step:calc(var(--card-width) + 14px)}.footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:12px}.footer-right-note,.footer-left-links{justify-content:center}.template-track{height:calc(var(--card-height) + 52px)}.gallery-selection{display:none!important}.gallery-card .template-caption{margin-top:10px}.gallery-card .template-caption h2{font-size:12px}.gallery-card .template-caption .muted{display:none}.gallery-actions{margin-top:10px}.gallery-selection{min-width:150px;font-size:13px}.gallery-actions .primary-button{font-size:14px;padding:12px 10px}.gallery-actions{gap:12px}}
@media(prefers-reduced-motion:reduce){.gallery-card{transition:none}}

/* Explicit text sizing and previews of the current category draft. */
.font-size-control{align-items:center;gap:8px}.font-size-control .field{width:130px;max-width:100%}.font-size-control .field input[type=range]{width:100%;height:32px;min-height:32px;padding:0;accent-color:var(--gold)}.font-size-control output{font-size:12px;min-width:24px;direction:ltr}.template-picker{max-width:1000px}.template-options{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 18px}.template-option{flex:0 0 180px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.template-option[aria-pressed=true]{border-color:var(--line);box-shadow:0 4px 16px rgba(0,0,0,0.06)}.template-option canvas{display:block;width:100%;height:auto;margin-bottom:10px}.date-output{white-space:pre-line}.central-tools .field:has(input[type=range]){width:130px}
@media(max-width:760px){.font-size-control{max-width:44%;gap:4px}.font-size-control .field{width:100%}.central-tools .field:has(input[type=range]){width:100px}.template-option{flex-basis:155px}}

/* Integrated editor: creation tools, canvas, and focused properties. */
.layer-hit:hover{border:0}.layer-hit:focus-visible{outline:2px solid #269bce;outline-offset:-1px}.selection-box{border:1px solid #269bce;box-shadow:none}.selection-box.cropping{border:1px dashed #269bce}.format-button:has(svg){display:inline-flex;align-items:center;justify-content:center;padding:7px 12px}
#editor{max-width:1480px;padding:16px 20px 24px;margin:auto}.editor-shell{border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px;border-bottom:1px solid var(--line);background:white}.editor-identity h1{font-size:24px;margin:0 0 3px}.editor-identity p{font-size:11px;color:var(--muted);margin:0;max-width:300px}.toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.toolbar-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-size:12px;min-height:42px;padding:9px 12px}.toolbar-actions .primary-button{padding:10px 18px}.toolbar-actions .history-buttons{padding:0;border:0;gap:6px}.toolbar-actions .history-buttons button{width:38px;padding:8px}.history-buttons .button-label{display:none}.toolbar-actions button svg,.tool-button svg{flex:none}.toolbar-actions button:disabled{cursor:default}
.studio-workspace{height:calc(100svh - 205px);min-height:520px;max-height:none;display:grid;grid-template-columns:162px minmax(0,1fr) 290px;grid-template-rows:minmax(0,1fr);border:0;border-radius:0;background:#eceff1;overflow:hidden}.creation-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;background:#ffffff;border-left:1px solid var(--line);padding:20px 12px;min-height:0;overflow:auto}.panel-kicker{display:block;font-size:11px;color:var(--muted);font-weight:500}.creation-panel>.panel-kicker{padding:0 7px 16px}.creation-panel .insert-actions{display:flex;flex-direction:column;gap:10px;flex-wrap:nowrap}.creation-panel .tool-button{display:flex;align-items:center;justify-content:start;gap:10px;min-height:58px;padding:12px;border:1px solid var(--line);background:white;font-size:13px;border-radius:10px;box-shadow:0 2px 3px rgba(17,24,39,0.03)}.creation-panel .tool-button svg{color:var(--gold);width:23px;height:23px}.creation-panel .tool-button:hover{background:var(--soft);border-color:#9ca3af}.creation-panel .tool-button:active{transform:translateY(1px)}.creation-bottom{margin-top:auto;padding-top:26px}.creation-bottom p{font-size:11px;line-height:1.8;color:var(--muted);padding:0 6px}.creation-bottom button{display:flex;align-items:center;gap:8px;width:100%;font-size:12px;justify-content:center;border-top:1px solid var(--line);padding-top:14px}
.canvas-area{grid-column:2;grid-row:1;padding:16px 20px 10px;height:100%;min-height:0}.canvas-area .preview-frame{max-height:none}.canvas-caption{font-size:10px;gap:10px}.canvas-caption #preview-status{max-width:260px;text-align:center}.inspector{grid-column:3;grid-row:1;border-right:1px solid var(--line);border-left:0;padding:20px 18px;overflow:auto;background:white}.inspector-heading{display:block;margin-bottom:18px}.inspector-heading h2{font-size:22px;margin:7px 0 0}.inspector .context-bar{display:block;border:0;border-radius:0;min-height:0;padding:0;margin:0 0 16px}.inspector .selection-label{display:none}.inspector .central-tools{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:14px;align-items:end}.inspector .central-tools .field:has(select){width:100%;max-width:none}.inspector .font-size-control{grid-column:1/-1;width:100%;max-width:none;gap:12px}.inspector .font-size-control .field{width:100%}.inspector .central-tools .field:has(input[type=range]){width:100%}.inspector .central-tools>.field:has(input[type=range]){grid-column:1/-1}.inspector textarea{height:110px;min-height:75px;font-size:14px}.inspector .field{font-size:11px;gap:6px}.inspector .format-actions{gap:6px;margin-bottom:12px}.inspector .selection-actions{margin-top:16px}.inspector .selection-more{font-size:11px}.inspector .tool-hint{grid-column:1/-1}.editor-expanded #editor.is-expanded{padding:12px;max-width:none}.editor-expanded .studio-workspace{height:calc(100svh - 105px);min-height:0}
@media(min-width:761px) and (max-width:1050px){#editor{padding:12px}.studio-workspace{grid-template-columns:110px minmax(0,1fr) 250px}.creation-panel{padding:16px 8px}.creation-panel .tool-button{flex-direction:column;justify-content:center;font-size:11px;gap:6px;padding:9px 5px}.editor-identity p{max-width:160px}.toolbar-actions{gap:8px}.toolbar-actions button{padding:8px;font-size:11px}}


/* Compact properties, wider tools, and bounded expanded canvas. */
@media(min-width:1051px){.studio-workspace{grid-template-columns:190px minmax(0,1fr) 290px}}
.inspector textarea{height:70px;min-height:60px}.inspector .selection-actions{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px;padding-top:10px}.selection-actions .delete-layer{display:inline-flex;align-items:center;gap:6px;color:#bd4239;font-size:12px}.selection-actions .delete-layer:hover{color:#992e27}.selection-actions .reset-layer{font-size:11px}.creation-bottom .undo-clear{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:9px;color:var(--ink);background:white;font-size:11px}
.canvas-area{contain:size;min-width:0;min-height:0}
body.editor-expanded {
  overflow: hidden !important;
}

#editor.is-expanded,
.editor-expanded #editor.is-expanded {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: var(--bg) !important;
  max-width: none !important;
  width: 100vw !important;
  height: 100vh !important;
  height: var(--viewport-height, 100svh) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#editor.is-expanded .editor-shell,
.editor-expanded #editor.is-expanded .editor-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

#editor.is-expanded .editor-toolbar,
.editor-expanded #editor.is-expanded .editor-toolbar {
  flex: 0 0 auto !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--line) !important;
  background: white !important;
  z-index: 10 !important;
}

#editor.is-expanded .studio-workspace,
.editor-expanded #editor.is-expanded .studio-workspace {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100% - 56px) !important;
  display: grid !important;
  overflow: hidden !important;
}

#editor.is-expanded .canvas-area,
.editor-expanded #editor.is-expanded .canvas-area {
  height: 100% !important;
  min-height: 0 !important;
}


/* Content and photo tools. */
@media(min-width:1051px){.creation-panel .insert-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.creation-panel .tool-button{flex-direction:column;justify-content:center;gap:7px;min-height:76px;padding:8px 3px;font-size:11px;text-align:center}}
.editor-tool-dialog{max-width:580px}.phrase-options{display:grid;gap:10px}.phrase-option{display:block;width:100%;text-align:right;line-height:1.9;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:14px}.phrase-option:hover{border-color:#d1d5db;background:var(--soft)}.occasion-message{width:100%;height:300px;min-height:160px;line-height:1.9;padding:12px;font-size:14px;resize:vertical}.color-presets{display:flex;gap:10px;margin:0 0 22px}.color-preset{width:34px;height:34px;min-height:34px;border:1px solid #0003;border-radius:50%}.theme-color-picker-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}#text-colors-dialog .color-swatch-box{width:135px !important;max-width:135px !important;flex:0 0 135px !important;margin:0 !important}.theme-presets-inline{display:flex;gap:8px;margin:0;flex-wrap:wrap;align-items:center}.theme-presets-inline .color-preset{width:32px;height:32px;min-height:32px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);cursor:pointer;transition:transform .12s}.theme-presets-inline .color-preset:hover{transform:scale(1.15)}.theme-presets-inline .color-preset.active,.theme-presets-inline .color-preset[aria-pressed="true"]{outline:2px solid #9ca3af;outline-offset:2px;transform:scale(1.1)}.color-scope-card{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:14px 0 18px}.scope-all-item{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}.scope-divider{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:12px;color:var(--muted);font-weight:500}.scope-divider::before,.scope-divider::after{content:'';flex:1;height:1px;background:var(--line)}.scope-sub-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.scope-item{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:8px;cursor:pointer;padding:3px 0;user-select:none}.scope-item input[type=checkbox],.scope-all-item input[type=checkbox]{width:18px;height:18px;min-height:18px;accent-color:var(--gold);cursor:pointer}#text-colors-dialog .primary-button{width:100%;padding:12px 18px;font-size:14px;font-weight:600;border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}@media(max-width:550px){.scope-sub-items{grid-template-columns:1fr;gap:8px}}.photo-effects{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px;display:grid;gap:12px}.photo-effects .field input[type=range]{width:100%;accent-color:var(--gold)}.photo-effects .outline-button{font-size:12px}.photo-progress,.alternate-note{font-size:11px;line-height:1.7;color:var(--muted);margin:0 0 10px}.inspector .field:has(select){width:100%}


/* Give editing panels the free space around the portrait canvas. */
html,.creation-panel,.inspector,.inspector textarea,.studio-dialog,.template-options,.pills{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,.creation-panel::-webkit-scrollbar,.inspector::-webkit-scrollbar,.inspector textarea::-webkit-scrollbar,.studio-dialog::-webkit-scrollbar,.template-options::-webkit-scrollbar,.pills::-webkit-scrollbar{display:none;width:0;height:0}
.alternate-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px}.inspector .format-actions{align-items:center;flex-wrap:wrap;gap:7px}.alternate-toggle svg{flex:none}
@media(min-width:1100px){
 #editor{max-width:1680px}
 .studio-workspace{grid-template-columns:minmax(270px,.9fr) minmax(340px,1.2fr) minmax(340px,1fr)}
 .creation-panel{padding:20px 22px}.creation-panel>.panel-kicker{padding:0 0 14px;font-size:12px}
 .creation-panel .insert-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .creation-panel .tool-button{flex-direction:row;justify-content:start;gap:10px;min-height:64px;padding:12px;font-size:13px;text-align:right}
 .creation-panel .tool-button svg{width:22px;height:22px}
 .creation-bottom{padding-top:18px}.creation-bottom p{margin-bottom:10px}
 .inspector{padding:20px 24px}.inspector-heading{margin-bottom:16px}
 .inspector .central-tools{grid-template-columns:minmax(125px,1fr) 44px minmax(105px,1fr);gap:12px}
 .inspector .font-size-control{grid-column:auto;gap:7px}.inspector .font-size-control output{min-width:20px}
 .inspector .context-bar{padding-bottom:16px;margin-bottom:16px}
 .inspector .field{font-size:12px}.inspector textarea{height:72px}
 .inspector .selection-actions{margin-top:12px}.inspector .selection-actions .quiet{font-size:12px}
}
@media(min-width:761px) and (max-width:1099px){
 .studio-workspace{grid-template-columns:200px minmax(250px,1fr) 290px}
 .creation-panel{padding:16px 12px}.creation-panel .insert-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .creation-panel .tool-button{flex-direction:column;justify-content:center;gap:7px;min-height:70px;padding:8px 4px;font-size:11px}
 .inspector{padding:18px}.inspector .format-actions{gap:5px}.inspector .format-button{padding:7px 9px}.alternate-toggle{font-size:11px}
}
@media(min-width:761px) and (max-height:760px){.creation-panel .tool-button{min-height:56px;padding:9px;font-size:12px}.creation-panel .insert-actions{gap:8px}.creation-bottom{padding-top:10px}.creation-bottom p{display:none}}


#editor *,.studio-dialog *{scrollbar-width:none}#editor *::-webkit-scrollbar,.studio-dialog *::-webkit-scrollbar{display:none;width:0;height:0}
@media(min-width:761px) and (max-width:850px){.studio-workspace{grid-template-columns:180px minmax(180px,1fr) 250px}.inspector{padding:14px}}

/* Compact element controls across inspector sizes. */
.inspector-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;margin-bottom:14px}
.inspector-heading .panel-kicker{grid-column:1/-1}
.inspector-heading h2{margin:0;min-width:0;line-height:1.6}
.inspector-heading .change-calligraphy{padding:7px 11px;min-height:38px;font-size:12px;white-space:nowrap}
.inspector .central-tools{grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:end}
.inspector .central-tools>.field:has(select){grid-column:1/-1}
.inspector .central-tools>.field:has(input[type=color]){grid-column:1;width:46px;margin:0}
.inspector .central-tools>.field:has(input[type=range]),.inspector .font-size-control{grid-column:2;width:100%;max-width:none;min-width:0;margin:0}
.inspector .font-size-control .field{flex:1;min-width:0;margin:0}
.inspector .central-tools input[type=range]{width:100%;min-width:0;height:40px;min-height:40px;padding:0;accent-color:var(--gold)}
.inspector .central-tools input[type=color]{width:46px;height:40px;min-height:40px}
.inspector .context-bar{padding-bottom:12px;margin-bottom:12px}
.inspector .center-actions{margin:10px 0 0;gap:8px}
.inspector .center-actions button{min-height:40px;padding:7px 10px;font-size:12px}
.inspector .panel-intro{margin:0 0 10px;font-size:12px;line-height:1.7}
.inspector .selection-actions{margin-top:12px;padding-top:8px}
.layer-hit.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1.5px dashed #9ca3af;border-radius:10px;background:rgba(243,244,246,0.92);color:#4b5563;font-size:clamp(10px,1.2vw,15px);line-height:1.5;padding:5px;overflow:hidden;cursor:pointer}
.photo-placeholder span:first-child{font-size:24px;line-height:1}
.date-format-controls,.field-icon-controls{padding:12px;border:1px solid var(--line);border-radius:9px;margin:12px 0;background:var(--soft)}
.field-icon-options{margin-top:12px}.field-icon-controls .check-field,.date-format-controls .check-field{font-size:12px;min-height:30px;line-height:1.7}
.field-icon-controls input[type=range]{width:100%;accent-color:var(--gold)}.field-icon-controls output{font-size:11px;color:var(--muted);direction:ltr}
.field-icon-controls .field-help,.date-format-controls .field-help{font-size:11px;line-height:1.7;color:var(--muted);margin:6px 0 0}
.date-output{direction:rtl;unicode-bidi:plaintext;line-height:1.9}
/* Task-based editor groups and compact, touch-friendly properties. */
.creation-panel .insert-actions{display:flex;flex-direction:column;gap:18px}
.creation-group h2{font-size:11px;color:var(--muted);font-weight:600;margin:0 0 8px}
.creation-group .tool-group{display:grid;gap:7px}
.creation-panel .creation-group .tool-button{min-height:42px;padding:8px 10px;flex-direction:row;justify-content:start;font-size:12px;text-align:right;gap:8px;width:100%}
.creation-panel .creation-group .tool-button svg{width:19px;height:19px}
.creation-panel .secondary .tool-button,.creation-panel .sharing .tool-button{background:transparent;box-shadow:none;border-color:transparent;min-height:38px}
.creation-group+.creation-group{border-top:1px solid var(--line);padding-top:12px}
.creation-bottom{margin-top:18px;padding-top:10px}.creation-bottom p{display:none}
.inspector .field{margin-bottom:10px;font-size:12px;gap:5px}
.inspector .field select,.inspector .field input:not([type=range]):not([type=color]){min-height:38px;padding:7px 9px;font-size:13px}
.inspector-heading{margin-bottom:12px}
.typography-section{border-block:1px solid var(--line);padding:12px 0;margin:12px 0}
.typography-section h3{font-size:12px;margin:0 0 9px;font-weight:600}
.inspector .typography-section .context-bar{border:0;margin:0;padding:0}
.inspector .format-actions{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 0}
.inspector .format-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:6px 9px;font-size:12px}
.format-button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #d1d5db}
.date-field>.section-label{margin:0 0 8px;font-size:12px}
.date-output{font-size:12px;line-height:1.7;color:var(--muted);background:var(--bg);padding:8px 10px;border-radius:6px;margin-bottom:8px}
.date-format-controls,.field-icon-controls{padding:10px;margin:8px 0;background:var(--soft)}
.date-flags{display:flex;flex-wrap:wrap;gap:4px 14px}
.date-flags .check-field{flex:1 0 auto;margin:0;min-height:38px}
.check-field{display:flex;align-items:center;gap:8px;cursor:pointer}
.check-field input[type=checkbox]{width:17px;height:17px;min-height:17px;flex:none;accent-color:var(--gold)}
.date-visibility{font-size:12px;min-height:38px;margin:0}
.date-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:start;margin:7px 0}
.date-actions .calendar{flex:1;min-width:150px;margin:0;padding:0;border:1px solid var(--line);border-radius:7px}
.date-actions .calendar summary{font-size:11px;min-height:38px;padding:9px;cursor:pointer}
.date-actions .calendar[open]{flex-basis:100%}
.clear-date{font-size:11px;padding:8px;min-height:38px}
.date-advanced{border-top:1px solid var(--line);margin-top:10px}
.date-advanced>summary{cursor:pointer;font-size:12px;padding:10px 0;min-height:38px}
.date-advanced .date-format-controls{border:0;padding:0;background:none;margin:0}
.field-icon-options{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:8px}
.field-icon-options>.field:first-child,.field-icon-options>.field-help{grid-column:1/-1}
.field-icon-options .field{margin:0}
.field-icon-options input[type=range]{min-width:0;min-height:32px;padding:0;margin:0}
.field-icon-options output{display:none}
.field-icon-options .field-help{font-size:10px;margin:0}
.inspector .center-actions{margin-top:10px}.inspector .center-actions button{width:100%;min-height:38px}
.inspector .selection-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px;padding-top:12px}
.selection-actions .outline-button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;min-height:40px;padding:8px}
.selection-actions .delete-layer{order:2;border-color:#e7b6b0;background:#fff5f3;color:#b33225}
.selection-actions .reset-layer{background:var(--bg)}
.inspector button:focus-visible,.creation-panel button:focus-visible,.date-advanced summary:focus-visible{outline:2px solid #cbd5e1;outline-offset:1px}

.inspector .date-field>.section-label{display:none}
.field-icon-options[hidden]{display:none}
.inspector .date-visibility{padding:0;margin:0;min-height:34px}
.inspector .date-actions{margin:4px 0}
.inspector .date-output{margin-bottom:7px;padding:6px 9px}
.inspector .date-advanced{margin-top:6px}
.field-icon-controls>.check-field{margin:0;min-height:34px}
.field-icon-controls .field-icon-options{margin-top:6px}
.inspector .field-icon-options .field{gap:3px}
@media(pointer:coarse){.inspector .format-button,.creation-panel .creation-group .tool-button,.selection-actions .outline-button{min-height:44px}}
/* Keep related editing controls in view. */
.inspector .field{margin-bottom:7px;gap:4px}
.inspector-heading{margin-bottom:8px;gap:2px 8px}
.inspector textarea#selected-text{height:38px;min-height:38px;padding:7px 9px!important;line-height:22px;resize:none;overflow:hidden;max-height:none}
.inspector textarea,.inspector textarea#selected-text{border:1px solid var(--line)!important;border-radius:8px!important;transition:border-color .15s ease,box-shadow .15s ease!important}
.inspector textarea:focus,.inspector textarea#selected-text:focus{border-color:#9ca3af!important;outline:none!important;box-shadow:0 0 0 3px rgba(156,163,175,0.2)!important}
.typography-section{padding:8px 0;margin:8px 0}
.typography-section h3{margin-bottom:5px}
.inspector .central-tools{grid-template-columns:34px minmax(0,1fr);gap:7px 10px}
.inspector .central-tools>.field:has(input[type=color]){width:34px;grid-column:1}
.inspector .central-tools input[type=color]{width:34px;height:32px;min-height:32px;padding:3px;border-radius:7px;overflow:hidden;cursor:pointer}
.inspector input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.inspector input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.inspector input[type=color]::-moz-color-swatch{border:0;border-radius:4px}
.font-slider-track{display:flex;direction:ltr;align-items:center;gap:8px;min-width:0}
.inspector .font-slider-track input[type=range]{flex:1;width:0;height:32px;min-height:32px;margin:0}
.font-slider-track output{font-size:11px;min-width:24px;text-align:end;direction:ltr;font-variant-numeric:tabular-nums}
.inspector .font-size-control{display:block}
.inspector .format-actions{display:flex;gap:5px;margin:4px 0 6px}
.inspector .format-actions .format-button{flex:1;min-height:34px;padding:5px}
.text-properties{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.inspector .text-properties button{display:inline-flex;flex:1 0 auto;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:5px 7px;font-size:11px;border:1px solid var(--line);border-radius:7px;background:white;white-space:nowrap}
.inspector .text-properties button[aria-pressed=true]{background:var(--soft);border-color:#d1d5db}
.text-properties svg{width:15px;height:15px;flex:none;color:var(--gold)}
.inspector .selection-actions{grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;padding-top:8px}
.selection-actions .outline-button{font-size:11px;min-height:36px;padding:6px;gap:4px;white-space:nowrap}
.selection-actions svg{width:15px;height:15px;flex:none}
.selection-actions .delete-layer{order:0}
.inspector .date-output{margin-bottom:6px;padding:6px 8px;font-size:12px}
.date-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.date-actions .calendar{min-width:0;width:100%}
.date-actions .calendar summary{padding:7px;font-size:11px;min-height:34px}
.date-actions .calendar[open]{grid-column:1/-1}
.date-actions .gregorian-picker>.field{padding:8px;margin:0}
.date-format-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.date-format-controls>.field{min-width:0;margin:0}
.date-format-controls .field select{font-size:12px;padding:6px;min-height:34px}
.date-flags{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.date-flags .check-field{font-size:11px;min-height:30px;gap:5px;line-height:1.5;margin:0}
.date-format-controls>.field-help{grid-column:1/-1;margin:0;font-size:10px}
.date-advanced>summary{padding:7px 0;min-height:32px;font-size:11px}
.inline-radios{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px 12px;padding:0;margin:0;border:0;min-width:0}
.inline-radios legend{font-size:11px;margin-bottom:4px;padding:0}
.radio-option{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:12px;min-height:30px}
.radio-option input[type=radio]{width:15px;height:15px;min-height:15px;accent-color:var(--gold);margin:0}
.field-icon-controls{margin:7px 0;padding:8px}
.field-icon-options{gap:5px 10px;margin-top:4px}
.field-icon-options .field-help{display:none}
.inspector .context-bar:has(.tool-hint){padding:0;border:0;margin:0}
.inspector .context-bar:has(.muted){display:none}
.inspector>.context-bar:has(.tool-hint){margin-bottom:6px}
.inspector .tool-hint{font-size:11px;line-height:1.6;margin:0}

@media(pointer:coarse){.inspector .format-actions button,.inspector .text-properties button,.selection-actions .outline-button{min-height:40px}}
.inspector .selection-actions{border-top:0;padding-top:0;margin-top:7px}
.inspector .field-icon-controls>.check-field{min-height:28px}
.inspector .date-advanced+.typography-section{margin-top:6px}
.font-slider-track{direction:rtl}
.font-slider-track input[type=range]{direction:rtl}
.font-slider-track output{text-align:left}
.layer-hit:focus{outline:none}
.layer-hit:focus-visible{outline:1px solid #9ca3af;outline-offset:1px}
.selection-box{border-width:1px;box-shadow:none;background:rgba(55,65,81,0.05)}
.unified-calendar{margin:0!important;padding:0!important;border:1px solid var(--line);border-radius:7px}
.unified-calendar>summary{font-size:12px;min-height:36px;padding:8px 10px;cursor:pointer}
.calendar-body{padding:8px}
.calendar-modes{display:flex;gap:4px;padding:3px;background:var(--soft);border-radius:7px;margin-bottom:7px}
.calendar-modes button{flex:1;font-size:12px;min-height:32px;border-radius:5px}
.calendar-modes button[aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001;font-weight:600;color:var(--gold)}
.unified-calendar .calendar-title{display:grid;grid-template-columns:28px minmax(0,1fr) 76px 28px;gap:5px;margin-bottom:5px}
.unified-calendar .calendar-title select{width:100%;min-width:0;font-size:12px;padding:4px;min-height:32px}
.unified-calendar .calendar-title button{padding:3px;min-height:32px}
.unified-calendar .calendar-grid{gap:3px}
.unified-calendar .calendar-grid button,.unified-calendar .calendar-grid span{min-height:30px;font-size:11px;padding:4px;text-align:center}
.unified-calendar .calendar-grid button[aria-pressed=true]{background:var(--ink);color:white;border-radius:5px}
.unified-calendar .calendar-grid button.is-today:not([aria-pressed=true]){border:1.5px solid var(--gold);font-weight:700;color:var(--ink);border-radius:5px}
.unified-calendar .calendar-grid button:disabled{opacity:0.25!important;color:#94a3b8!important;cursor:not-allowed!important;pointer-events:none!important;background:transparent!important}
/* Unified warning rules are defined at the bottom of the stylesheet. */
.qr-color-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inspector .qr-color-controls input[type=color]{width:100%;height:32px;min-height:32px;padding:3px;border-radius:7px;cursor:pointer}
.qr-color-controls+.field-help{font-size:11px;color:#9b4d21;margin:0 0 6px;line-height:1.6}
.qr-color-controls+.field-help:empty{display:none}
/* Visible completion controls across every editor dialog. */
.studio-dialog .dialog-heading>button,.studio-dialog [data-close-dialog]{display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:74px;padding:8px 13px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:white;font-weight:600;font-size:12px;white-space:nowrap}
.studio-dialog .dialog-heading>button:hover,.studio-dialog [data-close-dialog]:hover{background:#4c4942;color:white}
.creation-panel .tool-button img{width:20px;height:20px;flex:none}
.qr-color-column{min-width:0}
#location-fields .check-field{min-height:36px;margin:0 0 9px}
#location-fields .qr-color-controls input[type=color]{width:100%;height:34px;min-height:34px;padding:3px;border-radius:7px}
#location-fields>.panel-intro{font-size:12px;margin:7px 0}

.creation-group.layers .tool-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.creation-group.layers .tool-button{background:white;border:1px solid var(--line);font-weight:600;width:100%;justify-content:flex-start}
.creation-group.layers .tool-button:hover{background:var(--soft);border-color:#d1d5db}
.caption-positions{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 14px}
.canvas-area {
  position: relative !important;
  overflow: hidden !important;
  contain: size layout !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.canvas-scroll {
  display: flex !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px 38px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable !important;
  overflow-anchor: none !important;
}
.mobile-canvas-zoom { display: none !important; }
.canvas-area .preview-frame {
  max-width: none !important;
  flex-shrink: 0 !important;
  margin: auto !important;
  position: relative !important;
  transition: none !important;
}
.layer-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.preview-zoom { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 30; background: var(--bg); border-radius: 8px; padding: 3px; flex-shrink: 0; }
.preview-zoom button { min-height: 30px; padding: 3px 10px; font-size: 12px; }
.preview-zoom output { min-width: 40px; text-align: center; font-size: 11px; }
.canvas-caption {
  display: none !important;
}
/* #render-warnings styled in unified notifications section */

.creation-panel .insert-actions{gap:10px}.creation-group+.creation-group{padding-top:9px}


/* Compact task order; zoom belongs to the toolbar, outside the card viewport. */
.creation-panel .primary .tool-group{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.creation-panel .primary .tool-button{flex-direction:column;justify-content:center;text-align:center;padding:7px 3px;gap:4px;font-size:11px}
.creation-panel .secondary .tool-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.creation-panel .secondary .tool-button{min-height:36px;padding:5px 6px;font-size:11px}
.creation-panel .insert-actions{gap:9px}.creation-panel{padding-top:12px}.creation-bottom{margin-top:10px}
.editor-toolbar{flex-wrap:wrap;gap:8px}.editor-toolbar .preview-zoom{position:static;margin-inline-start:auto;background:transparent;padding:0;gap:4px}
.editor-toolbar .preview-zoom button{min-height:32px}.editor-toolbar .preview-zoom output{min-width:40px}
.share-preview{display:block;max-width:100%;width:auto;height:240px;object-fit:contain;margin:0 auto 12px}.studio-dialog:has(.share-preview)>button{width:100%;margin-top:8px}
#location-fields textarea{min-height:70px;resize:vertical}#location-fields>.field-help{margin:-2px 0 14px;font-size:12px;color:var(--muted);line-height:1.7}
.confirm-dialog{width:min(92vw,420px)!important;max-width:420px!important}
.confirm-dialog .panel-intro{font-size:13px!important;line-height:1.7!important;color:#555!important;margin:12px 0 20px!important}
.confirm-actions{display:flex!important;gap:10px!important;justify-content:flex-end!important}
.confirm-actions .danger-button{background:#a93c32!important;color:#fff!important;border:1px solid #942f26!important;font-weight:600!important;min-height:38px!important;padding:8px 16px!important;border-radius:8px!important;cursor:pointer!important;font-size:13px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;transition:background .15s ease!important}
.confirm-actions .danger-button:hover{background:#8e2b22!important}
.confirm-actions .cancel-button{background:white!important;color:var(--ink)!important;border:1px solid var(--line)!important;font-weight:500!important;min-height:38px!important;padding:8px 16px!important;border-radius:8px!important;cursor:pointer!important;font-size:13px!important;display:inline-flex!important;align-items:center!important;transition:all .15s ease!important}
.confirm-actions .cancel-button:hover{background:var(--soft)!important;border-color:#9ca3af!important}

/* Back button in editor toolbar */
.editor-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 9px !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.editor-back-btn:hover {
  background: var(--soft) !important;
  border-color: #9ca3af !important;
}
.editor-back-btn svg {
  color: var(--muted) !important;
  flex: none !important;
}

/* Floating Fullscreen Preview Button (hidden on desktop) */
.mobile-floating-preview-btn {
  display: none;
}

/* Export Modal (Unified Download & Share Dialog) */
.export-modal-dialog {
  width: min(92vw, 420px) !important;
  max-width: 420px !important;
  padding: 18px 20px 22px !important;
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16) !important;
  background: #ffffff !important;
}
.export-modal-dialog .dialog-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 14px !important;
  position: static !important;
}
.export-modal-dialog .dialog-heading h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.export-modal-dialog .dialog-heading-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.export-quality-chip {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #047857 !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}
.export-preview-wrap {
  width: 100% !important;
  max-height: clamp(240px, 45svh, 340px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  background: #f4f6f8 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.export-preview-img {
  max-height: clamp(220px, 42svh, 320px) !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}
.export-modal-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  width: 100% !important;
}
.export-download-btn {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 10px !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15) !important;
  transition: background .15s ease !important;
}
.export-download-btn:hover {
  background: #1f2937 !important;
}
.export-share-btn {
  width: 100% !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 9px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}
.export-share-btn:hover {
  background: var(--soft) !important;
}


/* ========================================================
   UNIFIED STUDIO TOOLBAR (CONSISTENT, CONNECTED UX)
   ======================================================== */
.editor-toolbar {
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  padding: 14px 20px !important;
  min-height: 58px !important;
  background: white !important;
}

.editor-identity {
  flex-shrink: 0 !important;
}

.editor-toolbar .toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin-inline-start: auto !important;
}

/* Base button rules for toolbar actions */
.toolbar-actions > button,
.toolbar-actions .outline-button,
.toolbar-actions .studio-expand-btn,
.toolbar-actions .share-invitation,
.toolbar-actions #change-template {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  background: white !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

.toolbar-actions > button:hover,
.toolbar-actions .outline-button:hover,
.toolbar-actions .studio-expand-btn:hover,
.toolbar-actions .share-invitation:hover,
.toolbar-actions #change-template:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

.toolbar-actions > button:focus,
.toolbar-actions .outline-button:focus,
.toolbar-actions .studio-expand-btn:focus,
.toolbar-actions .share-invitation:focus,
.toolbar-actions #change-template:focus,
.tool-button:focus {
  outline: none !important;
}

.toolbar-actions > button:focus-visible,
.toolbar-actions .outline-button:focus-visible,
.toolbar-actions .studio-expand-btn:focus-visible,
.toolbar-actions .share-invitation:focus-visible,
.toolbar-actions #change-template:focus-visible,
.tool-button:focus-visible {
  outline: 2px solid #cbd5e1 !important;
  outline-offset: 1px !important;
}

/* Icons inside outline toolbar buttons */
.toolbar-actions > button svg,
.toolbar-actions .outline-button svg,
.toolbar-actions .studio-expand-btn svg,
.toolbar-actions .share-invitation svg,
.toolbar-actions #change-template svg {
  flex: none !important;
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
}

/* Expand Button Active Highlight */
.studio-expand-btn.is-active,
.studio-expand-btn[aria-pressed="true"],
.editor-expanded .studio-expand-btn {
  background: var(--soft) !important;
  border-color: var(--line) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

/* Unified Undo / Redo Segmented Box */
.toolbar-actions .history-buttons {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.toolbar-actions .history-buttons button {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.toolbar-actions .history-buttons button:hover:not(:disabled) {
  background: var(--soft) !important;
  color: var(--ink) !important;
}

.toolbar-actions .history-buttons button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

.toolbar-actions .history-buttons .button-label {
  display: none !important;
}

.toolbar-actions .history-buttons svg {
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
}

/* Unified Preview Zoom Segmented Box */
.editor-toolbar .preview-zoom {
  display: inline-flex !important;
  align-items: center !important;
  height: 40px !important;
  min-height: 40px !important;
  background: white !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  position: static !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.editor-toolbar .preview-zoom button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease !important;
}

.editor-toolbar .preview-zoom button:hover {
  background: var(--soft) !important;
  border-color: transparent !important;
}

.editor-toolbar .preview-zoom output {
  min-width: 40px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  user-select: none !important;
  padding: 0 2px !important;
  line-height: 32px !important;
}

/* Primary CTA: Download Button */
.toolbar-actions .primary-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: white !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(17,24,39,0.18) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

.toolbar-actions .primary-button:hover:not(:disabled) {
  background: #1f2937 !important;
  box-shadow: 0 4px 10px rgba(17,24,39,0.25) !important;
}

.toolbar-actions .primary-button svg {
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
  color: white !important;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.toolbar-actions button.is-loading svg,
.primary-button.is-loading svg,
.outline-button.is-loading svg {
  animation: btn-spin 0.75s linear infinite !important;
}

.toolbar-actions button.is-loading,
.primary-button.is-loading,
.outline-button.is-loading {
  cursor: wait !important;
  opacity: 0.88 !important;
}

/* Intermediate screens (761px - 1100px) */
@media(min-width: 761px) and (max-width: 1100px) {
  .editor-toolbar {
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  .editor-identity p {
    max-width: 120px !important;
  }
  .editor-toolbar .toolbar-actions {
    gap: 6px !important;
  }
  .toolbar-actions > button,
  .toolbar-actions .outline-button,
  .toolbar-actions .studio-expand-btn,
  .toolbar-actions .share-invitation,
  .toolbar-actions #change-template {
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  .toolbar-actions .primary-button {
    padding: 0 14px !important;
    font-size: 12px !important;
  }
}



/* ========================================================
   MODERN FIGMA-LIKE TYPOGRAPHY CONTROLS & INSPECTOR REFINEMENT
   ======================================================== */
.inspector .central-tools {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

.font-family-row {
  width: 100%;
}
.font-family-row .field {
  width: 100% !important;
  margin: 0 !important;
  font-size: 11px;
  color: var(--muted);
}
.font-family-row select {
  width: 100% !important;
  min-height: 40px !important;
  border-radius: 9px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.font-family-row select:focus {
  border-color: #803e4b !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(128, 62, 75, 0.15) !important;
}

/* ========================================================
   CUSTOM FONT PICKER (BRAND THEMED)
   ======================================================== */
.font-family-field {
  width: 100% !important;
  margin: 0 !important;
  position: relative;
}

.custom-font-picker {
  position: relative;
  width: 100%;
}

.custom-font-trigger {
  width: 100%;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink, #111827);
  cursor: pointer;
  text-align: right;
  direction: rtl;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  user-select: none;
}

.custom-font-trigger:hover {
  border-color: #d1d5db;
  background-color: #fafbfc;
}

.custom-font-trigger:focus-visible,
.custom-font-trigger.is-open {
  border-color: #803e4b;
  outline: none;
  box-shadow: 0 0 0 3px rgba(128, 62, 75, 0.12);
  background-color: #ffffff;
}

.custom-font-trigger-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.custom-font-trigger-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-font-trigger-sample {
  font-size: 12px;
  color: var(--muted, #6b7280);
  background: var(--soft, #f3f4f6);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.custom-font-chevron {
  color: var(--muted, #6b7280);
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
  margin-left: 2px;
}

.custom-font-trigger.is-open .custom-font-chevron {
  transform: rotate(180deg);
  color: #803e4b;
}

.custom-font-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 1000;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 36px -4px rgba(17, 24, 39, 0.14), 0 4px 12px rgba(17, 24, 39, 0.04);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  direction: rtl;
  animation: fontPickerIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fontPickerIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  user-select: none;
  gap: 12px;
}

.custom-font-option:hover,
.custom-font-option.highlighted {
  background-color: rgba(128, 62, 75, 0.05);
}

.custom-font-option.selected {
  background-color: rgba(128, 62, 75, 0.08);
}

.custom-font-option-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.custom-font-option-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #111827);
  line-height: 1.3;
}

.custom-font-option.selected .custom-font-option-title {
  color: #803e4b;
  font-weight: 600;
}

.custom-font-option-sample {
  font-size: 12px;
  color: var(--muted, #6b7280);
  line-height: 1.3;
  opacity: 0.85;
}

.custom-font-option.selected .custom-font-option-sample {
  color: #803e4b;
  opacity: 0.9;
}

.custom-font-check {
  color: #803e4b;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.custom-font-option.selected .custom-font-check {
  opacity: 1;
  transform: scale(1);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2-Column Row in RTL: Column 1 is on the RIGHT (Color), Column 2 is on the LEFT (Font Size) */
.font-size-color-row {
  display: grid !important;
  grid-template-columns: 136px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
}

.color-control-col {
  width: 100% !important;
  min-width: 130px !important;
  max-width: 140px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.size-control-col {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.control-header-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 22px !important;
  height: 22px !important;
  max-height: 22px !important;
  margin-bottom: 6px !important;
  box-sizing: border-box !important;
}
.field-label-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  line-height: 1 !important;
}
.size-badge-val {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: var(--soft) !important;
  padding: 0 7px !important;
  height: 20px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  direction: ltr !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  text-align: center !important;
}

.size-stepper-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 3px 6px !important;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
}
.size-step-btn {
  flex: none !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: bold !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.size-step-btn:hover {
  background: var(--soft) !important;
  border-color: #9ca3af !important;
}
.size-step-btn:focus,
.size-step-btn:focus-visible {
  outline: none !important;
  border-color: #9ca3af !important;
  box-shadow: none !important;
}

/* Modern, ultra-clean font size range slider (no border, no focus outline, thin 4px soft line) */
.font-size-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 40px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.font-size-slider:focus,
.font-size-slider:focus-visible,
.font-size-slider:active,
input[type=range]:focus,
input[type=range]:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.font-size-slider::-webkit-slider-runnable-track {
  height: 4px !important;
  background: #e5e7eb !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
}
.font-size-slider:hover::-webkit-slider-runnable-track {
  background: #d1d5db !important;
}
.font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  margin-top: -6px !important;
  cursor: pointer !important;
  transition: transform .12s ease, background-color .12s ease !important;
}
.font-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18) !important;
  background: #000000 !important;
}
.font-size-slider:active::-webkit-slider-thumb {
  transform: scale(1.25) !important;
}
.font-size-slider::-moz-range-track {
  height: 4px !important;
  background: #e5e7eb !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
}
.font-size-slider:hover::-moz-range-track {
  background: #d1d5db !important;
}
.font-size-slider::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: transform .12s ease, background-color .12s ease !important;
}
.font-size-slider::-moz-range-thumb:hover {
  transform: scale(1.18) !important;
  background: #000000 !important;
}
.font-size-slider::-moz-range-progress {
  background: transparent !important;
}

.color-swatch-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 3px 6px !important;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  box-sizing: border-box !important;
}
.color-swatch-box:hover {
  border-color: #9ca3af !important;
  background: var(--soft) !important;
}
.color-swatch-box:focus-within {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.25) !important;
}
.color-swatch-preview {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  flex: 0 0 26px !important;
  padding: 0 !important;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.12) !important;
  transition: transform .12s ease !important;
}
.color-swatch-preview:hover {
  transform: scale(1.05) !important;
}
.color-native-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.color-hex-field {
  flex: 1 1 auto !important;
  width: 76px !important;
  min-width: 65px !important;
  height: 32px !important;
  min-height: 28px !important;
  max-height: 32px !important;
  line-height: 32px !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  direction: ltr !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: text !important;
  user-select: all !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.color-hex-field:focus,
.color-hex-field:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Segmented text alignment */
.segmented-alignment {
  display: flex !important;
  background: var(--soft) !important;
  padding: 3px !important;
  border-radius: 9px !important;
  gap: 3px !important;
  border: 1px solid var(--line) !important;
  margin: 10px 0 !important;
}
.segment-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.segment-btn:hover {
  color: var(--ink) !important;
}
.segment-btn[aria-pressed=true] {
  background: white !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  font-weight: 600 !important;
}

/* Figma style toggles: bold, alternate letters, center */
.figma-style-toggles {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  margin: 6px 0 12px !important;
}
.style-toggle-btn {
  flex: 1 1 0 !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: white !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  white-space: nowrap !important;
}
.style-toggle-btn:hover {
  background: var(--soft) !important;
  border-color: var(--line) !important;
}
.style-toggle-btn[aria-pressed=true] {
  background: var(--soft) !important;
  border-color: var(--line) !important;
  color: #111827 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* ========================================================
   DATE FIELD & PRIORITY PICKER STYLING
   ======================================================== */
.date-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.date-field .unified-calendar {
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: white !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
.calendar-toggle-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: var(--soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
  list-style: none !important;
}
.calendar-toggle-summary::-webkit-details-marker {
  display: none !important;
}
.calendar-toggle-summary:hover {
  background: var(--soft) !important;
}
.calendar-toggle-summary svg {
  color: var(--gold) !important;
  flex: none !important;
}

.date-hero-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  color: var(--ink) !important;
  white-space: pre-line !important;
}

.date-quick-formats {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 4px 0 !important;
}
.date-quick-formats .field-mini-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.date-segmented-control {
  display: flex !important;
  background: var(--soft) !important;
  padding: 3px !important;
  border-radius: 9px !important;
  gap: 4px !important;
  border: 1px solid var(--line) !important;
}
.date-seg-btn {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  white-space: nowrap !important;
}
.date-seg-btn:hover {
  color: var(--ink) !important;
}
.date-seg-btn[aria-pressed=true] {
  background: white !important;
  color: #111827 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.date-quick-checks {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--soft) !important;
  border-radius: 9px !important;
  border: 1px solid var(--line) !important;
  margin-top: 4px !important;
}
.date-quick-checks .check-field {
  font-size: 12px !important;
  color: var(--ink) !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* ========================================================
   STANDALONE ICONS LIBRARY GRID
   ======================================================== */
.icon-library {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 0 !important;
}
.icon-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: white !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.icon-option:hover {
  border-color: #d1d5db !important;
  background: var(--soft) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04) !important;
}
.icon-option img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}
.icon-option span {
  font-size: 11px !important;
  color: var(--ink) !important;
  text-align: center !important;
}

/* ========================================================
   STANDALONE DIVIDERS POPUP & LIBRARY (MATCHING CALLIGRAPHY & ICONS)
   ======================================================== */
.divider-library {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 4px 0 8px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

@media (max-width: 480px) {
  .divider-library {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.divider-option {
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: white !important;
  padding: 10px 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 76px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.divider-option:hover {
  border-color: #d1d5db !important;
  background: var(--soft) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.divider-option img {
  height: 24px !important;
  max-width: 90% !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.divider-option span {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 2px !important;
}

.calligraphy-option img,
.icon-option img,
.divider-option img {
  margin: 0 !important;
}

/* ========================================================
   TEMPLATE PICKER CAROUSEL (DESKTOP & MOBILE)
   ======================================================== */
#template-picker {
  width: min(720px, 94vw) !important;
  max-width: 720px !important;
  padding: 24px 26px !important;
  border-radius: 20px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

@media (max-width: 760px) {
  #template-picker {
    padding: 16px 14px 20px !important;
    width: 95vw !important;
  }
}

#template-picker .dialog-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  position: static !important;
}

#template-picker .dialog-heading h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

#template-picker .panel-intro {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 16px !important;
}

.template-picker-carousel {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin: 8px 0 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 6px !important;
}

.template-options {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 6px 18px !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}

.template-options::-webkit-scrollbar {
  display: none !important;
}

.template-options.is-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.template-option {
  flex: 0 0 176px !important;
  width: 176px !important;
  min-width: 176px !important;
  scroll-snap-align: center !important;
  padding: 10px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  touch-action: pan-x pan-y !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
}

.template-option:focus,
.template-option:focus-visible {
  outline: none !important;
}

@media (max-width: 760px) {
  .template-option {
    flex: 0 0 150px !important;
    width: 150px !important;
    min-width: 150px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .template-option:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
  }
}

.template-option[aria-pressed=true] {
  border: 1.5px solid var(--line) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

.template-option[aria-pressed=true]::before {
  content: '✓  الحالي' !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(17, 24, 39, 0.92) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 4px 11px 5px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  letter-spacing: 0.02em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.template-option canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 9px !important;
  margin-bottom: 6px !important;
  pointer-events: none !important;
  background: #f3f4f6 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.template-option span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-align: center !important;
  padding: 4px 6px 2px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  transition: color .15s ease !important;
}

.template-option[aria-pressed=true] span {
  font-weight: 700 !important;
  color: #111827 !important;
}

.carousel-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  color: var(--ink) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  outline: none !important;
  aspect-ratio: 1 / 1 !important;
}

.carousel-nav-btn:hover {
  background: #f9fafb !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.carousel-nav-btn:active {
  transform: translateY(-50%) scale(0.96) !important;
}

.carousel-nav-btn:focus,
.carousel-nav-btn:focus-visible {
  outline: none !important;
}

.carousel-nav-btn svg {
  flex: none !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
}

.carousel-prev {
  right: -12px !important;
}

.carousel-next {
  left: -12px !important;
}

/* ========================================================
   DEDICATED MOBILE STUDIO UI & BOTTOM DOCKED SHEET
   ======================================================== */
.mobile-tabs {
  display: none;
}

#editor[hidden], #gallery[hidden] {
  display: none !important;
}

@media(max-width: 760px) {
  /* ========================================================
     NATIVE APP-LIKE MOBILE STUDIO EXPERIENCE
     ======================================================== */
  
  /* Root Editor Container: Fullscreen Fixed App Frame */
  #editor:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: var(--viewport-height, 100svh) !important;
    max-height: var(--viewport-height, 100svh) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1000 !important;
    background: #ffffff !important;
  }

  .editor-shell {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  /* Single-Row Native App Bar (Header: 54px min-height with comfortable inset) */
  .editor-toolbar {
    flex: 0 0 auto !important;
    min-height: 54px !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--line) !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 25 !important;
    box-sizing: border-box !important;
  }

  /* Hide Desktop-only Bloat on Mobile */
  .editor-identity,
  .toolbar-actions #studio-expand,
  .editor-toolbar .preview-zoom {
    display: none !important;
  }

  /* Sleek, Non-Wrapping Toolbar Actions Row */
  .toolbar-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Right Action: Template Switcher */
  /* Right Actions: Back to Home & Change Template */
  .toolbar-actions #editor-back {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    background: #ffffff !important;
    color: var(--ink) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  .toolbar-actions #editor-back .button-label {
    display: none !important;
  }
  .toolbar-actions #editor-back svg {
    width: 18px !important;
    height: 18px !important;
  }

  .toolbar-actions #change-template {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    background: white !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  .toolbar-actions #change-template svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--gold) !important;
  }

  /* Center Action: Undo / Redo History Buttons */
  .toolbar-actions .history-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .toolbar-actions .history-buttons button {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    background: #ffffff !important;
    color: var(--ink) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s ease !important;
  }
  .toolbar-actions .history-buttons button:active {
    background: var(--soft) !important;
  }
  .toolbar-actions .history-buttons button svg {
    width: 16px !important;
    height: 16px !important;
  }
  .toolbar-actions .history-buttons .button-label {
    display: none !important;
  }

  /* Left Action: Merged Download & Share Button */
  .toolbar-actions .primary-button,
  .toolbar-actions #export-png {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #111827 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.12) !important;
  }
  .toolbar-actions #export-png svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Vertical Flex Workspace (Stage Top, Tabs Middle, Drawer Bottom) */
  .studio-workspace {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
    position: relative !important;
    background: #eceff1 !important;
  }

  /* Reset all child grid properties to prevent layout collisions */
  .creation-panel,
  .canvas-area,
  .mobile-tabs,
  .inspector {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Hero Canvas Stage (order: 1) - In-Place Zoomable Viewport */
  .canvas-area {
    order: 1 !important;
    flex: 1 1 58% !important;
    min-height: 250px !important;
    max-height: 60% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    background: #eceff1 !important;
  }

  .canvas-scroll {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior: contain !important;
    padding: 8px 12px 20px !important;
    box-sizing: border-box !important;
  }

  .canvas-scroll .preview-frame {
    margin: auto !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: var(--ratio, 0.5625) !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.14), 0 4px 10px -2px rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    transition: none !important;
    will-change: transform;
  }

  .canvas-area canvas {
    border-radius: 6px !important;
  }
  .canvas-caption {
    display: none !important;
  }

  /* Floating In-Place Zoom Bar on Mobile (Stationary in canvas corner) */
  .mobile-canvas-zoom {
    position: absolute !important;
    bottom: 26px !important;
    left: 16px !important;
    z-index: 40 !important;
    display: inline-flex !important;
    align-items: center !important;
    direction: ltr !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    padding: 3px !important;
    gap: 4px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  .mobile-zoom-step-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s ease, opacity .15s ease, transform .1s ease !important;
  }
  .mobile-zoom-step-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: #475569 !important;
    flex: none !important;
  }
  .mobile-zoom-step-btn:hover {
    background: #f1f5f9 !important;
  }
  .mobile-zoom-step-btn:active {
    background: #e2e8f0 !important;
    transform: scale(0.92) !important;
  }
  .mobile-zoom-step-btn:disabled {
    opacity: 0.25 !important;
    pointer-events: none !important;
  }

  .mobile-floating-preview-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all .18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    box-sizing: border-box !important;
  }
  .mobile-floating-preview-btn svg {
    width: 15px !important;
    height: 15px !important;
    color: #334155 !important;
    flex: none !important;
  }
  .mobile-floating-preview-btn .preview-icon-close {
    display: none !important;
  }
  .mobile-floating-preview-btn .preview-icon-open {
    display: inline-flex !important;
  }
  .mobile-floating-preview-btn:hover {
    background: #e2e8f0 !important;
  }
  .mobile-floating-preview-btn:active {
    transform: scale(0.94) !important;
  }
  .mobile-floating-preview-btn.is-zoomed {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
  }
  .mobile-floating-preview-btn.is-zoomed svg {
    color: #ffffff !important;
  }
  .mobile-floating-preview-btn.is-zoomed .preview-icon-open {
    display: none !important;
  }
  .mobile-floating-preview-btn.is-zoomed .preview-icon-close {
    display: inline-flex !important;
  }

  /* Segmented Mobile Tabs Bar (Drawer Top: order 2) */
  .mobile-tabs {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    background: #ffffff !important;
    border-radius: 20px 20px 0 0 !important;
    margin-top: -14px !important;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.06), 0 -1px 3px rgba(15, 23, 42, 0.03) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 25 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  .mobile-tab-btn {
    flex: 1 1 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    padding: 0 10px !important;
    transition: all .16s ease !important;
    box-sizing: border-box !important;
  }
  .mobile-tab-btn svg {
    width: 17px !important;
    height: 17px !important;
    flex: none !important;
    color: var(--muted) !important;
    transition: color .16s ease !important;
  }
  .mobile-tab-btn.active {
    background: var(--soft) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }
  .mobile-tab-btn.active svg {
    color: var(--gold) !important;
  }

  /* Bottom Drawer Panels (order: 3) */
  .creation-panel,
  .inspector {
    order: 3 !important;
    flex: 1 1 38% !important;
    max-height: 40% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 14px calc(24px + env(safe-area-inset-bottom, 16px)) !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Tab Switching: Show active panel, hide the other */
  .studio-workspace[data-mobile-tab="inspector"] .inspector {
    display: block !important;
  }
  .studio-workspace[data-mobile-tab="inspector"] .creation-panel {
    display: none !important;
  }

  .studio-workspace[data-mobile-tab="creation"] .creation-panel {
    display: block !important;
  }
  .studio-workspace[data-mobile-tab="creation"] .inspector {
    display: none !important;
  }

  /* Default state when data-mobile-tab is not yet set */
  .studio-workspace:not([data-mobile-tab]) .inspector {
    display: block !important;
  }
  .studio-workspace:not([data-mobile-tab]) .creation-panel {
    display: none !important;
  }

  /* Creation Panel Styles */
  .creation-panel .panel-kicker {
    display: none !important;
  }
  .creation-panel .insert-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .creation-group {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .creation-group h2 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0.3px !important;
  }
  .creation-group .tool-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .creation-panel .tool-button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    border-radius: 9px !important;
    border: 1px solid var(--line) !important;
    background: #ffffff !important;
    color: var(--ink) !important;
    text-align: right !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    box-sizing: border-box !important;
  }
  .creation-panel .tool-button:hover {
    border-color: #9ca3af !important;
    background: var(--soft) !important;
  }
  .creation-panel .tool-button:active {
    transform: scale(0.98) !important;
  }
  .creation-panel .tool-button svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--gold) !important;
    flex: none !important;
  }
  .creation-panel .tool-button span,
  .creation-panel .tool-button .button-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .creation-panel .creation-bottom {
    display: flex !important;
    justify-content: center !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--line) !important;
    position: static !important;
  }
  .creation-panel .creation-bottom p {
    display: none !important;
  }
  .creation-panel .creation-bottom #clear-template {
    position: static !important;
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
  }

  /* Inspector Styles */
  .inspector .inspector-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .inspector .inspector-heading .panel-kicker {
    display: none !important;
  }
  .inspector .inspector-heading h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin: 0 !important;
  }
  .inspector .change-calligraphy,
  .inspector .change-icon,
  .inspector .change-divider {
    font-size: 11px !important;
    padding: 4px 10px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid var(--line) !important;
    background: var(--soft) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
  }

  /* Text Field: Compact single-row height expanding on demand */
  .inspector .field:has(textarea) {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  .inspector textarea#selected-text {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 22px !important;
    padding: 7px 11px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 76px !important;
    box-sizing: border-box !important;
    resize: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  .inspector textarea#selected-text:focus {
    border-color: #9ca3af !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2) !important;
  }

  /* Typography Section: Optimized Spacing */
  .typography-section {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
  }
  .typography-section h3 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    margin: 0 0 6px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }
  .inspector .context-bar {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* Font selector */
  .font-family-row {
    margin-bottom: 8px !important;
    width: 100% !important;
  }
  .font-family-row .field {
    width: 100% !important;
    margin: 0 !important;
    gap: 3px !important;
  }
  .font-family-row select {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    box-sizing: border-box !important;
  }

  /* Font Size & Color Row */
  .font-size-color-row {
    display: grid !important;
    grid-template-columns: minmax(115px, 135px) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  .color-control-col {
    width: 100% !important;
  }
  .color-swatch-box {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 8px !important;
  }
  .size-stepper-wrap {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 8px !important;
    padding: 2px 5px !important;
    gap: 4px !important;
  }
  .size-step-btn {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-radius: 6px !important;
  }

  /* Alignment Control */
  .segmented-alignment {
    display: flex !important;
    background: var(--soft) !important;
    padding: 2px !important;
    border-radius: 8px !important;
    gap: 3px !important;
    border: 1px solid var(--line) !important;
    margin: 6px 0 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .segment-btn {
    flex: 1 !important;
    min-height: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
  }
  .segment-btn[aria-pressed=true] {
    background: #ffffff !important;
    color: var(--ink) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    font-weight: 600 !important;
  }

  /* Style Toggles */
  .figma-style-toggles {
    display: flex !important;
    gap: 6px !important;
    margin: 6px 0 10px !important;
    width: 100% !important;
  }
  .style-toggle-btn {
    flex: 1 1 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 5px 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
  }
  .style-toggle-btn:hover {
    background: var(--soft) !important;
    border-color: var(--line) !important;
  }
  .style-toggle-btn[aria-pressed=true] {
    background: var(--soft) !important;
    border-color: var(--line) !important;
    color: #111827 !important;
    font-weight: 700 !important;
  }

  /* Selection Actions */
  .inspector .selection-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
    gap: 8px !important;
  }
  .inspector .selection-actions .delete-layer {
    color: #bd4239 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 10px !important;
    min-height: 34px !important;
    border-radius: 7px !important;
    border: 1px solid #fee2e2 !important;
    background: #fff5f5 !important;
  }
  .inspector .selection-actions .reset-layer {
    color: var(--muted) !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    border: 1px solid var(--line) !important;
    background: transparent !important;
  }

  /* Mobile Dialogs / Modals */
  .studio-dialog {
    width: min(94vw, 440px) !important;
    max-width: 94vw !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  .dialog-heading h2 {
    font-size: 22px !important;
  }

  /* Keyboard Open State (Smooth Adaptation) */
  body.keyboard-open .canvas-area {
    flex: 0 0 95px !important;
    min-height: 85px !important;
    max-height: 95px !important;
    padding: 6px 12px !important;
  }
  body.keyboard-open .mobile-tabs {
    height: 38px !important;
    min-height: 38px !important;
    padding: 2px 6px !important;
  }
  body.keyboard-open .mobile-tab-btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
  }
  body.keyboard-open .creation-panel,
  body.keyboard-open .inspector {
    flex: 1 1 auto !important;
    max-height: none !important;
  }
  body.keyboard-open .mobile-canvas-zoom {
    display: none !important;
  }
}



/* ==========================================================================
   Photo Layer Controls, Presets & Cutout Styling
   ========================================================================== */
.photo-size-row {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.photo-size-row .control-header-flex,
.photo-slider-row .control-header-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 2px !important;
}

.photo-inspector-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.photo-main-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.photo-main-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.photo-main-actions-grid .photo-cutout-btn {
  grid-column: 1 / -1 !important;
  min-height: 42px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.photo-main-actions-grid .photo-edit-btn {
  grid-column: 1 / -1 !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.photo-main-actions-grid .photo-center-btn,
.photo-main-actions-grid .photo-change-btn {
  min-height: 38px !important;
  font-size: 12px !important;
}

.photo-main-actions button {
  flex: 1 1 auto !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.photo-cutout-btn {
  font-weight: 600 !important;
}

.photo-cutout-btn.primary-button {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #1f2937 !important;
  box-shadow: 0 2px 4px rgba(17, 24, 39, 0.12) !important;
}

.photo-cutout-btn.primary-button:hover {
  background: #000000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(17, 24, 39, 0.2) !important;
}

.photo-cutout-btn.cutout-active {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

.photo-cutout-btn.cutout-active:hover {
  background: var(--soft) !important;
  border-color: #9ca3af !important;
}

.photo-card {
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.photo-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.photo-presets-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.photo-preset-pill {
  padding: 6px 12px !important;
  min-height: 32px !important;
  border-radius: 16px !important;
  font-size: 11.5px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-weight: 500 !important;
}

.photo-preset-pill:hover {
  border-color: #9ca3af !important;
  background: var(--soft) !important;
  transform: translateY(-1px) !important;
}

.photo-preset-pill:active {
  transform: translateY(0) !important;
}

.photo-sliders-card {
  gap: 12px !important;
}

.photo-slider-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.photo-slider-row .size-stepper-wrap {
  width: 100% !important;
}

.photo-shape-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--line) !important;
  gap: 8px !important;
}

.photo-shape-segmented {
  display: flex !important;
  background: white !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 3px !important;
}

.photo-shape-segmented .segment-btn {
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.15s ease !important;
}

.photo-shape-segmented .segment-btn:hover {
  color: var(--ink) !important;
}

.photo-shape-segmented .segment-btn.active,
.photo-shape-segmented .segment-btn[aria-pressed="true"] {
  background: var(--ink) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.photo-empty-state {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: center !important;
  text-align: center !important;
  padding: 20px 14px !important;
  background: var(--soft) !important;
  border: 1.5px dashed var(--line) !important;
  border-radius: 12px !important;
}

.photo-upload-main-btn {
  width: 100% !important;
  min-height: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.preview-frame.is-zooming { transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; }
body.is-dragging * { user-select: none !important; }
body.is-dragging .preview-frame { transition: none !important; }

/* ========================================================
   STUDIO EDITOR FIXED WORKSPACE & HIDE FOOTER
   ======================================================== */
body:has(#editor:not([hidden])),
body.is-editor {
  overflow: hidden !important;
  height: 100svh !important;
  max-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
}

body:has(#editor:not([hidden])) footer#privacy,
body.is-editor footer#privacy,
body:has(#editor:not([hidden])) #privacy,
body.is-editor #privacy,
footer#privacy[hidden],
#privacy[hidden] {
  display: none !important;
}

body:has(#editor:not([hidden])) .header,
body.is-editor .header {
  flex: 0 0 auto !important;
}

body:has(#editor:not([hidden])) #main,
body.is-editor #main {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body:has(#editor:not([hidden])) #editor,
body.is-editor #editor {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body:has(#editor:not([hidden])) .editor-shell,
body.is-editor .editor-shell {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(#editor:not([hidden])) .editor-toolbar,
body.is-editor .editor-toolbar {
  flex: 0 0 auto !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
  z-index: 10 !important;
}

body:has(#editor:not([hidden])) .studio-workspace,
body.is-editor .studio-workspace {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* ========================================================
   LOCATION & QR BARCODE TOOL MODERN STYLES
   ======================================================== */
.qr-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.qr-info-callout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  padding: 8px 11px !important;
  margin: 3px 0 10px 0 !important;
}

.qr-info-callout svg {
  flex: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
  color: var(--muted) !important;
}

.qr-info-callout p {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: #4b5563 !important;
  text-align: right !important;
}

.qr-colors-section {
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.qr-colors-section .section-subhead {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  margin: 0 0 2px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.qr-colors-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  margin-bottom: 4px !important;
}

.qr-colors-grid .color-control-col {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.qr-transparent-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  padding: 8px 10px !important;
  user-select: none !important;
  margin: 2px 0 6px 0 !important;
  background: var(--soft) !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.qr-transparent-check:hover {
  background: #eef2f6 !important;
  border-color: #cbd5e1 !important;
}

.qr-transparent-check input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  accent-color: var(--ink) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.qr-bg-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
  filter: grayscale(1) !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

.qr-contrast-feedback {
  font-size: 11px !important;
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  margin: 2px 0 0 !important;
  line-height: 1.5 !important;
}

.qr-contrast-feedback[hidden],
.qr-contrast-feedback:empty {
  display: none !important;
}

.qr-zoom-hint {
  font-size: 11px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  margin: 2px 0 0 !important;
}

.qr-center-btn {
  width: 100% !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid var(--line) !important;
  background: white !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  margin-top: 4px !important;
}

.qr-center-btn:hover {
  border-color: #9ca3af !important;
  background: var(--soft) !important;
}

.qr-center-btn svg {
  color: var(--gold) !important;
}

#location-dialog {
  width: min(92vw, 440px) !important;
  max-width: 440px !important;
}

#location-fields textarea {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  min-height: 64px !important;
  resize: vertical !important;
}

#location-fields input {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  min-height: 38px !important;
}

#location-fields .primary-button {
  width: 100% !important;
  min-height: 44px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  margin-top: 12px !important;
}

/* ========================================================
   UNIFIED NOTIFICATION & ALERT DESIGN SYSTEM
   ======================================================== */

/* 1. Global Floating Toast Notifications */
.toast {
  position: fixed !important;
  top: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 99999 !important;
  width: max-content !important;
  max-width: min(92vw, 440px) !important;
  background: rgba(17, 24, 39, 0.94) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  text-align: center !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.toast[hidden] {
  display: none !important;
}

.toast:not([hidden]) {
  animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.toast svg {
  flex: none !important;
  width: 16px !important;
  height: 16px !important;
}

/* 2. Canvas Warning Banner (Centered Floating Pill) */
#render-warnings,
.canvas-area > #render-warnings {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 35 !important;
  width: max-content !important;
  max-width: min(92%, 500px) !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  background: rgba(255, 251, 235, 0.96) !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 16px rgba(180, 83, 9, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  pointer-events: auto !important;
  animation: noticeSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#render-warnings[hidden],
.canvas-area > #render-warnings[hidden] {
  display: none !important;
}

#render-warnings svg {
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
  color: #d97706 !important;
}

/* 3. Floating Download Fallback */
#download-fallback,
.download-fallback-card {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(92vw, 400px) !important;
  width: auto !important;
  background: white !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  z-index: 1000 !important;
  animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#download-fallback[hidden] {
  display: none !important;
}

#download-fallback a {
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  padding: 4px 8px !important;
  background: var(--soft) !important;
  border-radius: 6px !important;
  transition: background-color .15s ease !important;
}

#download-fallback a:hover {
  background: #e2e8f0 !important;
}

.fallback-close-btn {
  background: none !important;
  border: 0 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  margin-inline-start: 4px !important;
}

.fallback-close-btn:hover {
  color: var(--ink) !important;
  background: var(--soft) !important;
}

/* Unified Animations */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes noticeSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}