/* Graphican tools (upscale, background remover, social crop, image compressor, PDF ⇄ image) — the same calm studio look as the editors.
   The work area comes first: a compact title, then one card with the canvas on the left and a settings panel on the right.
   Once a picture is in, the drop zone shrinks to a slim «change picture» bar so the result is in view without scrolling. */

:root { --ts-bg:#111111; --ts-bg2:#181818; --ts-bg3:#222222; --ts-line:#242424; --ts-line2:#2f2f2f; --ts-text:#ededed; --ts-muted:#8f8f8f; }

/* no black-hole ring or beam behind a tool: the work area is the hero */
html::after { display:none !important; }
#app > .lp-fx { opacity:.35; }

/* compact title */
.tools-page .tool-crumb { padding-top:96px; }
.tools-page .sec { padding-top:clamp(18px, 3vw, 34px); }
.tools-page .sec-head { margin-bottom:18px; max-width:none; }
.tools-page .sec-head .sec-title br { display:none; }
.tools-page .sec-head .sec-title { font-size:clamp(34px, 4vw, 54px) !important; line-height:1.04; }
.tools-page .sec-head .sec-desc { font-size:15.5px; line-height:1.6; margin-top:12px; max-width:640px; }
.tools-page .sec-head .eb, .tools-page .sec-head .sec-eb { margin-bottom:10px; }
.tg { margin:0 0 16px; }
.tg-steps li { font-size:13.5px !important; color:var(--ts-muted); }
.tg-steps li span { background:var(--ts-bg3) !important; border-color:var(--ts-line2) !important; color:var(--ts-text) !important; }

/* the work card */
.tool { position:relative; padding:14px !important; border:1px solid var(--ts-line) !important; border-radius:20px !important; background:var(--ts-bg) !important; box-shadow:0 30px 60px -40px rgba(0,0,0,.9); }
.drop { min-height:300px !important; border:1.5px dashed var(--ts-line2) !important; border-radius:14px !important; background:var(--ts-bg2) !important; box-shadow:none !important; transition:border-color .2s, background .2s, min-height .3s; }
.drop:hover, .drop.over { border-color:#6f6f6f !important; background:#1c1c1c !important; box-shadow:none !important; }
.drop b { font-size:17px !important; color:var(--ts-text); }
.drop-ic { background:var(--ts-bg3) !important; color:var(--ts-text) !important; box-shadow:none !important; border:1px solid var(--ts-line2); border-radius:14px !important; }
.drop .drop-types i { border-color:var(--ts-line2); }

/* settings: a vertical panel, plain labels, full-width controls */
.tool-opts { flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:14px !important; margin:14px 0 0 !important; padding:18px; border:1px solid var(--ts-line); border-radius:14px; background:var(--ts-bg2); }
.tool-opts::before { content:"Тохиргоо"; font:650 14px/1 Inter, sans-serif; color:var(--ts-text); }
.tool-opts label { display:block; width:100%; }
.tool-opts label span { font:500 12.5px/1.3 Inter, sans-serif !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ts-muted) !important; margin-bottom:6px !important; }
.tool-opts select { width:100% !important; min-width:0 !important; height:42px !important; border:1px solid var(--ts-line2) !important; border-radius:10px !important; background-color:var(--ts-bg3) !important; font-size:13.5px !important; }
.tool-opts select:focus { outline:none; border-color:#8f8f8f !important; }
.tool-opts input[type="color"] { border-radius:10px !important; border-color:var(--ts-line2) !important; }
.tool-opts .btn { width:100%; height:44px !important; border-radius:10px !important; justify-content:center; font-weight:600; }
.design-page .tool-opts .btn.solid, .tool-opts .btn.solid { background:#ffffff !important; color:#0a0a0a !important; border:0 !important; box-shadow:none !important; margin-top:4px; }
.design-page .tool-opts .btn.solid:hover, .tool-opts .btn.solid:hover { background:#e6e6e6 !important; }
.tool-opts .btn:not(.solid) { background:var(--ts-bg3) !important; color:var(--ts-text) !important; border:1px solid var(--ts-line2) !important; }
.tool-opts .btn:not(.solid):hover { background:#2a2a2a !important; }
/* a disabled step reads as «not yet», not as broken */
.design-page .tool-opts .btn[disabled], .tool-opts .btn.solid[disabled], .tool-opts .btn[disabled] { opacity:1 !important; background:var(--ts-bg3) !important; color:#5f5f5f !important; border:1px dashed var(--ts-line2) !important; }
.tool-status { color:var(--ts-muted) !important; font-size:13px !important; }
.up-progress { border-radius:4px; background:var(--ts-bg3) !important; }
.up-progress i { background:#ffffff !important; }

/* results */
.compare { border-radius:14px; overflow:hidden; border:1px solid var(--ts-line); margin-top:14px; }
.cmp-tag { background:rgba(10,10,10,.8) !important; color:#fff !important; border-radius:6px !important; }
.cmp-meta { color:var(--ts-muted); }
.thumb { border-color:var(--ts-line) !important; border-radius:10px !important; }
.th-dl { background:rgba(255,255,255,.95) !important; color:#0a0a0a !important; }
.flow { border-top:1px solid var(--ts-line); padding-top:12px; }
.tool-tabs { border-color:var(--ts-line) !important; background:var(--ts-bg) !important; }
.sz-list .sz, .sz-list label { border-color:var(--ts-line2) !important; background:var(--ts-bg2) !important; border-radius:10px !important; }
.tool-note { color:var(--ts-muted); font-size:12.5px; }

/* a picture is in: the drop zone becomes a slim bar, the result moves up */
.tool:has(.compare:not([hidden])) .drop, .tool:has(.sc-grid > *) .drop, .tool:has(.thumbs > *) .drop {
  min-height:0 !important; flex-direction:row !important; justify-content:flex-start !important; gap:12px !important; padding:10px 14px !important; text-align:left !important; }
.tool:has(.compare:not([hidden])) .drop-ic, .tool:has(.sc-grid > *) .drop-ic, .tool:has(.thumbs > *) .drop-ic { width:36px !important; height:36px !important; margin:0 !important; font-size:10px !important; }
.tool:has(.compare:not([hidden])) .drop b, .tool:has(.sc-grid > *) .drop b, .tool:has(.thumbs > *) .drop b { font-size:0 !important; }
.tool:has(.compare:not([hidden])) .drop b::after, .tool:has(.sc-grid > *) .drop b::after { content:"Өөр зураг сонгох"; font-size:14px; }
.tool:has(.thumbs > *) .drop b::after { content:"Файл нэмэх"; font-size:14px; }
.tool:has(.compare:not([hidden])) .drop span:not(.drop-ic), .tool:has(.sc-grid > *) .drop span:not(.drop-ic), .tool:has(.thumbs > *) .drop span:not(.drop-ic) { font-size:12.5px !important; }
.tool:has(.compare:not([hidden])) .drop .drop-types, .tool:has(.sc-grid > *) .drop .drop-types, .tool:has(.thumbs > *) .drop .drop-types { display:none; }

/* desktop: canvas left, settings right (sticky while the result scrolls) */
@media (min-width:1000px) {
  .tool { display:grid !important; grid-template-columns:minmax(0, 1fr) 320px; column-gap:14px; align-items:start; }
  .tool > * { grid-column:1; }
  .tool > .tool-opts { grid-column:2; grid-row:1 / span 12; margin:0 !important; position:sticky; top:92px; }
  .tool > .tool-tabs, .tool > .tool-edit { grid-column:1 / -1; }
}
@media (max-width:999px) {
  .tools-page .tool-crumb { padding-top:84px; }
  .drop { min-height:200px !important; }
}