.studio-toolbar { margin:0 0 16px; padding:14px; background:#fff; border:1px solid #e2e5ec; border-radius:14px; }
.studio-format { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.studio-format label { margin:0; font-size:12px; font-weight:700; }
.studio-format select { min-width:230px; height:34px; padding:0 8px; border:1px solid #dce1e9; border-radius:7px; background:white; font:12px system-ui; }
.studio-tools,.studio-actions { display:flex; flex-wrap:wrap; gap:6px; }
.studio-toolbar button,.studio-inspector button,.studio-layers button { font:600 12px system-ui,sans-serif; border:1px solid #dce1e9; border-radius:7px; background:white; color:#283447; padding:8px 10px; cursor:pointer; }
.studio-toolbar button:hover,.studio-inspector button:hover { background:#f0f3f9; }
.studio-toolbar button[aria-pressed=true] { background:#172b47; color:white; border-color:#172b47; }
.studio-toolbar button:disabled,.studio-inspector button:disabled { opacity:.4; cursor:default; }
.studio-actions { margin-top:10px; padding-top:10px; border-top:1px solid #eef0f4; }
.studio-hint { margin:10px 0 0; font-size:12px; color:#657087; line-height:1.5; }
.studio-options { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.studio-options label { margin:0; font-size:11px; display:flex; gap:5px; align-items:center; }
.studio-options input[type=color] { width:30px; height:30px; border:0; padding:0; background:none; }
.studio-options input[type=number] { width:62px; height:30px; padding:4px; }
.studio-inspector { display:grid; grid-template-columns:minmax(0,1fr) 260px; column-gap:18px; align-items:start; background:#fff; padding:14px; margin-top:14px; border:1px solid #e2e5ec; border-radius:10px; }
.studio-inspector h3,.studio-layers h3 { margin:0 0 10px; font-size:13px; }
.studio-inspector > h3 { grid-column:1; }
.studio-properties { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.studio-properties,.studio-inspector > .studio-actions { grid-column:1; }
.studio-properties label { font-size:11px; margin:0; }
.studio-properties input,.studio-properties select { width:100%; height:32px; border:1px solid #dce1e9; border-radius:6px; padding:4px; font:12px system-ui; }
.studio-properties textarea { width:100%; min-height:66px; resize:vertical; border:1px solid #dce1e9; border-radius:6px; padding:6px; font:13px system-ui; }
.studio-properties .wide { grid-column:1/-1; }
.studio-inspector .studio-actions { gap:5px; }
.studio-inspector button { padding:7px; }
.studio-layers { grid-column:2; grid-row:1 / span 3; margin:0; padding-left:18px; border-left:1px solid #e9ebf0; }
.studio-layer-list { max-height:240px; overflow:auto; display:grid; gap:4px; }
.studio-layer { display:flex; gap:4px; align-items:center; padding:4px; border:1px solid #e6e9ef; border-radius:8px; }
.studio-layer.active { background:#fff2ec; border-color:#f2987f; }
.studio-layer button { padding:5px; font-size:11px; }
.studio-layer .layer-name { flex:1; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:0; background:transparent; }
.art-wrap { position:relative; }
#art { touch-action:none; }
#art[data-tool]:not([data-tool=select]) { cursor:crosshair; }
#art[data-tool]:not([data-tool=select]) .movable { cursor:crosshair; }
#art .movable { transform:rotate(var(--rotation,0deg)) scale(var(--scale,1)); }
#art .movable.selected,#art .movable:active { outline:none; filter:inherit; }
#art .movable.selected.art-logo { filter:none; }
.editor-object { position:absolute; min-width:0; min-height:0; }
.editor-object svg { display:block; width:100%; height:100%; overflow:visible; }
.editor-object img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.editor-object[data-kind=text] { white-space:pre-wrap; overflow-wrap:anywhere; font:700 38px/1.15 Arial,sans-serif; }
.studio-selection { position:absolute; border:1.5px solid #4678ed; box-shadow:0 0 0 1px #fff8; pointer-events:none; transform-origin:center; z-index:1000; }
.studio-selection[hidden] { display:none; }
.studio-handle { position:absolute; width:14px; height:14px; background:white; border:2px solid #4678ed; border-radius:3px; pointer-events:auto; touch-action:none; padding:0; }
.studio-handle[data-handle=nw] { top:-8px; left:-8px; cursor:nwse-resize; }
.studio-handle[data-handle=ne] { top:-8px; right:-8px; cursor:nesw-resize; }
.studio-handle[data-handle=sw] { bottom:-8px; left:-8px; cursor:nesw-resize; }
.studio-handle[data-handle=se] { bottom:-8px; right:-8px; cursor:nwse-resize; }
.studio-status { grid-column:1 / -1; margin:12px 0 0; font-size:12px; color:#657087; min-height:18px; }
.studio-context-menu { position:fixed; z-index:1000; display:none; min-width:180px; padding:5px; background:#fff; border:1px solid #dce1e9; border-radius:9px; box-shadow:0 8px 24px #17202a2b; }
.studio-context-menu.open { display:grid; gap:3px; }
.studio-context-menu button { border:0; border-radius:6px; padding:8px 10px; background:#fff; color:#283447; text-align:left; font:600 12px system-ui,sans-serif; cursor:pointer; }
.studio-context-menu button:hover { background:#f0f3f9; }
#art[data-photo-only=true]::before,#art[data-photo-only=true]::after { display:none; }
@media(max-width:780px) { .studio-toolbar { padding:10px; } .studio-format { align-items:flex-start; flex-direction:column; gap:4px; } .studio-format select { width:100%; min-width:0; } .studio-tools button { padding:8px; } .studio-inspector { grid-template-columns:1fr; } .studio-inspector > h3,.studio-properties,.studio-inspector > .studio-actions { grid-column:1; } .studio-layers { grid-column:1; grid-row:auto; margin-top:14px; padding:14px 0 0; border-left:0; border-top:1px solid #e9ebf0; } }