/* studio.css — shared 3-panel editor layout (tool rail | canvas | properties) used by the screenshot and PDF editors */
.studio { --sp:#121a2b; --sp2:#1a2540; --si:#e8edf7; --sm:#8b9bb8; --sl:#1f2b45; --sa:#ff5a00; --sas:rgba(255,90,0,.14); --ss:#070b14; --sd:#ff6b6b; --sink:#fff; text-align: start; }
html[data-theme="light"] .studio { --sp:#fff; --sp2:#eef2fa; --si:#16203a; --sm:#5b6985; --sl:#dbe2f0; --sa:#f05000; --sas:rgba(240,80,0,.10); --ss:#e4e8f2; --sd:#d93636; }
.studio [hidden] { display: none !important; }
.studio, .studio * { box-sizing: border-box; }
.studio button, .studio input, .studio select, .studio textarea { font: inherit; color: inherit; }
.studio button { cursor: pointer; }
.studio :focus-visible { outline: 2px solid var(--sa); outline-offset: 2px; }
.studio svg { flex: none; }

main.page.wide.studio-page { max-width: 1480px; }
.studio-page .hero { margin-bottom: 14px; }
.st-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; min-width: 0; }
.st-top .st-hint { margin-inline-end: auto; color: var(--sm); font-size: .85rem; }
.st-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--sl); background: var(--sp); color: var(--si); border-radius: 10px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.st-btn:hover { background: var(--sp2); }
.st-btn[disabled] { opacity: .4; cursor: default; }
.st-btn.primary { background: var(--sa); border-color: var(--sa); color: var(--sink); font-weight: 800; }
.st-btn.primary:hover { filter: brightness(.93); }
.st-btn.danger { color: var(--sd); }
.st-btn svg, .st-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.studio kbd { font-family: inherit; font-size: .72rem; font-weight: 700; padding: 1px 7px; border: 1px solid var(--sl); border-bottom-width: 2px; border-radius: 6px; background: var(--sp2); color: var(--si); }

.st-work { display: grid; grid-template-columns: 76px minmax(0, 1fr) 300px; gap: 12px; height: clamp(620px, calc(100vh - 170px), 940px); min-height: 0; }
.st-rail { display: flex; flex-direction: column; gap: 4px; background: var(--sp); border: 1px solid var(--sl); border-radius: 16px; padding: 6px; overflow: auto; }
.st-tool { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 2px 4px; border: 1px solid transparent; border-radius: 10px; background: none; font-size: .68rem; font-weight: 600; color: var(--sm); flex: none; }
.st-tool svg { width: 20px; height: 20px; }
.st-tool:hover { background: var(--sp2); color: var(--si); }
.st-tool[aria-pressed="true"] { background: var(--sa); color: var(--sink); border-color: var(--sa); }
.st-rail hr { width: 70%; border: 0; border-top: 1px solid var(--sl); margin: 3px auto; }

.st-stagebox { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.st-stage { flex: 1; min-height: 0; display: flex; overflow: auto; background-color: var(--ss); border: 1px solid var(--sl); border-radius: 16px;
  background-image: linear-gradient(45deg, rgba(128,134,160,.10) 25%, transparent 25%, transparent 75%, rgba(128,134,160,.10) 75%), linear-gradient(45deg, rgba(128,134,160,.10) 25%, transparent 25%, transparent 75%, rgba(128,134,160,.10) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.st-stage.dropping { outline: 3px dashed var(--sa); outline-offset: -8px; }
.st-cvwrap { margin: auto; padding: 24px; }
#cv { display: block; box-shadow: 0 6px 28px rgba(0,0,0,.4); touch-action: none; background: #fff; max-width: none; }
#cv[data-tool="select"] { cursor: default; }
#cv:not([data-tool="select"]) { cursor: crosshair; }
#cv[data-tool="text"], #cv[data-tool="keys"], #cv[data-tool="step"] { cursor: copy; }
.st-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--sm); font-size: .85rem; min-height: 34px; }
.st-status .st-grow { margin-inline-end: auto; }
.st-zoom { display: flex; align-items: center; gap: 4px; }
.st-zoom button { min-width: 34px; padding: 3px 9px; border: 1px solid var(--sl); background: var(--sp); color: var(--si); border-radius: 8px; font-weight: 700; }
.st-zoom button:hover { background: var(--sp2); }
#zoomv { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
#imginfo { font-variant-numeric: tabular-nums; }

.st-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding-bottom: 2px; }
.st-card { background: var(--sp); border: 1px solid var(--sl); border-radius: 16px; padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; color: var(--si); }
.st-card h2 { font-size: .8rem; font-weight: 800; margin: 0; color: var(--sm); letter-spacing: .02em; }
.st-field { display: flex; flex-direction: column; gap: 5px; }
.st-field > label, .st-lbl { font-size: .82rem; font-weight: 600; }
.st-row { display: flex; align-items: center; gap: 8px; }
.st-row .st-val { min-width: 34px; text-align: end; font-variant-numeric: tabular-nums; color: var(--sm); font-size: .82rem; }
.studio input[type=range] { flex: 1; accent-color: var(--sa); min-width: 0; }
.studio input[type=text], .studio input[type=number], .studio select, .studio textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--sl); background: var(--sp2); border-radius: 9px; min-width: 0; color: var(--si); }
.studio textarea { resize: vertical; min-height: 62px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.st-chips button { padding: 4px 11px; border: 1px solid var(--sl); background: var(--sp2); color: var(--si); border-radius: 999px; font-size: .8rem; font-weight: 600; }
.st-chips button[aria-pressed="true"] { background: var(--sa); border-color: var(--sa); color: var(--sink); }
.st-chips.keys button { direction: ltr; }
.st-sw { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.st-sw button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sp); box-shadow: 0 0 0 1px var(--sl); padding: 0; }
.st-sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--si); }
.st-sw input[type=color] { width: 30px; height: 30px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.st-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.st-actions .st-btn { padding: 5px 10px; font-size: .8rem; }
.st-empty { color: var(--sm); font-size: .85rem; margin: 0; }
.st-keylist { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; font-size: .82rem; margin: 0; }
.st-keylist dt { margin: 0; direction: ltr; text-align: end; }
.st-keylist dd { margin: 0; color: var(--sm); }
.st-export { margin-top: auto; }
.st-expgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-est { font-size: .78rem; color: var(--sm); font-variant-numeric: tabular-nums; min-height: 20px; }
.st-expbtns { display: flex; gap: 8px; }
.st-expbtns .st-btn { flex: 1; justify-content: center; }
.st-toast { position: fixed; inset-inline: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); background: var(--sp2); color: var(--si); border: 1px solid var(--sa); padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; z-index: 90; }
.st-toast.on { opacity: 1; transform: none; }
.st-layers { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; }
.st-layer { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid var(--sl); border-radius: 10px; background: var(--sp2); }
.st-layer[aria-current="true"] { border-color: var(--sa); background: var(--sas); }
.st-layer .nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; background: none; font-size: .82rem; font-weight: 600; text-align: start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--si); }
.st-layer .nm svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-layer .ib { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--sm); padding: 0; }
.st-layer .ib:hover { background: var(--sl); }
.st-layer .ib svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-layer.off .nm { opacity: .45; text-decoration: line-through; }

@media (max-width: 980px) {
  .st-work { grid-template-columns: minmax(0, 1fr); height: auto; gap: 10px; }
  .st-rail { flex-direction: row; overflow-x: auto; order: -1; }
  .st-rail hr { width: 1px; height: 30px; margin: auto 3px; border-top: 0; border-inline-start: 1px solid var(--sl); }
  .st-tool { min-width: 62px; }
  .st-stage { height: 58vh; min-height: 320px; flex: none; }
  .st-panel { overflow: visible; }
  .st-top .st-hint { display: none; }
}

/* ---- PDF editor specifics ---- */
.studio .st-tool.active { background: var(--sa); color: var(--sink); border-color: var(--sa); }
.studio .st-pdfstage { display: block; }
.studio .ed-pages { display: grid; gap: 18px; justify-items: center; padding: 20px 16px 48px; background: transparent; border-radius: 0; margin: 0; overflow: visible; width: max-content; min-width: 100%; }
.studio .pg-head button { background: var(--sp); color: var(--si); border-color: var(--sl); }
.studio .pg-head { color: var(--sm); }
.st-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 340px; overflow: auto; }
.st-th { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 0; }
.st-thbox { padding: 3px; border: 2px solid var(--sl); background: var(--sp2); border-radius: 8px; line-height: 0; max-width: 100%; }
.st-thbox canvas { max-width: 100%; height: auto; display: block; border-radius: 3px; background: #fff; }
.st-th.cur .st-thbox { border-color: var(--sa); }
.st-throw { display: flex; align-items: center; gap: 0; justify-content: center; flex-wrap: wrap; }
.st-throw b { font-size: .75rem; min-width: 18px; text-align: center; color: var(--sm); }
.st-throw .ib { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; color: var(--sm); border-radius: 6px; padding: 0; }
.st-throw .ib:hover:not([disabled]) { background: var(--sl); color: var(--si); }
.st-throw .ib[disabled] { opacity: .3; cursor: default; }
.st-throw .ib svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-layer .ib[disabled] { opacity: .3; cursor: default; }
.studio .st-hint { color: var(--sa); font-weight: 600; }
.studio #txtopts .st-actions .st-btn { min-width: 34px; justify-content: center; padding: 4px 8px; }
.studio .st-btn.on { background: var(--sas); border-color: var(--sa); }
.studio .st-top { position: relative; }
#drop.compact { padding: 12px; flex-direction: row; justify-content: center; gap: 10px; }
#drop.compact span { display: none; }
#drop.compact .drop-icon { font-size: 1.3rem; }

/* slim scrollbars inside the editors: hidden until you hover */
.studio .st-rail { scrollbar-width: none; }
.studio .st-rail::-webkit-scrollbar { display: none; }
.studio .st-stage, .studio .st-panel, .studio .st-layers, .studio .st-thumbs { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.studio .st-stage:hover, .studio .st-panel:hover, .studio .st-layers:hover, .studio .st-thumbs:hover { scrollbar-color: var(--sl) transparent; }
html:has(.studio) { scrollbar-width: thin; }
.st-tool span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }