.ir-studio-shell,
.ir-studio-editor-page {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: 1rem;
  font-family: Vazirmatn, sans-serif;
  font-size: 16px;
}

.ir-studio-shell button,
.ir-studio-shell input,
.ir-studio-shell textarea,
.ir-studio-shell select,
.ir-studio-editor-page button,
.ir-studio-editor-page input,
.ir-studio-editor-page textarea,
.ir-studio-editor-page select {
  font-family: Vazirmatn, sans-serif;
}

.ir-studio-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #fecaca;
  border-radius: 28px;
  padding: 1.4rem;
  background: linear-gradient(145deg, #fff7f7, #fff 62%);
}
.dark .ir-studio-hero { background: linear-gradient(145deg, #27191b, #111827 65%); border-color: #7f1d1d; }
.ir-studio-hero::after { content:""; position:absolute; width:190px; height:190px; left:-70px; top:-80px; border-radius:999px; background:rgba(239,68,68,.13); filter:blur(4px); }
.ir-studio-kicker { position:relative; z-index:1; display:inline-flex; border-radius:999px; padding:.38rem .8rem; background:#fee2e2; color:#b91c1c; font-size:.82rem; font-weight:900; }
.dark .ir-studio-kicker { background:rgba(239,68,68,.14); color:#fca5a5; }
.ir-studio-hero h1 { position:relative; z-index:1; margin:.8rem 0 .3rem; color:#111827; font-size:1.55rem; line-height:1.8; font-weight:950; }
.dark .ir-studio-hero h1 { color:#fff; }
.ir-studio-hero p { position:relative; z-index:1; margin:0; color:#64748b; font-size:.98rem; line-height:1.9; }
.dark .ir-studio-hero p { color:#cbd5e1; }
.ir-studio-hero__chips { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.ir-studio-hero__chips span { border:1px solid #e5e7eb; border-radius:999px; background:#fff; padding:.46rem .75rem; color:#475569; font-size:.78rem; font-weight:800; }
.dark .ir-studio-hero__chips span { background:#1f2937; border-color:#374151; color:#d1d5db; }
.ir-studio-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:1.7rem 0 .8rem; }
.ir-studio-section-head--goals { margin-bottom:.65rem; }
.ir-studio-section-head span,.ir-studio-control-head>span { color:#dc2626; font-size:.8rem; font-weight:900; }
.ir-studio-section-head h2 { margin:.18rem 0 0; font-size:1.15rem; line-height:1.7; font-weight:950; color:#111827; }
.dark .ir-studio-section-head h2 { color:#fff; }
.ir-studio-section-head small { color:#94a3b8; font-size:.78rem; line-height:1.7; }

.ir-studio-goal-tabs {
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.15rem 0 .4rem;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.ir-studio-goal-tab {
  flex:0 0 auto;
  min-height:44px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  padding:.6rem .95rem;
  color:#475569;
  font-family:inherit;
  font-size:.82rem;
  font-weight:900;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.ir-studio-goal-tab:hover { border-color:#fca5a5; color:#b91c1c; transform:translateY(-1px); }
.ir-studio-goal-tab.is-active { border-color:#dc2626; background:#dc2626; color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.18); }
.dark .ir-studio-goal-tab { background:#111827; border-color:#374151; color:#cbd5e1; }
.dark .ir-studio-goal-tab.is-active { background:#dc2626; border-color:#dc2626; color:#fff; }

.ir-studio-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; align-items:start; }
.ir-studio-template-card { overflow:hidden; border:1px solid #e5e7eb; border-radius:22px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 6px 24px rgba(15,23,42,.04); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ir-studio-template-card[hidden] { display:none !important; }
.ir-studio-template-card:hover { transform:translateY(-2px); border-color:#fca5a5; box-shadow:0 12px 30px rgba(15,23,42,.08); }
.ir-studio-template-card__main { display:block; color:inherit; text-decoration:none; }
.ir-studio-template-card__reset-form { margin:-.35rem .72rem .72rem; padding-top:.55rem; border-top:1px solid #eef2f7; }
.ir-studio-template-card__reset-form button { width:100%; border:0; border-radius:10px; padding:.48rem .65rem; background:#fff7ed; color:#9a3412; font:800 .7rem/1.6 Vazirmatn,sans-serif; cursor:pointer; transition:background .16s ease,color .16s ease; }
.ir-studio-template-card__reset-form button:hover { background:#ffedd5; color:#7c2d12; }
.dark .ir-studio-template-card { background:#1f2937; border-color:#374151; }
.dark .ir-studio-template-card__reset-form { border-top-color:#334155; }
.dark .ir-studio-template-card__reset-form button { background:#431407; color:#fed7aa; }

.ir-studio-dialog-open { overflow:hidden; }
.ir-studio-toast-host { position:fixed; z-index:10020; top:1.1rem; left:50%; display:grid; width:min(92vw,420px); gap:.55rem; transform:translateX(-50%); pointer-events:none; }
.ir-studio-toast { opacity:0; transform:translateY(-10px); border:1px solid #e2e8f0; border-radius:14px; padding:.78rem 1rem; background:#fff; color:#1e293b; box-shadow:0 16px 40px rgba(15,23,42,.16); font:800 .82rem/1.8 Vazirmatn,sans-serif; text-align:center; transition:opacity .2s ease,transform .2s ease; }
.ir-studio-toast.is-visible { opacity:1; transform:translateY(0); }
.ir-studio-toast.is-success { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.ir-studio-toast.is-error { border-color:#fecaca; background:#fff1f2; color:#9f1239; }
.ir-studio-confirm { position:fixed; z-index:10010; inset:0; display:grid; place-items:center; padding:1rem; opacity:0; transition:opacity .12s ease; }
.ir-studio-confirm[hidden] { display:none !important; }
.ir-studio-confirm.is-open { opacity:1; }
.ir-studio-confirm__backdrop { position:absolute; inset:0; background:rgba(31,41,55,.72); }
.ir-studio-confirm__card { position:relative; width:min(92vw,430px); border:1px solid rgba(255,255,255,.65); border-radius:20px; padding:1.35rem; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.35); text-align:right; transform:translateY(10px) scale(.985); transition:transform .12s ease; }
.ir-studio-confirm.is-open .ir-studio-confirm__card { transform:translateY(0) scale(1); }
.ir-studio-confirm__icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:.85rem; border-radius:12px; background:#fff1f2; color:#e11d48; font:950 1.1rem/1 Vazirmatn,sans-serif; }
.ir-studio-confirm__card h2 { margin:0; color:#0f172a; font:950 1.05rem/1.8 Vazirmatn,sans-serif; }
.ir-studio-confirm__card p { margin:.45rem 0 0; color:#64748b; font:600 .8rem/1.95 Vazirmatn,sans-serif; }
.ir-studio-confirm__actions { display:grid; grid-template-columns:1fr 1.35fr; gap:.65rem; margin-top:1.15rem; }
.ir-studio-confirm__button { border:1px solid #e2e8f0; border-radius:12px; padding:.68rem .75rem; background:#fff; color:#334155; font:850 .76rem/1.6 Vazirmatn,sans-serif; cursor:pointer; }
.ir-studio-confirm__button--danger { border-color:#e11d48; background:#e11d48; color:#fff; }
.dark .ir-studio-confirm__card { border-color:#334155; background:#111827; }
.dark .ir-studio-confirm__card h2 { color:#f8fafc; }
.dark .ir-studio-confirm__card p { color:#94a3b8; }
.dark .ir-studio-confirm__button { border-color:#334155; background:#1e293b; color:#e2e8f0; }
.dark .ir-studio-confirm__button--danger { border-color:#e11d48; background:#e11d48; color:#fff; }
.ir-studio-template-card__preview {
  position:relative;
  display:flex;
  aspect-ratio:9/16;
  min-height:0;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding:.85rem;
  background:#f8fafc;
  color:#fff;
  isolation:isolate;
}
.ir-studio-template-card__image { position:absolute; z-index:-1; inset:15% 9% auto; height:47%; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--studio-accent) 48%,#fff),color-mix(in srgb,var(--studio-bg) 70%,#0f172a)); box-shadow:0 12px 30px rgba(2,6,23,.22); transform:rotate(-2deg); }
.ir-studio-template-card__image::before { content:""; position:absolute; width:46%; aspect-ratio:1; left:10%; bottom:12%; border-radius:50% 50% 42% 58%; background:rgba(255,255,255,.34); }
.ir-studio-template-card__image::after { content:""; position:absolute; width:72%; height:42%; right:-12%; bottom:-8%; border-radius:60% 0 0 0; background:rgba(15,23,42,.23); transform:rotate(-9deg); }
.ir-studio-template-card__image i { position:absolute; width:22%; aspect-ratio:1; top:16%; right:14%; border-radius:999px; background:rgba(255,255,255,.58); }
.ir-studio-template-card__preview-copy { position:relative; z-index:2; display:block; padding:.2rem .05rem .15rem; text-align:right; }
.ir-studio-template-card__preview-copy strong { display:block; max-width:100%; color:#fff; font-size:.94rem; line-height:1.7; font-weight:950; text-shadow:0 2px 14px rgba(0,0,0,.3); }
.ir-studio-template-card__preview-copy small { display:-webkit-box; margin-top:.24rem; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:rgba(255,255,255,.82); font-size:.66rem; line-height:1.75; }
.ir-studio-template-card__accent-line { position:relative; z-index:2; display:block; width:54%; height:5px; margin-top:.55rem; border-radius:99px; background:var(--studio-accent); }
.ir-studio-template-card__preview[data-layout="poll-choice"] .ir-studio-template-card__image { inset:17% 7% auto; height:42%; background:linear-gradient(90deg,color-mix(in srgb,var(--studio-accent) 65%,#fff) 0 48%,rgba(255,255,255,.28) 48% 52%,color-mix(in srgb,var(--studio-bg) 65%,#fff) 52%); transform:none; }
.ir-studio-template-card__preview[data-layout="birthday-photo"] .ir-studio-template-card__image,
.ir-studio-template-card__preview[data-layout="wedding-photo"] .ir-studio-template-card__image,
.ir-studio-template-card__preview[data-layout="celebration-photo"] .ir-studio-template-card__image { inset:12% 10% auto; height:54%; border-radius:999px 999px 32px 32px; transform:none; }
.ir-studio-template-card__preview[data-layout="wedding-photo"] { color:#1f2937; }
.ir-studio-template-card__preview[data-layout="wedding-photo"] .ir-studio-template-card__preview-copy strong { color:#1f2937; text-shadow:none; }
.ir-studio-template-card__preview[data-layout="wedding-photo"] .ir-studio-template-card__preview-copy small { color:#6b7280; }
.ir-studio-template-card__body { display:block; padding:.8rem .85rem .9rem; }
.ir-studio-template-card__body>strong { display:block; color:#111827; font-size:.88rem; line-height:1.65; font-weight:950; }
.dark .ir-studio-template-card__body>strong { color:#fff; }
.ir-studio-template-card__body small { display:-webkit-box; min-height:3.35em; margin-top:.25rem; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#64748b; font-size:.74rem; line-height:1.75; }
.ir-studio-template-card__body>.ir-studio-template-card__action { display:flex; align-items:center; justify-content:flex-start; gap:.28rem; margin-top:.52rem; color:#dc2626; font-size:.74rem; line-height:1.6; font-weight:900; }
.ir-studio-template-card__action .ir-studio-inline-arrow { flex:0 0 auto; }
.ir-studio-filter-empty { margin-top:.75rem; }
.ir-studio-filter-empty[hidden] { display:none !important; }

.ir-studio-editor-topbar { display:flex; align-items:center; justify-content:space-between; gap:.65rem; margin-bottom:.8rem; }
.ir-studio-editor-topbar>a { color:#64748b; text-decoration:none; font-size:.82rem; font-weight:800; }
.ir-studio-editor-topbar>div { min-width:0; text-align:center; }
.ir-studio-editor-topbar>div span { display:block; color:#dc2626; font-size:.72rem; font-weight:900; }
.ir-studio-editor-topbar>div strong { display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#111827; font-size:.9rem; }
.dark .ir-studio-editor-topbar>div strong { color:#fff; }
.ir-studio-editor-layout { display:grid; gap:1rem; }
.ir-studio-controls,.ir-studio-preview-panel { border:1px solid #e5e7eb; border-radius:24px; background:#fff; padding:1rem; box-shadow:0 8px 30px rgba(15,23,42,.04); }
.dark .ir-studio-controls,.dark .ir-studio-preview-panel { background:#111827; border-color:#374151; }
.ir-studio-control-head h1 { margin:.25rem 0 .2rem; color:#111827; font-size:1.18rem; line-height:1.75; font-weight:950; }
.dark .ir-studio-control-head h1 { color:#fff; }
.ir-studio-control-head p { margin:0 0 1rem; color:#64748b; font-size:.82rem; line-height:1.85; }
.ir-studio-field { display:block; margin-top:.8rem; }
.ir-studio-field>span,.ir-studio-upload>span { display:block; margin-bottom:.38rem; color:#475569; font-size:.82rem; font-weight:900; }
.dark .ir-studio-field>span,.dark .ir-studio-upload>span { color:#cbd5e1; }
.ir-studio-field input[type="text"],.ir-studio-field textarea { width:100%; border:1px solid #dbe2ea; border-radius:14px; background:#f8fafc; padding:.78rem .85rem; color:#111827; font:inherit; font-size:.9rem; line-height:1.7; outline:none; transition:border-color .15s, box-shadow .15s; }
.ir-studio-field textarea { resize:vertical; min-height:88px; }
.ir-studio-field input:focus,.ir-studio-field textarea:focus { border-color:#f87171; box-shadow:0 0 0 3px rgba(248,113,113,.12); }
.dark .ir-studio-field input[type="text"],.dark .ir-studio-field textarea { background:#1f2937; border-color:#374151; color:#fff; }
.ir-studio-field-row { display:grid; grid-template-columns:1fr 96px; gap:.6rem; }
.ir-studio-color-field input { width:100%; height:46px; border:1px solid #dbe2ea; border-radius:14px; padding:3px; background:#fff; cursor:pointer; }
.ir-studio-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-top:.9rem; }
.ir-studio-upload-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ir-studio-upload { display:block; min-width:0; border:1px dashed #cbd5e1; border-radius:16px; padding:.8rem; background:#f8fafc; cursor:pointer; }
.dark .ir-studio-upload { background:#1f2937; border-color:#4b5563; }
.ir-studio-upload small { display:block; color:#94a3b8; font-size:.7rem; line-height:1.7; }
.ir-studio-upload input { width:100%; margin-top:.58rem; color:#64748b; font-size:.7rem; line-height:1.6; }
.ir-studio-btn { display:inline-flex; min-height:46px; align-items:center; justify-content:center; border:0; border-radius:14px; padding:.72rem .9rem; font-family:inherit; font-size:.86rem; font-weight:900; cursor:pointer; }
.ir-studio-btn--primary { width:100%; margin-top:1rem; background:#dc2626; color:#fff; box-shadow:0 8px 20px rgba(220,38,38,.2); }
.ir-studio-btn--primary:hover { background:#b91c1c; }
.ir-studio-btn--ghost { background:#f1f5f9; color:#475569; }
.dark .ir-studio-btn--ghost { background:#1f2937; color:#d1d5db; }
.ir-studio-privacy-note { margin:.7rem 0 0; color:#94a3b8; font-size:.7rem; line-height:1.8; }
.ir-studio-preview-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; gap:.75rem; }
.ir-studio-preview-head>div span { display:block; color:#111827; font-size:.86rem; font-weight:950; }
.dark .ir-studio-preview-head>div span { color:#fff; }
.ir-studio-preview-head small { color:#94a3b8; font-size:.7rem; line-height:1.6; }
.ir-studio-status { border-radius:999px; background:#ecfdf5; padding:.34rem .62rem; color:#047857; font-size:.7rem; line-height:1.5; font-weight:900; }
.ir-studio-canvas-wrap { position:relative; width:min(100%, 360px); margin:0 auto; overflow:hidden; border-radius:0; background:#e2e8f0; box-shadow:0 18px 42px rgba(15,23,42,.16); }
.ir-studio-canvas-wrap canvas { display:block; width:100%; height:auto; aspect-ratio:9/16; background:#111827; }
.ir-studio-empty { grid-column:1/-1; border:1px dashed #cbd5e1; border-radius:20px; padding:2rem; text-align:center; color:#64748b; font-size:.85rem; line-height:1.8; }

@media (max-width: 719px) {
  .ir-studio-section-head { align-items:flex-start; flex-direction:column; gap:.25rem; }
  .ir-studio-goal-tabs { margin-inline:-.15rem; padding-inline:.15rem; }
  .ir-studio-upload-grid,
  .ir-studio-upload-grid--three { grid-template-columns:1fr; }
}

@media (min-width: 720px) {
  .ir-studio-template-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
  .ir-studio-editor-layout { grid-template-columns:minmax(310px, .85fr) minmax(350px, 1.15fr); align-items:start; }
  .ir-studio-preview-panel { position:sticky; top:1rem; }
}

@media (min-width: 1024px) {
  .ir-studio-shell,.ir-studio-editor-page { padding:1.5rem 2rem 2rem; }
  .ir-studio-hero { padding:1.8rem 2rem; }
  .ir-studio-hero h1 { font-size:2rem; }
  .ir-studio-template-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
}