/* Graphican editors — one button system for Design, Slides, Video and PDF (loaded last in each editor).
   Three clear levels instead of many look-alike outlined boxes:
     primary   — solid brand colour, one per area (Татах, the main next step)
     secondary — soft filled surface, no outline (Хадгалах, Нээх, other choices)
     quiet     — icon / text buttons that only tint on hover
   Shared shape (8–10px radius, 32px rows), focus ring, press feedback and a small icon set.
   Colours come from each editor's own tokens (--acc, --bg2, --bg3, --text …), so light and dark modes stay right. */

:root {
  --ui-r:9px;
  --i-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14'/%3E%3C/svg%3E");
  --i-save:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v5h7V4M8 20v-6h8v6'/%3E%3C/svg%3E");
  --i-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5V18a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5V9.5A1.5 1.5 0 0 0 19 8h-7l-2-2.5H5A1.5 1.5 0 0 0 3.5 7z'/%3E%3C/svg%3E");
  --i-text:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6V4.5h14V6M12 4.5v15M9 19.5h6'/%3E%3C/svg%3E");
  --i-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m20.5 15.5-5-5-9 9'/%3E%3C/svg%3E");
  --i-tpl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7.5' height='9' rx='1.6'/%3E%3Crect x='13' y='3.5' width='7.5' height='5' rx='1.6'/%3E%3Crect x='13' y='10.5' width='7.5' height='10' rx='1.6'/%3E%3Crect x='3.5' y='14.5' width='7.5' height='6' rx='1.6'/%3E%3C/svg%3E");
  --i-kit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='4'/%3E%3Crect x='13' y='13' width='7.5' height='7.5' rx='1.5'/%3E%3Cpath d='M17 3.5 21 10h-8z'/%3E%3Cpath d='M4 20.5 11 13.5'/%3E%3C/svg%3E");
  --i-size:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v14h14'/%3E%3Cpath d='M3 7h14v14'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ---------- shared icon slot ---------- */
#ed-export::before, #pe-save::before, #v-export::before, .ps .btn.full[data-a^="export"]::before, #v-pfsave::before,
.ed-savefile::before, .vfile::before, #pe-open::before, #pe-blank::before,
.ed-quick-actions button::before, .ui-start-actions button::before, .lp-body > .btn.full::before {
  content:""; flex:none; width:16px; height:16px; background:currentColor;
  -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat; }
#ed-export, #pe-save, #v-export, .ps .btn.full[data-a^="export"], #v-pfsave { --ic:var(--i-dl); }
.ed-savefile, .vfile { --ic:var(--i-save); }
#pe-open { --ic:var(--i-open); }
#pe-blank, .lp-body > .btn.full { --ic:var(--i-plus); }
.lp-body > .btn.full:has(> svg)::before { display:none; }
.ed-quick-actions [data-text] { --ic:var(--i-text); }
.ed-quick-actions [data-a="upload"], .ui-start-actions [data-ui-start="upload"] { --ic:var(--i-img); }
.ed-quick-actions [data-quick-tab="templates"], .ui-start-actions [data-ui-start="templates"] { --ic:var(--i-tpl); }
.ed-quick-actions [data-quick-tab="kit"] { --ic:var(--i-kit); }
.ui-start-actions [data-ui-start="sizes"] { --ic:var(--i-size); }

/* ---------- primary: solid brand, the one main action ---------- */
.btn-primary, .btn-x, .ps .btn.full[data-a^="export"], .ui-start-actions button:first-child {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 16px; border:0 !important; border-radius:var(--ui-r) !important;
  background:var(--acc) !important; color:#fff !important; font-weight:650; letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(20,10,60,.25), 0 6px 16px -8px var(--acc) !important;
  transition:filter .15s, transform .1s, box-shadow .2s; }
.btn-primary:hover:not(:disabled), .btn-x:hover:not(:disabled), .ps .btn.full[data-a^="export"]:hover, .ui-start-actions button:first-child:hover {
  filter:brightness(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(20,10,60,.25), 0 10px 22px -8px var(--acc) !important; }
.btn-primary:active:not(:disabled), .btn-x:active:not(:disabled), .ps .btn.full[data-a^="export"]:active, .ui-start-actions button:first-child:active { transform:translateY(1px); filter:brightness(.96); }
.btn-primary:disabled, .btn-x:disabled { opacity:.45; box-shadow:none !important; }
.ps .btn.full[data-a^="export"] { height:38px; width:100%; }

/* ---------- secondary: soft filled surface, no outline ---------- */
.btn, .btn-g, .ui-start-actions button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:32px; padding:0 13px; border:1px solid transparent !important; border-radius:var(--ui-r);
  background:var(--bg2); color:var(--text); font-weight:600;
  transition:background .15s, border-color .15s, transform .1s; }
.btn:hover, .btn-g:hover, .ui-start-actions button:hover { background:var(--bg3); }
.btn:active, .btn-g:active, .ui-start-actions button:active { transform:translateY(1px); }
.btn.acc { background:var(--acc-soft); color:var(--acc); }
.btn-g { height:36px; }

/* ---------- quiet: icon buttons ---------- */
.ib { width:32px; height:32px; border-radius:var(--ui-r); transition:background .15s, color .15s; }
.ib:hover:not(:disabled) { background:var(--bg2); }
.ib:disabled { opacity:.35; }
.ib.on, .ib[aria-pressed="true"] { background:var(--acc-soft); color:var(--acc); }
.zoom { height:32px; border-radius:var(--ui-r) !important; padding:0 10px; font-variant-numeric:tabular-nums; }

/* one focus ring everywhere */
.btn:focus-visible, .btn-g:focus-visible, .btn-x:focus-visible, .btn-primary:focus-visible, .ib:focus-visible, .zoom:focus-visible,
.ed-quick-actions button:focus-visible, .ui-start-actions button:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

/* ---------- «Дизайндаа нэмэх»: tiles with an icon, not four identical boxes ---------- */
.ed-quick b { display:block; margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.ed-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ed-quick-actions button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px;
  min-height:68px; height:auto; padding:12px; border:1px solid transparent !important; border-radius:12px;
  background:var(--bg2); color:var(--text); font-size:12px; font-weight:600; line-height:1.25; text-align:left;
  transition:background .15s, border-color .15s, transform .12s; }
.ed-quick-actions button { position:relative; }
/* a tinted square behind the icon (::before) and the icon itself on top (::after) */
.ed-quick-actions button::before { width:34px; height:34px; border-radius:10px; background:var(--acc-soft); -webkit-mask:none; mask:none; }
.ed-quick-actions button::after { content:""; position:absolute; left:19px; top:19px; width:20px; height:20px; background:var(--acc);
  -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat; }
.ed-quick-actions button:hover { background:var(--bg3); border-color:var(--line2) !important; transform:translateY(-1px); }

/* ---------- the empty-canvas prompt: one main step, two alternatives ---------- */
.ui-start-actions { gap:8px; }
.ui-start-actions button { height:36px; min-height:36px; padding:0 14px; font-size:12.5px; }

/* buttons that already carry their own icon keep only that one */
.ed-savefile:has(> svg)::before, .vfile:has(> svg)::before, #pe-open:has(> svg)::before, #ed-export:has(> svg)::before, #pe-save:has(> svg)::before, #v-export:has(> svg)::before { display:none; }
/* the narrow right-panel header: compact icons, the download button keeps its full label */
.rp-head .ib { width:28px; height:28px; }
#ed-export { height:32px; padding:0 11px; gap:5px; flex:none; }
.rp-head .zoom { padding:0 8px; }
.rp-head, .rp-head .pw { gap:2px; }

/* ---------- text controls, as in Word / Google Docs / Canva ---------- */
.ps-text .ps-l:first-of-type { margin-top:2px; }
.ps-text .nf .lb { min-width:36px; }
.stepper { display:flex; align-items:center; height:32px; border-radius:var(--ui-r); background:var(--bg2); overflow:hidden; }
.stepper button { flex:none; width:30px; height:100%; display:grid; place-items:center; color:var(--muted); }
.stepper button:hover { background:var(--bg3); color:var(--text); }
.stepper button .i { width:14px; height:14px; }
.stepper input { flex:1; min-width:0; width:100%; height:100%; border:0; background:none; text-align:center; font:600 13px/1 inherit; color:var(--text); font-variant-numeric:tabular-nums; }
.stepper input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--acc); border-radius:6px; }
.tstyle-row { display:flex; align-items:center; gap:2px; }
.tstyle-row .sp { flex:1; }
.tsb { width:32px; height:32px; display:grid; place-items:center; border-radius:var(--ui-r); color:var(--text); }
.tsb:hover { background:var(--bg2); }
.tsb.on { background:var(--acc-soft); color:var(--acc); }
.tsb .i { width:16px; height:16px; }
.seg-txt button { font:700 12px/1 Inter, sans-serif; }
details.more { margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
details.more summary { cursor:pointer; list-style:none; font-size:12px; font-weight:600; color:var(--muted); padding:4px 0; }
details.more summary::before { content:"▸"; display:inline-block; width:14px; transition:transform .15s; }
details.more[open] summary::before { transform:rotate(90deg); }

/* ---------- the context bar: font · size · colour · B I U · align (Canva-like) ---------- */
.ctxbar .tool.on { background:var(--acc-soft); color:var(--acc); }
.ctxbar .ctx-font { gap:6px; max-width:150px; padding:0 8px 0 10px; font-size:13px; font-weight:600; }
.ctxbar .ctx-font span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctxbar .ctx-font .caret { width:12px; height:12px; flex:none; opacity:.6; }
.ctx-step { display:inline-flex; align-items:center; height:32px; border-radius:var(--ui-r); background:color-mix(in srgb, currentColor 12%, transparent); color:inherit; }
.ctx-step .tool { width:28px; min-width:28px; padding:0; }
.ctx-step .ctx-num, .ctxbar .ctx-num[data-csize] { width:40px; height:28px; border:0; background:none; text-align:center; font:600 13px/1 Inter, sans-serif; color:inherit; font-variant-numeric:tabular-nums; }
.ctx-col { position:relative; flex-direction:column; justify-content:center; gap:2px; width:34px; cursor:pointer; }
.ctx-col b { font:800 14px/1 Inter, sans-serif; }
.ctx-col i { display:block; width:18px; height:4px; border-radius:2px; box-shadow:0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); }
.ctx-col.sq i { width:20px; height:20px; border-radius:6px; }
.ctx-col.ring i { width:18px; height:18px; border-radius:50%; border:3px solid; background:none; box-shadow:none; }
.ctx-col input[type="color"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }

/* ---------- video editor: the text formatting row (font ▾ · − size + · A colour · B) ---------- */
.vfmt { display:flex; align-items:center; gap:6px; margin:10px 0 2px; }
/* the size is set in this row now; the old size slider stays in the page (presets update it) but is not shown */
.lbl[hidden], .rowv[hidden] { display:none !important; }
.vf-font { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; height:36px; padding:0 10px 0 12px; border-radius:var(--ui-r);
  background:var(--bg3, rgba(255,255,255,.06)); color:var(--text); font-size:14px; font-weight:600; }
.vf-font span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vf-font svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; opacity:.6; }
.vf-step { display:inline-flex; align-items:center; height:36px; border-radius:var(--ui-r); background:var(--bg3, rgba(255,255,255,.06)); }
.vf-step button { width:26px; height:100%; font-size:17px; color:var(--muted, #a6a8b8); }
.vf-step button:hover { color:var(--text); }
.vf-step input { width:38px; height:100%; border:0; background:none; text-align:center; color:var(--text); font:600 14px/1 Inter, sans-serif; font-variant-numeric:tabular-nums; }
.vf-col { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:36px; height:36px; border-radius:var(--ui-r); background:var(--bg3, rgba(255,255,255,.06)); cursor:pointer; color:var(--text); }
.vf-col b { font:800 15px/1 Inter, sans-serif; }
.vf-col i { width:18px; height:4px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.vf-col input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.vf-b { width:36px; height:36px; border-radius:var(--ui-r); background:var(--bg3, rgba(255,255,255,.06)); color:var(--text); font:800 15px/1 Inter, sans-serif; }
.vf-b.on { background:var(--acc-soft, rgba(123,100,255,.2)); color:var(--acc2, #a497ff); box-shadow:inset 0 0 0 1px var(--acc2, #a497ff); }
.vf-i i { font:italic 700 16px/1 Georgia, "Times New Roman", serif; }
#v-cmrow { gap:4px; }
#v-cmrow .vf-b, #v-cmrow .vf-col { width:32px; }
#v-cmrow .vf-step button { width:24px; }
#v-cmrow .vf-step input { width:34px; }
#v-cmrow .vf-font { padding:0 8px 0 10px; }
#v-cmrow .vf-font span { font-size:13px; }