/* Harf-e-Ali Studio layout — loaded after styles.css and overrides the old two-column shell. */
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("./assets/NotoNastaliqUrdu.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "AlQalam Taj Nastaleeq"; src: url("./assets/AlQalamTajNastaleeq.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Jameel Noori Nastaleeq"; src: url("./assets/JameelNooriNastaleeq.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Harf Arabic"; src: url("./assets/HarfArabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* UI Urdu font — fixed, independent of the font chosen for the design. */
  --ui-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Amiri", serif;
  --ground: #12110f;
  --surface: #171613;
  --surface-2: #1e1c18;
  --surface-3: #27241e;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --text: #ede6d6;
  --muted: #a39a88;
  --faint: #7d7566;
  --gold: #c9a45c;
  --gold-soft: rgba(201,164,92,.16);
  --gold-ink: #1a1712;
  --select: #4f9dff;
  --danger: #d9776d;
  --radius: 12px;
  --topbar-h: 64px;
  --rail-w: 76px;
  --panel-w: 340px;
  --inspector-w: 280px;
}

html, body { height: 100%; }
body.studio-app { margin: 0; background: var(--ground); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Amiri", "Noto Nastaliq Urdu"; overflow: hidden; -webkit-font-smoothing: antialiased; }
body.studio-app button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.studio-app .topbar { position: relative; z-index: 40; height: var(--topbar-h); padding: 0 14px 0 16px; gap: 16px; background: #15140f; border-bottom: 1px solid var(--line); backdrop-filter: none; }
.studio-app .brand { flex: none; gap: 12px; }
.studio-app .brand-mark { width: 34px; height: 34px; border: 1.5px solid var(--gold); transform: rotate(45deg); display: grid; place-items: center; font: 17px/1 var(--ui-urdu); color: var(--gold); }
.studio-app .brand-mark i { transform: rotate(-45deg); font: 700 19px/1 "Amiri", serif; font-style: normal; display: grid; place-items: center; width: 100%; height: 100%; padding-bottom: 5px; }
.studio-app .brand b { font: 600 20px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; }
.studio-app .brand small { font-size: 9.5px; letter-spacing: .2em; color: var(--muted); margin-top: 4px; }

.studio-app .collection-mode { margin: 0 auto; width: auto; display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.studio-app .collection-mode button { padding: 2px 16px 3px; border-radius: 9px; border: 0; color: var(--muted); transform: none !important; }
.studio-app .collection-mode button.active { background: var(--surface-3); color: var(--gold); box-shadow: none; border: 0; }
.studio-app .collection-mode span { font: 14px/2 var(--ui-urdu); }
.studio-app .collection-mode small { display: none; }

.studio-app .top-actions { flex: none; gap: 8px; }
.top-button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer; }
.top-button:hover { background: var(--surface-2); }
.top-button svg { width: 17px; height: 17px; }
.top-button b { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--gold-soft); color: var(--gold); font-size: 10.5px; font-weight: 600; }
.studio-app .api-pill { height: 38px; padding: 0 12px; border-radius: 10px; font-size: 11.5px; color: var(--muted); border-color: var(--line-strong); }
.studio-app .api-pill span { background: #8a8170; box-shadow: none; }
.studio-app .api-pill.ready span { background: #6fb07c; box-shadow: 0 0 8px #6fb07c99; }
.studio-app .api-pill.offline span { background: #d9a25a; box-shadow: 0 0 8px #d9a25a88; }

.export-wrap { position: relative; display: flex; }
.export-button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px 0 0 10px; background: var(--gold); color: var(--gold-ink); font-weight: 650; font-size: 13px; cursor: pointer; }
.export-button svg { width: 17px; height: 17px; }
.export-button:hover { background: #d8b46c; }
.export-button:disabled { opacity: .7; cursor: progress; }
.export-more { width: 34px; height: 38px; display: grid; place-items: center; border: 0; border-left: 1px solid rgba(0,0,0,.2); border-radius: 0 10px 10px 0; background: var(--gold); color: var(--gold-ink); cursor: pointer; }
.export-more svg { width: 16px; height: 16px; }
.export-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,.55); display: grid; gap: 8px; z-index: 60; }
.export-menu[hidden] { display: none; }
.menu-title { margin: 0; font-size: 10.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.menu-field { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.menu-field select { padding: 9px 10px; font-size: 12.5px; border-radius: 9px; }
.export-menu .asset-status { margin: -2px 0 2px; font-size: 11px; color: var(--faint); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 12.5px; cursor: pointer; text-align: left; }
.menu-item:hover { border-color: var(--gold); }
.menu-item svg { width: 17px; height: 17px; flex: none; color: var(--gold); }

/* ---------- Shell ---------- */
.studio-shell { height: calc(100dvh - var(--topbar-h)); display: grid; grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr) var(--inspector-w); }
.tool-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: #15140f; border-right: 1px solid var(--line); overflow-y: auto; }
.tool-rail button { width: 62px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 10.5px; cursor: pointer; transition: background .15s, color .15s; }
.tool-rail button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.tool-rail button:hover { background: var(--surface-2); color: var(--text); }
.tool-rail button.active { background: var(--surface-3); color: var(--gold); }

.studio-app .tool-panel.controls { height: 100%; padding: 0; border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a352c transparent; }
.tool-section { padding: 18px 18px 40px; display: grid; gap: 14px; align-content: start; }
.tool-section[hidden] { display: none; }
.panel-head h2 { margin: 0; font: 600 24px/1.1 "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.panel-head .eyebrow { margin: 0 0 6px !important; font-size: 10px !important; }
.studio-app .field { margin: 0; }
.studio-app .field label, .studio-app .field legend { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); margin-bottom: 7px; }
.studio-app .label-row span { color: var(--faint); font-size: 10.5px; }
.studio-app textarea, .studio-app input:not([type="range"]):not([type="checkbox"]):not([type="color"]), .studio-app select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.studio-app #quote { min-height: 120px; font: 18px/2.1 var(--ui-urdu); padding: 10px 14px; }
.studio-app input:not([type="range"]):not([type="checkbox"]):not([type="color"]) { padding: 9px 12px; font: 14px/1.9 var(--ui-urdu); }
.studio-app select { padding: 9px 10px; font-size: 12.5px; }
.studio-app .helper { font-size: 11px; color: var(--faint); line-height: 1.55; }
.studio-app .helper b { color: var(--muted); font-weight: 600; }
.field .helper { margin-top: 6px; }

.library-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px; border-radius: 12px; border: 1px dashed rgba(201,164,92,.5); background: var(--gold-soft); color: var(--gold); font-size: 13px; font-weight: 600; cursor: pointer; }
.library-cta svg { width: 18px; height: 18px; }
.library-cta:hover { background: rgba(201,164,92,.24); }

.studio-app .editor-panel { margin: 0; border-radius: 12px; border-color: var(--line); background: var(--surface-2); overflow: hidden; }
.studio-app .editor-panel.inline-settings { margin: -6px 0 0; border-radius: 12px; }
.studio-app .editor-panel summary { display: flex; align-items: center; gap: 8px; padding: 11px 12px 11px 14px; list-style: none; font-size: 10.5px; letter-spacing: .13em; color: var(--muted); }
.studio-app .editor-panel summary::-webkit-details-marker { display: none; }
.studio-app .editor-panel summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.studio-app .editor-panel[open] > summary::before { transform: rotate(45deg); }
.studio-app .editor-panel[open] > summary { color: var(--gold); border-bottom-color: var(--line); }
.studio-app .editor-panel summary > span { width: auto; flex: 1; }
.studio-app .section-reset { float: none; margin: 0; padding: 5px 9px; border-radius: 7px; border-color: var(--line-strong); background: transparent; color: var(--faint); font: 600 9.5px/1 Inter, sans-serif; letter-spacing: .08em; }
.studio-app .section-reset:hover { color: var(--gold); border-color: var(--gold); }
.studio-app .editor-body { gap: 14px; padding: 14px; }
.studio-app .range-field span { font-size: 11.5px; color: var(--text); letter-spacing: 0; }
.studio-app .range-field b { color: var(--faint); font-weight: 500; }
.studio-app .mini-grid { gap: 12px 14px; }
.studio-app .mini-grid label { font-size: 11.5px; color: var(--text); }
.studio-app .editor-body > label:not(.range-field):not(.color-field):not(.switch-row), .studio-app .mini-grid > label:not(.range-field) { display: grid; gap: 6px; font-size: 11.5px; color: var(--text); }
.studio-app input[type="range"] { height: 4px; border-radius: 4px; background: #3a352c; }
.studio-app input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; background: var(--gold); border: 3px solid var(--surface-2); box-shadow: 0 0 0 1px var(--gold); }
.studio-app input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--gold); border: 3px solid var(--surface-2); border-radius: 50%; }
.studio-app .color-field, .studio-app .switch-row { font-size: 11.5px; color: var(--text); }
.studio-app .switch-row span { font-size: 11.5px; color: var(--text); }
.studio-app .color-field input { width: 40px; height: 30px; border-radius: 8px; }
.studio-app .asset-status { font-size: 11px; }
.studio-app .file-action, .studio-app .secondary-action { padding: 9px 12px; border-radius: 9px; font-size: 10.5px !important; }
details.advanced { border-top: 1px solid var(--line); padding-top: 10px; }
details.advanced > summary { cursor: pointer; font-size: 11.5px; color: var(--muted); list-style: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "+ "; color: var(--gold); }
details.advanced[open] > summary::before { content: "− "; }
details.advanced .effect-controls { margin-top: 10px; padding-top: 0; border-top: 0; }
.studio-app .font-library { padding: 12px; border-radius: 12px; background: var(--surface-2); }
.studio-app .upload-button { border-radius: 9px; font-size: 11.5px; }

/* ---------- Templates ---------- */
.template-group-label { margin-top: 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.template-card { display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 9px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.template-card:hover { border-color: rgba(201,164,92,.55); transform: translateY(-1px); }
.template-card.active { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.template-card b { margin: 5px 3px 0; font-size: 12.5px; font-weight: 600; }
.template-card small { margin: 0 3px; font-size: 10.5px; color: var(--faint); }
.tpl { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; }
.tpl i { position: absolute; font-style: normal; }
.tpl-maktoob { background: radial-gradient(circle at 50% 45%, #f3e9d2, #e5d4ae 85%); }
.tpl-maktoob .t-bism { top: 9%; left: 0; right: 0; text-align: center; font: 9px/1 "Amiri", serif; color: #6b4f2a; }
.tpl-maktoob .t-lines { left: 14%; right: 14%; top: 28%; height: 40%; background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(107,79,42,.35) 9px 10px); }
.tpl-maktoob .t-lines::before { content: ""; position: absolute; inset: 0 0 0 8%; background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(44,34,22,.55) 4px 6px, transparent 6px 10px); clip-path: inset(0 0 0 10%); }
.tpl-maktoob .t-seal { right: 12%; bottom: 8%; width: 26%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b34536, #7a231c); color: #f0cfa8; font: 700 12px/1 "Reem Kufi", sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.tpl-lifafa { background: #26332d; }
.tpl-lifafa .t-letter { left: 18%; right: 18%; top: 7%; height: 66%; background: #f7f1e3; display: grid; place-items: center; font: 13px/1 var(--ui-urdu); color: #2f5a4a; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.tpl-lifafa .t-pocket { left: 8%; right: 8%; bottom: 6%; height: 34%; background: #d4be92; clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%); }
.tpl-qalami { background: #f2e8d2; box-shadow: inset 0 0 0 6px #f2e8d2, inset 0 0 0 8px #9a7b3f, inset 0 0 0 11px #f2e8d2, inset 0 0 0 12px #9a7b3f; }
.tpl-qalami .t-cart { top: 14%; left: 50%; transform: translateX(-50%); padding: 1px 10px; border: 1px solid #9a7b3f; border-radius: 20px; background: #e8d9b6; font: 9px/1.6 "Amiri", serif; color: #5a4420; }
.tpl-qalami .t-text { top: 38%; left: 0; right: 0; text-align: center; font: 20px/1.4 var(--ui-urdu); color: #2c2216; }
.tpl-telegram { background: #e9e5da; }
.tpl-telegram .t-head { top: 10%; left: 9%; font: 9.5px/1 "Courier Prime", monospace; letter-spacing: 2px; color: #1f1d1a; }
.tpl-telegram .t-rows { left: 9%; right: 9%; top: 19%; height: 44%; border-top: 2px solid #1f1d1a; background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(31,29,26,.4) 8px 10px); }
.tpl-telegram .t-stamp { right: 10%; bottom: 9%; width: 28%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #2f4b8c; opacity: .75; transform: rotate(-14deg); box-shadow: inset 0 0 0 3px #e9e5da, inset 0 0 0 4px #2f4b8c; }
.tpl-eklafz { background: #0f0e0c; }
.tpl-eklafz i { right: 8%; top: 12%; font: 700 46px/1.1 "Reem Kufi", sans-serif; color: #c9a45c; }
.tpl-eklafz::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 18%; height: 18%; background: repeating-linear-gradient(to bottom, rgba(237,230,214,.75) 0 3px, transparent 3px 9px); }
.tpl-mehrab { background: linear-gradient(#3f5248 0 47%, #f4eee2 47%); }
.tpl-mehrab .t-arch { left: 34%; right: 34%; top: 12%; height: 35%; border: 2px solid #e8dcc2; border-bottom: 0; border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.tpl-mehrab .t-low { left: 16%; right: 16%; top: 60%; height: 22%; background: repeating-linear-gradient(to bottom, rgba(34,32,28,.6) 0 3px, transparent 3px 9px); }
.tpl-shamsa { background: #0e2a2a; background-image: linear-gradient(45deg, rgba(201,164,92,.18) 25%, transparent 25% 75%, rgba(201,164,92,.18) 75%), linear-gradient(-45deg, rgba(201,164,92,.18) 25%, transparent 25% 75%, rgba(201,164,92,.18) 75%); background-size: 14px 14px; }
.tpl-shamsa .t-medal { left: 18%; right: 18%; top: 17%; aspect-ratio: 1; border-radius: 50%; background: #f3e9d2; box-shadow: 0 0 0 3px #0e2a2a, 0 0 0 4.5px #c9a45c; }
.tpl-shamsa::after { content: ""; position: absolute; left: 33%; right: 33%; bottom: 14%; height: 8%; background: #c9a45c; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%); }
.tpl-diary { background: #fbfaf4 repeating-linear-gradient(to bottom, transparent 0 10px, #c8d6e6 10px 11px); background-position: 0 22px; }
.tpl-diary::before { content: ""; position: absolute; right: 12%; top: 0; bottom: 0; width: 1.5px; background: #e39a9a; }
.tpl-diary .t-head { top: 6%; right: 16%; font: 700 10px/1.5 "Aref Ruqaa", serif; color: #2f4b8c; }
.tpl-classic { background: radial-gradient(circle at 70% 20%, #8a6b3e, #2a271f 55%, #121110); }
.tpl-classic::before { content: ""; position: absolute; inset: 22% 12%; border-radius: 8px; background: rgba(15,15,13,.45); backdrop-filter: blur(2px); }
.tpl-classic i { left: 0; right: 0; top: 40%; text-align: center; font: 18px/1.4 var(--ui-urdu); color: #f5eee0; }
.keyword-field { padding: 0; }
.template-help { margin: 0; }

/* ---------- Background panel ---------- */
.bg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.big-action, .studio-app #imageLibraryOpen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12.5px; cursor: pointer; }
.big-action svg { width: 22px; height: 22px; color: var(--gold); }
.big-action:hover, .studio-app #imageLibraryOpen:hover { border-color: var(--gold); }
.paper-note { padding: 10px 12px; border-radius: 10px; background: rgba(201,164,92,.08); border: 1px solid rgba(201,164,92,.25); }
.studio-app .background-version-controls { margin: 0; }
.studio-app .background-version-controls button { border-radius: 8px; padding: 8px 10px; font-size: 10px; }
.studio-app .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.studio-app .style { flex-direction: column; gap: 5px; padding: 5px 5px 7px; border-radius: 10px; background: var(--surface-2); }
.studio-app .style .swatch { width: 100%; height: 34px; border-radius: 7px; }
.studio-app .style span { font-size: 10px; color: var(--muted); }

/* ---------- Elements panel ---------- */
.add-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-text { display: grid; gap: 2px; justify-items: center; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); cursor: pointer; }
.add-text:hover { border-color: var(--gold); }
.add-text b { font-weight: 400; line-height: 1.6; }
.add-text.heading b { font: 700 22px/1.4 "Aref Ruqaa", serif; }
.add-text.sub b { font: 15px/2 var(--ui-urdu); }
.add-text.arabic b { font: 17px/1.6 "Amiri", serif; }
.add-text.english b { font: 600 22px/1.4 "Cormorant Garamond", serif; }
.add-text small { font-size: 10.5px; color: var(--faint); }

/* ---------- Stage ---------- */
.studio-app .stage { position: relative; top: auto; height: 100%; padding: 0; display: flex; flex-direction: column; overflow: hidden; background: #0d0c0a; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; }
.studio-app .stage-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; letter-spacing: 0; font-size: 12px; color: var(--muted); }
.format-switch { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.format-switch button { padding: 6px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.format-switch button small { color: var(--faint); font-size: 10.5px; margin-left: 2px; }
.format-switch button.active { background: var(--surface-3); color: var(--text); }
.format-switch button.active small { color: var(--gold); }
.studio-app .toolbar-actions { display: flex; align-items: center; gap: 4px; }
.studio-app .stage-toolbar button { border: 1px solid transparent; }
.toolbar-actions > button, .zoom-control button { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 6px; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
.toolbar-actions > button svg { width: 18px; height: 18px; }
.toolbar-actions > button:hover:not(:disabled), .zoom-control button:hover { background: var(--surface); color: var(--text); }
.toolbar-actions > button:disabled { opacity: .3; cursor: default; }
.toolbar-sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.zoom-control { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.zoom-control #zoomFit { min-width: 52px; font-size: 11.5px; font-variant-numeric: tabular-nums; }

.canvas-viewport { position: relative; flex: 1; min-height: 0; overflow: auto; display: grid; scrollbar-width: thin; scrollbar-color: #3a352c transparent; }
.studio-app .poster-wrap { min-height: 0; padding: 28px; display: grid; place-items: center; margin: auto; }
.studio-app .poster, .studio-app .poster.ratio-4-5, .studio-app .poster.ratio-1-1, .studio-app .poster.ratio-9-16 { flex: none; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); }
.studio-app .stage-footer { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 6px 14px 10px; letter-spacing: 0; }
.studio-app .stage-footer p { max-width: none; font-size: 11.5px; color: var(--faint); text-align: center; }
.studio-app .card-nav { gap: 12px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.studio-app .card-nav button { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); }
.studio-app .card-nav span { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.studio-app .card-nav:not([hidden]) + p { display: none; }

/* floating context toolbar */
.ctx-toolbar { position: absolute; left: 0; top: 0; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: #201e1a; border: 1px solid var(--line-strong); box-shadow: 0 14px 40px rgba(0,0,0,.55); will-change: transform; }
.ctx-toolbar[hidden] { display: none; }
.ctx-toolbar [hidden] { display: none !important; }
.ctx-label { padding: 0 10px 0 8px; margin-right: 2px; border-right: 1px solid var(--line-strong); font-size: 11.5px; color: var(--gold); white-space: nowrap; }
.ctx-toolbar button { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.ctx-toolbar button:hover { background: var(--surface-3); }
.ctx-toolbar button.active { background: var(--gold-soft); color: var(--gold); }
.ctx-toolbar button.danger:hover { color: var(--danger); }
.ctx-toolbar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ctx-toolbar button b { font: 600 13px/1 Inter, sans-serif; }
.ctx-toolbar button small { font-size: 11px; color: var(--muted); }
.ctx-toolbar [data-ctx="bigger"] b { font-size: 16px; }
.ctx-color { position: relative; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.ctx-color input { width: 22px; height: 22px; padding: 0; border: 2px solid #fff3; border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ctx-color input::-webkit-color-swatch-wrapper { padding: 0; }
.ctx-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ctx-color input::-moz-color-swatch { border: 0; border-radius: 50%; }
[data-ctx="align"] path { display: none; }
[data-ctx="align"][data-state="left"] .al-left, [data-ctx="align"][data-state="center"] .al-center, [data-ctx="align"][data-state="right"] .al-right { display: inline; }

/* ---------- Inspector ---------- */
.inspector { height: 100%; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface); padding: 18px 16px 30px; }
.insp-empty h3, .insp-body h3 { margin: 0 0 8px; font: 600 19px/1.2 "Cormorant Garamond", Georgia, serif; }
.insp-empty p { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.shortcut-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 12px; color: var(--muted); line-height: 1.9; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface-2); color: var(--text); font: 11px/1.6 Inter, sans-serif; text-align: center; }
.insp-quick { display: grid; gap: 8px; }
.insp-quick button, .insp-actions button, .seg button { padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
.insp-quick button:hover, .insp-actions button:hover, .seg button:hover { border-color: var(--gold); }
.insp-body { display: grid; gap: 14px; }
.insp-body[hidden], .insp-empty[hidden] { display: none; }
.insp-row { display: grid; gap: 7px; }
.insp-row[hidden] { display: none; }
.insp-row.inline { grid-template-columns: 1fr auto; align-items: center; }
.insp-row label, .insp-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.insp-row textarea { min-height: 80px; resize: vertical; padding: 8px 10px; font: 15px/1.9 var(--ui-urdu); }
.insp-row input[type="color"] { width: 44px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.seg button { padding: 8px 4px; font-size: 11.5px; }
.seg button.active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.seg.six button { font-size: 15px; }
.insp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.insp-actions .danger:hover, .insp-actions .danger { color: var(--danger); }

/* ---------- Layers & stickers ---------- */
.studio-app .layers-list { display: grid; gap: 4px; }
.studio-app .layer-row { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 6px 4px 8px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); cursor: pointer; font-size: 12.5px; }
.studio-app .layer-row:hover { border-color: var(--line-strong); }
.studio-app .layer-row.selected { border-color: var(--select); background: rgba(79,157,255,.1); }
.studio-app .layer-row.is-hidden .layer-name { opacity: .45; }
.layer-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-3); color: var(--gold); font: 13px/1 var(--ui-urdu); flex: none; }
.studio-app .layer-name { flex: 1; min-width: 0; font-family: Inter, var(--ui-urdu), "Amiri", sans-serif !important; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.layer-lock { font-size: 11px; opacity: .7; }
.studio-app .layer-vis { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: 1; }
.studio-app .layer-vis svg { width: 17px; height: 17px; }
.studio-app .layer-vis:hover { background: var(--surface-3); color: var(--text); }
.layers-empty { color: var(--faint); font-size: 12px; }
.studio-app .stickers-grid, .stickers-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 18px; width: 100%; flex-direction: initial; }
.studio-app .stickers-grid .sticker-btn { width: auto !important; min-width: 0; height: 74px; margin: 0; justify-content: center; }
.studio-app .sticker-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 9px 4px 7px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 9.5px; color: var(--muted); }
.studio-app .sticker-btn svg { color: var(--gold); }
.studio-app .sticker-btn:hover { border-color: var(--gold); color: var(--text); }
.studio-app .sticker-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Canvas overlay ---------- */
.canva-overlay { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.canva-selection { fill: none; stroke: var(--select); stroke-width: 1.6; }
.canva-selection.locked { stroke: var(--gold); stroke-dasharray: 5 4; }
.canva-hover { fill: none; stroke: rgba(79,157,255,.75); stroke-width: 1.2; stroke-dasharray: 4 3; }
.canva-handle { fill: #fff; stroke: var(--select); stroke-width: 1.5; pointer-events: all; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.canva-handle:hover { fill: var(--select); }
.canva-rotate-line { stroke: var(--select); stroke-width: 1.2; }
.canva-rotate-handle { fill: #fff; stroke: var(--select); stroke-width: 1.5; pointer-events: all; cursor: grab; }
.canva-rotate-icon { fill: none; stroke: var(--select); stroke-width: 1.4; pointer-events: none; }
.canva-guide { stroke: #ff4fa3; stroke-width: 1.2; stroke-dasharray: 5 4; }
.canva-badge { fill: #fff; font: 600 11px Inter, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 3px; }
.poster.is-transforming { cursor: grabbing !important; }
.studio-app .inline-edit { position: fixed; z-index: 70; display: none; min-height: 56px; padding: 8px 10px; border: 2px solid var(--select); border-radius: 10px; background: #1b1a17; color: #f5eee0; font: 17px/1.9 var(--ui-urdu); outline: none; resize: none; box-shadow: 0 18px 50px rgba(0,0,0,.6); }

/* ---------- Drawers ---------- */
.studio-app .history-drawer { background: var(--surface); }
.studio-app .library-tools { grid-template-columns: minmax(0, 1fr) 140px auto; }
.random-quote { padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap; }
.random-quote:hover { border-color: var(--gold); }
.studio-app .toast { z-index: 90; border-radius: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --panel-w: 310px; --inspector-w: 250px; }
}
@media (max-width: 1100px) {
  .studio-shell { grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr); }
  .inspector { display: none; }
  .studio-app .collection-mode button { padding: 2px 10px 3px; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; --rail-h: 62px; }
  body.studio-app { overflow: hidden; }
  .studio-app .topbar { gap: 8px; padding: 0 10px; }
  .studio-app .brand > span:last-child { display: none; }
  .studio-app .topbar > .collection-mode { display: none; }
  .studio-app .top-actions { margin-left: auto; gap: 6px; }
  .top-button { padding: 0 10px; height: 40px; }
  .top-button span, .top-button b { display: none; }
  .studio-app .api-pill { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .studio-app .api-pill b { display: none; }
  .export-button { padding: 0 12px; height: 40px; }
  .export-more { height: 40px; }
  .studio-shell { height: calc(100dvh - var(--topbar-h)); display: flex; flex-direction: column; }
  .studio-app .stage { order: 1; flex: 1; min-height: 0; transition: flex-basis .25s ease; }
  .studio-app .stage-toolbar { padding: 6px 8px; }
  .format-switch button { padding: 6px 8px; }
  .format-switch button small { display: none; }
  .zoom-control, .toolbar-sep { display: none; }
  .studio-app .poster-wrap { padding: 12px; }
  .studio-app .stage-footer { min-height: 44px; padding: 4px 10px 6px; }
  .studio-app .stage-footer p { display: none; }
  .studio-app .tool-panel.controls { order: 2; flex: 0 0 0; height: auto; border: 0; border-top: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; overflow-y: auto; transition: flex-basis .25s ease; box-shadow: 0 -18px 40px rgba(0,0,0,.45); }
  body.sheet-open .studio-app .tool-panel.controls, body.sheet-open .tool-panel.controls { flex-basis: 52dvh; }
  body.sheet-open .studio-app .stage, body.sheet-open .stage { flex: 1 1 0; }
  .tool-section { padding: 14px 14px 26px; }
  .sheet-grip { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; height: 26px; margin-bottom: -6px; background: var(--surface); }
  .sheet-grip button { width: 64px; height: 22px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .sheet-grip button::before { content: ""; width: 40px; height: 4px; border-radius: 3px; background: #4a443a; }
  .tool-rail { order: 3; flex: none; flex-direction: row; justify-content: flex-start; height: var(--rail-h); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .tool-rail::-webkit-scrollbar { display: none; }
  .tool-rail button { flex: 0 0 auto; width: 70px; min-height: 52px; font-size: 10px; }
  .tool-rail button.active { background: transparent; }
  body:not(.sheet-open) .tool-rail button.active { color: var(--muted); }
  .ctx-label { display: none; }
  .studio-app .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-app .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .studio-app .library-tools { grid-template-columns: 1fr 1fr; }
  .studio-app .library-tools input { grid-column: 1 / -1; }
  .studio-app .export-menu { position: fixed; right: 10px; left: 10px; top: calc(var(--topbar-h) + 6px); width: auto; }
}
@media (min-width: 901px) {
  .sheet-grip, .mobile-only { display: none !important; }
}
@media (max-width: 340px) {
  .studio-app .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* card overflow warning (stage footer) */
.studio-app .stage-footer .overflow-warning { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(232, 176, 75, .45); background: rgba(232, 176, 75, .12); color: #f0c674; font-size: 11.5px; }
.studio-app .stage-footer .overflow-warning::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #f0c674; color: #1a1712; font-weight: 700; font-size: 11px; }
.studio-app .stage-footer .overflow-warning[hidden] { display: none; }
@media (max-width: 900px) { .studio-app .stage-footer .overflow-warning { display: inline-flex; font-size: 10.5px; } .studio-app .stage-footer .overflow-warning[hidden] { display: none; } }

/* divider style picker */
.divider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.divider-option { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; cursor: pointer; min-width: 0; }
.divider-option canvas { width: 100%; max-width: 120px; height: 30px; }
.divider-option:hover { border-color: var(--gold); color: var(--text); }
.divider-option.active { border-color: var(--gold); background: rgba(200, 169, 106, .12); color: var(--text); box-shadow: inset 0 0 0 1px var(--gold); }
.divider-controls { display: grid; gap: 10px; margin-bottom: 18px; }

/* template options (keyword / heading) */
.template-options { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 12px; margin: 14px 0 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(200, 169, 106, .45); background: linear-gradient(rgba(200, 169, 106, .09), rgba(200, 169, 106, .09)), var(--surface); box-shadow: 0 -14px 28px rgba(0, 0, 0, .45); }
.template-options[hidden], .template-options .field[hidden] { display: none; }
.template-options .field { display: grid; gap: 6px; margin: 0; }
.template-options input:disabled { opacity: .45; }
.template-options .heading-off { margin-top: 2px; }

.studio-app .font-pick { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.studio-app .font-pick select { min-width: 0; }

/* thumbnails for the new templates */
.tpl-vintage { background: radial-gradient(circle at 50% 50%, #ecdcb6 55%, #b98f55 130%); }
.tpl-vintage .t-head { top: 8%; right: 12%; font: 700 11px/1.4 "Aref Ruqaa", serif; color: #2a1b10; }
.tpl-vintage .t-lines { left: 22%; right: 12%; top: 34%; height: 34%; background: repeating-linear-gradient(to bottom, rgba(42,27,16,.75) 0 2px, transparent 2px 9px); }
.tpl-vintage .t-blot { left: 3%; top: 54%; width: 15px; height: 13px; border-radius: 48% 52% 40% 60%; background: #1c130b; }
.tpl-vintage .t-drops { left: 4%; top: 20%; width: 4px; height: 4px; border-radius: 50%; background: #1c130b; box-shadow: 6px 14px 0 -1px #1c130b, 2px 40px 0 0 #1c130b, 10px 70px 0 -1px #1c130b, 5px 96px 0 1px #1c130b; }
.tpl-scroll { background: radial-gradient(circle, #3a2c1e, #110c08); }
.tpl-scroll .t-sheet { left: 16%; right: 16%; top: 12%; bottom: 12%; background: linear-gradient(90deg, #d9c194, #efdfba 15% 85%, #d6bd8e); }
.tpl-scroll .t-roll { left: 10%; right: 10%; height: 10px; border-radius: 6px; background: linear-gradient(#b99a68, #f0dfbb 40%, #8b6c3f); }
.tpl-scroll .t-top { top: 9%; } .tpl-scroll .t-bottom { bottom: 9%; }
.tpl-scroll .t-text { left: 0; right: 0; top: 40%; text-align: center; font: 700 17px/1.4 "Aref Ruqaa", serif; color: #2b1d10; }
.tpl-airmail { background: repeating-linear-gradient(-45deg, #c0392b 0 8px, #f6efdf 8px 16px, #1f4e8c 16px 24px, #f6efdf 24px 32px); }
.tpl-airmail .t-inner { inset: 7px; background: #f6efdf; }
.tpl-airmail .t-stamp { left: 13%; top: 10%; width: 20px; height: 24px; background: #2f5a4a; outline: 3px dotted #fffaf0; outline-offset: -1px; }
.tpl-airmail .t-mark { left: 34%; top: 12%; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(40,48,70,.6); }
.tpl-airmail .t-label { right: 12%; top: 11%; padding: 2px 4px; border-radius: 3px; background: #1f4e8c; color: #f6efdf; font: 600 6px/1.3 "Courier Prime", monospace; letter-spacing: .08em; }
.tpl-airmail .t-lines { left: 18%; right: 18%; top: 44%; height: 30%; background: repeating-linear-gradient(to bottom, rgba(31,43,69,.7) 0 2px, transparent 2px 9px); }
.tpl-siyahi { background: #f2eee5; }
.tpl-siyahi .t-brush { left: 6%; right: 6%; top: 36%; height: 26%; display: grid; place-items: center; border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; background: #141414; color: #f7f2e8; font: 700 18px/1 "Amiri", serif; }
.tpl-siyahi .t-seal { right: 16%; bottom: 14%; width: 14px; height: 14px; border-radius: 2px; background: #b3261e; transform: rotate(-4deg); }
.tpl-shab { background: linear-gradient(#070d24, #172449 60%, #33285a); }
.tpl-shab .t-moon { right: 14%; top: 8%; width: 18px; height: 18px; border-radius: 50%; box-shadow: -5px 3px 0 0 #f6e3ac; transform: rotate(-20deg); }
.tpl-shab .t-lamp { left: 14%; top: 0; width: 9px; height: 30%; background: linear-gradient(rgba(226,194,122,.7), rgba(226,194,122,.7)) center top / 1px 70% no-repeat, linear-gradient(#ffd37a, #c46a1c) center bottom / 9px 12px no-repeat; }
.tpl-shab .t-text { left: 0; right: 0; top: 42%; text-align: center; font: 700 18px/1.4 "Aref Ruqaa", serif; color: #f6ecd2; text-shadow: 0 0 8px rgba(243,212,138,.6); }
.tpl-shab .t-sky { left: 0; right: 0; bottom: 0; height: 18%; background: #060917; clip-path: polygon(0 60%, 18% 60%, 20% 0, 22% 60%, 38% 60%, 50% 5%, 62% 60%, 78% 60%, 80% 0, 82% 60%, 100% 60%, 100% 100%, 0 100%); }

/* Performance: once the canvas preview is ready, the old HTML preview layers underneath it are not
   painted (no hidden backdrop blur, no hidden Nastaliq text re-layout on every keystroke). */
.poster:has(.poster-render.ready) :is(.poster-bg, .poster-noise, .poster-shade, .quote-safe, .divider, .ornament, .swipe-hint) { display: none !important; }
.poster:has(.poster-render.ready) :is(blockquote, .speaker-label, cite) { visibility: hidden; font-family: system-ui, sans-serif !important; }
.poster:has(.poster-render.ready) .brand-watermark { visibility: hidden; }
.poster .poster-render { contain: strict; }
.studio-app .poster.live-drag .poster-render.ready { opacity: 1; }

/* Urdu labels in the library always use the UI Urdu font (never the design font). */
.studio-app :is(.library-topic, .sahifa-category, #libraryCredit, .library-section-tabs button) { font-family: Inter, var(--ui-urdu); line-height: 1.9; }

/* ---------- export menu: status video ---------- */
.menu-divider { height: 1px; margin: 4px 0; background: var(--line); }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- progress / result dialog ---------- */
.task-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(6, 6, 5, .72); }
.task-overlay[hidden] { display: none; }
.task-card { width: min(420px, 100%); padding: 22px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); display: grid; gap: 12px; }
.task-card h3 { margin: 0; font: 600 18px/1.3 "Cormorant Garamond", Georgia, serif; color: var(--text); }
.task-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.task-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.task-bar[hidden] { display: none; }
.task-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a8843e, var(--gold)); transition: width .2s ease; }
.task-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.task-actions button { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12.5px; cursor: pointer; }
.task-actions button.primary { border-color: var(--gold); background: var(--gold); color: #1a1610; font-weight: 600; }
.task-actions button:disabled { opacity: .6; cursor: default; }

/* ---------- library: Arabic + Urdu, batch selection ---------- */
.studio-app .library-tools #hikmatTextMode { min-width: 0; font-size: 12px; }
.studio-app .library-tools { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: stretch; }
@media (max-width: 900px) { .studio-app .library-tools { grid-template-columns: minmax(0, 1fr) auto; } }
.studio-app .library-tools #librarySearch { grid-column: 1 / -1; }
.studio-app .library-tools #libraryCount { grid-column: 1 / -1; }
.batch-toggle.active { border-color: var(--gold); color: var(--gold); }
.batch-check { display: none; }
.library-drawer.batch-mode .batch-check { display: inline-flex; align-items: center; margin-inline-end: 8px; float: left; cursor: pointer; }
.batch-check input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.batch-check span { display: none; }
.library-drawer.batch-mode .library-item { cursor: default; }
.library-item.batch-selected { border-color: var(--gold) !important; box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .4); }
.batch-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-strong); background: var(--surface); }
.batch-bar[hidden] { display: none; }
.batch-bar span { flex: 1 1 100%; font-size: 12px; color: var(--muted); }
.batch-bar button { flex: 1 1 auto; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
.batch-bar button.primary { border-color: var(--gold); color: var(--gold); }
.batch-bar button:disabled { opacity: .45; cursor: default; }

/* ---------- brand kits ---------- */
.kit-save { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.kit-save button { padding: 0 14px; border-radius: 10px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-size: 12.5px; cursor: pointer; }
.kit-list { display: grid; gap: 6px; margin-top: 10px; }
.kit-empty { margin: 0; font-size: 12px; color: var(--faint); }
.kit-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.kit-star { border: 0; background: none; color: var(--faint); font-size: 15px; cursor: pointer; padding: 2px; }
.kit-star.active { color: var(--gold); }
.kit-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: var(--surface-3); display: grid; place-items: center; color: var(--gold); font: 14px/1 "Amiri", serif; }
.kit-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-apply { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 11.5px; cursor: pointer; }
.kit-apply:hover { border-color: var(--gold); }
.kit-remove { border: 0; background: none; color: var(--faint); font-size: 16px; cursor: pointer; padding: 0 4px; }
.kit-remove:hover { color: #e07a6a; }

/* ---------- occasion themes ---------- */
.occasion-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.occasion-card { display: grid; gap: 2px; justify-items: center; padding: 10px 4px 8px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; color: #f4ecd8; }
.occasion-card b { font: 700 15px/1.6 "Aref Ruqaa", var(--ui-urdu); }
.occasion-card small { font-size: 9.5px; letter-spacing: .04em; opacity: .8; }
.occasion-card:hover { border-color: var(--gold); }
.occasion-mourning { background: linear-gradient(160deg, #2a0f10, #120707); }
.occasion-wiladat { background: linear-gradient(160deg, #1e3a33, #0f1f1b); }
.occasion-ramzan { background: linear-gradient(160deg, #172449, #0b1430); }
.occasion-eid { background: linear-gradient(160deg, #3f5248, #22302a); }
.occasion-ghadeer { background: linear-gradient(160deg, #2f7a5a, #173d2d); }
@media (max-width: 380px) { .occasion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- today bar ---------- */
.today-bar { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 6px 8px 6px 14px; border-radius: 12px; border: 1px solid rgba(201, 164, 92, .3); background: rgba(201, 164, 92, .07); font-size: 12px; color: var(--muted); }
.today-bar[hidden] { display: none; }
.today-date { font: 14px/1.9 var(--ui-urdu); color: var(--text); white-space: nowrap; }
.today-occasion { font: 14px/1.9 var(--ui-urdu); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.today-bar button { flex: none; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
.today-saying { margin-inline-start: auto; font: 13px/1.6 var(--ui-urdu) !important; border-color: var(--gold) !important; color: var(--gold) !important; }
.today-theme { color: var(--gold) !important; }
.today-close { border: 0 !important; background: none !important; color: var(--faint) !important; font-size: 16px !important; padding: 2px 6px !important; }
@media (max-width: 900px) {
  .today-bar { margin: 4px 10px 0; padding: 4px 6px 4px 10px; gap: 6px; }
  .today-date { font-size: 12px; }
  .today-occasion { font-size: 12px; }
}
/* Brand kits replace the single old preset (an existing preset is migrated into a kit). */
.studio-app #panel-brand .preset-actions, .studio-app #panel-brand #presetStatus { display: none; }
.studio-app #kitName { font: 13px/1.4 Inter, var(--ui-urdu); }

/* ---------- stock videos ---------- */
.image-library-tools { grid-template-columns: minmax(0, 1fr) 110px 150px auto !important; }
@media (max-width: 800px) {
  .image-library-tools { grid-template-columns: 1fr 1fr !important; }
  .image-library-tools input { grid-column: 1 / -1; }
  .image-library-tools button { grid-column: 1 / -1; }
}
.stock-video-badge { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(9, 10, 8, .8); color: #f0dfb8; font: 600 10px/1.2 Inter, sans-serif; font-style: normal; }
.video-chip { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 6px 8px 6px 12px; border-radius: 12px; border: 1px solid rgba(120, 170, 220, .35); background: rgba(80, 130, 190, .1); font-size: 12px; color: var(--text); }
.video-chip[hidden] { display: none; }
.video-chip span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-chip button { flex: none; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
@media (max-width: 900px) { .video-chip { margin: 4px 10px 0; } }

.export-menu #statusAudioNote { white-space: normal; line-height: 1.5; }
.menu-check .check-line { display: flex; align-items: center; gap: 8px; min-height: 38px; color: var(--text); font-size: 12px; }
.menu-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.export-menu { max-height: calc(100dvh - 80px); overflow-y: auto; }

/* ---------- Video tab ---------- */
.video-source { display: grid; gap: 10px; margin-bottom: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.video-empty { font-size: 12px; line-height: 1.6; color: var(--faint); }
.video-empty[hidden], .video-meta[hidden], #videoPreview[hidden], #videoRemove[hidden] { display: none !important; }
#videoPreview { width: 100%; max-height: 260px; border-radius: 10px; background: #000; object-fit: contain; }
.video-meta { margin: 0; font-size: 12px; color: var(--muted); }
.video-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.video-actions > * { flex: 1 1 auto; text-align: center; }
.video-grid { margin-bottom: 10px; }
.video-grid .menu-field select { width: 100%; }
.video-check .check-line { display: flex; align-items: center; gap: 8px; min-height: 38px; color: var(--text); font-size: 12px; }
.video-check input { width: 16px; height: 16px; accent-color: var(--gold); }
.video-export { width: 100%; margin-top: 14px; padding: 13px; border-radius: 12px; border: 1px solid var(--gold); background: var(--gold); color: #1a1610; font-weight: 600; font-size: 13px; cursor: pointer; }
.video-export:hover { filter: brightness(1.06); }
#panel-video #statusAudioNote { white-space: normal; line-height: 1.5; margin: 0; }

/* Anything marked hidden stays hidden, even buttons that other rules display as flex. */
.studio-app [hidden] { display: none !important; }

/* font picker in the floating toolbar */
.ctx-toolbar .ctx-font select { width: 128px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 12px/1 Inter, var(--ui-urdu); }
@media (max-width: 900px) { .ctx-toolbar .ctx-font select { width: 104px; } }

/* ---------- mobile: give the preview as much room as possible ---------- */
@media (max-width: 900px) {
  .studio-app .poster-wrap { padding: 4px; }
  .today-bar { margin: 4px 10px 0; padding: 2px 4px 2px 10px; min-height: 32px; border-radius: 10px; }
  .today-bar .today-date, .today-bar .today-occasion { font-size: 11px; line-height: 1.6; }
  .today-bar button { padding: 2px 8px; font-size: 11px; }
  .today-saying { font-size: 12px !important; line-height: 1.5 !important; }
  .video-chip { margin: 4px 10px 0; padding: 2px 4px 2px 10px; min-height: 32px; gap: 6px; border-radius: 10px; font-size: 11px; }
  .video-chip button { padding: 3px 8px; font-size: 11px; }
  .studio-app .stage-toolbar { padding: 4px 8px; }
  .today-bar button, .video-chip button { min-height: 28px; height: auto; }
  .studio-app .stage-footer { min-height: 0; padding: 0 10px 4px; }
  .studio-app .stage-footer:not(:has(> .card-nav:not([hidden]), > .overflow-warning:not([hidden]))) { display: none; }
}
/* FIX_1104: the Hijri date was hidden on every phone shorter than 760 px (nearly all of them). It stays now;
   on short or narrow screens the occasion name gives way instead (its theme button is still there). */
@media (max-width: 900px) and (max-height: 760px) {
  .today-bar .today-occasion { display: none; }
}
@media (max-width: 900px) {
  .today-bar .today-date { display: inline-block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* FIX_1104: phone top bar — everything fits from 320 px up (the Download menu arrow was cut off at 360–390 px). */
@media (max-width: 900px) {
  .studio-app .topbar { gap: 6px; padding: 0 8px 0 12px; }
  .studio-app .top-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 4px; }
  .studio-app .top-button { min-width: 38px; padding: 0 8px; }
  .studio-app .api-pill { width: 30px; flex: none; border-color: transparent; background: none; }
  .studio-app .export-button { padding: 0 10px; gap: 6px; }
  .studio-app .export-more { width: 30px; }
}
@media (max-width: 380px) {
  .studio-app .top-button { min-width: 34px; padding: 0 6px; }
  .studio-app .export-button span { display: none; }
  .studio-app .export-button { padding: 0 11px; }
  .studio-app .brand-mark { width: 30px; height: 30px; }
}
@media (max-width: 340px) {
  .studio-app .api-pill { display: none; }
}

/* ---------- Edit template mode ---------- */
.toolbar-actions > button.tpl-edit-toggle, .tpl-edit-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(201, 164, 92, .45); background: rgba(201, 164, 92, .08); color: var(--gold, #c9a45c); font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.toolbar-actions > button.tpl-edit-toggle svg, .tpl-edit-toggle svg { width: 16px; height: 16px; }
.toolbar-actions > button.tpl-edit-toggle:hover { background: rgba(201, 164, 92, .16); color: var(--gold, #c9a45c); }
.toolbar-actions > button.tpl-edit-toggle.active, .tpl-edit-toggle.active { background: var(--gold, #c9a45c); color: #16130d; border-color: var(--gold, #c9a45c); }
.tpl-edit-toggle[hidden], .tpl-edit-panel-btn[hidden] { display: none !important; }
.studio-app .tpl-edit-panel-btn { width: 100%; margin-top: 10px !important; }
.tpl-edit-panel-btn.active { background: rgba(201, 164, 92, .18); }
.tpl-edit-layer { position: absolute; inset: 0; z-index: 40; display: none; touch-action: none; cursor: default; }
body.tpl-editing .tpl-edit-layer { display: block; }
body.tpl-editing .canva-overlay, body.tpl-editing #ctxToolbar { display: none !important; }
body.tpl-editing .poster { outline: 2px dashed rgba(201, 164, 92, .55); outline-offset: 3px; }
.tpl-part { position: absolute; border: 1px dashed rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); border-radius: 3px; cursor: move; }
.tpl-part:hover { border-color: #e7c983; }
.tpl-part.is-hidden { border-color: rgba(255, 120, 120, .7); background: repeating-linear-gradient(45deg, rgba(255, 80, 80, .08) 0 6px, transparent 6px 12px); }
.tpl-part.active { border: 2px solid #e7c983; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 18px rgba(231, 201, 131, .25); z-index: 2; }
.tpl-part-name { position: absolute; left: -2px; bottom: calc(100% + 4px); padding: 3px 7px; border-radius: 6px; background: #e7c983; color: #16130d; font: 600 11px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.tpl-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #c9a45c; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.tpl-handle.rotate { right: auto; left: 50%; bottom: auto; top: -30px; margin-left: -8px; cursor: grab; }
.tpl-handle.rotate::after { content: ""; position: absolute; left: 6px; top: 14px; width: 1px; height: 14px; background: #e7c983; }
.tpl-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 14px; border-radius: 10px; background: rgba(10, 10, 8, .8); color: #f0dfb8; font: 13px/1.4 Inter, system-ui, sans-serif; text-align: center; }
.tpl-bar { position: relative; z-index: 60; flex: none; box-sizing: border-box; width: min(760px, calc(100% - 16px)); margin: 6px auto; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(201, 164, 92, .4); background: rgba(22, 20, 16, .96); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); color: var(--text, #eee); font: 12px/1.3 Inter, system-ui, sans-serif; }
.tpl-bar[hidden] { display: none; }
.tpl-bar-head { display: flex; align-items: center; gap: 8px; }
.tpl-bar-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e7c983; font-weight: 600; }
.tpl-bar button { flex: none; min-height: 30px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-strong, #3a352c); background: var(--surface-2, #221f19); color: var(--text, #eee); font: 12px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.tpl-bar button.on { border-color: #ff8a80; color: #ffb3ad; }
.tpl-bar .tpl-done { background: #c9a45c; border-color: #c9a45c; color: #16130d; font-weight: 600; }
.tpl-bar-tools { display: none; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 8px; }
.tpl-bar.has-part .tpl-bar-tools { display: flex; }
.tpl-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpl-field[hidden] { display: none; }
.tpl-field span { color: var(--muted, #a59d8c); font-size: 10.5px; }
.tpl-field input[type="text"], .tpl-field select { height: 32px; min-width: 0; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-strong, #3a352c); background: var(--surface, #1a1814); color: var(--text, #eee); font: 13px/1.2 Inter, system-ui, sans-serif; }
.tpl-text-field { flex: 1 1 160px; }
.tpl-text-field input { font-family: var(--ui-urdu, "Noto Nastaliq Urdu"), Inter, sans-serif !important; }
.tpl-field select { max-width: 170px; }
.tpl-color-field input { width: 42px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line-strong, #3a352c); background: transparent; }
.studio-app .tpl-range-field input, .tpl-range-field input { width: 96px; height: 4px; margin: 14px 0; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .18); box-shadow: none; }
.tpl-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 900px) {
  .toolbar-actions > button.tpl-edit-toggle { height: 32px; padding: 0 9px; font-size: 11px; }
  .tpl-bar { margin: 4px auto; padding: 6px 8px; border-radius: 12px; }
  .tpl-bar-tools { gap: 6px; margin-top: 6px; }
  .tpl-field select { max-width: 130px; }
  .tpl-range-field input { width: 74px; }
  .tpl-bar button { min-height: 28px; padding: 3px 8px; }
}

/* ---------- Tutorial panel (Oct 2026) ---------- */
.tutorial-player { display: grid; place-items: center; }
.tutorial-player video { width: 100%; max-width: 340px; max-height: 64vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.tutorial-steps .menu-title { margin: 2px 0 8px; }
.tutorial-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tutorial-chapter { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.tutorial-chapter:hover { border-color: var(--line-strong); }
.tutorial-chapter.current { border-color: rgba(201,164,92,.55); background: var(--gold-soft); }
.tutorial-chapter .tc-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 Inter, system-ui, sans-serif; background: var(--surface-3); color: var(--gold); }
.tutorial-chapter.current .tc-num { background: var(--gold); color: var(--gold-ink); }
.tutorial-chapter .tc-text { display: flex; flex-direction: column; min-width: 0; }
.tutorial-chapter .tc-text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutorial-chapter .tc-text small { font-family: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", serif; font-size: 14px; line-height: 1.7; color: var(--muted); text-align: left; }
.tutorial-chapter .tc-time { font: 500 11px/1 Inter, system-ui, sans-serif; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .topbar .tutorial-trigger span { display: none; }
  .tutorial-player video { max-height: 52vh; }
}

/* ---------- Video editor link (Oct 2026) ---------- */
.video-editor-link { width: 100%; justify-content: center; }
.video-editor-note { margin: -4px 0 0; white-space: normal; }

/* ---------- Book switch inside the library (phones had no way to reach Sahifa / Quran) ---------- */
.studio-app .library-drawer .library-collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; margin: 0 16px 10px; gap: 4px; }
.studio-app .library-drawer .library-collection button { padding: 4px 6px 5px; min-width: 0; }
.studio-app .library-drawer .library-collection span { font: 14px/1.9 var(--ui-urdu); white-space: nowrap; }