#mcode-image-studio{--mis-navy:#071a35;--mis-cyan:#00bff3;--mis-green:#20e5a0;--mis-line:#dce8f1;font-family:inherit;color:#20374e;max-width:1450px;margin:auto}#mcode-image-studio *{box-sizing:border-box}#mcode-image-studio button,#mcode-image-studio input,#mcode-image-studio select{font:inherit}#mcode-image-studio button{cursor:pointer}#mcode-image-studio .mis-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;justify-content:space-between;background:var(--mis-navy);color:white;padding:16px;border-radius:16px 16px 0 0}#mcode-image-studio .mis-brand{font-size:20px;font-weight:800}#mcode-image-studio .mis-brand span{color:var(--mis-green)}#mcode-image-studio .mis-actions{display:flex;gap:7px;flex-wrap:wrap}#mcode-image-studio .mis-btn{border:1px solid #ccdce7;background:#fff;color:#17354d;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:700}#mcode-image-studio .mis-btn:disabled{opacity:.5;cursor:not-allowed}#mcode-image-studio .mis-primary{background:#00bff3;border-color:#00bff3;color:#071a35}#mcode-image-studio .mis-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 245px;min-height:580px;border:1px solid var(--mis-line);border-top:0}#mcode-image-studio .mis-side{background:#f6fafe;border-right:1px solid var(--mis-line);padding:12px;max-height:780px;overflow:auto}#mcode-image-studio .mis-side input{width:100%;padding:10px;border:1px solid #cbdce8;border-radius:9px;margin-bottom:10px}#mcode-image-studio .mis-group{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;color:#698195;margin:15px 4px 7px}#mcode-image-studio .mis-tool{display:block;width:100%;text-align:left;border:0;border-radius:8px;background:transparent;padding:9px 10px;font-size:12px;color:#29465d}#mcode-image-studio .mis-tool:hover,#mcode-image-studio .mis-tool[aria-pressed=true]{background:#dff4ff;color:#005f85}#mcode-image-studio .mis-center{min-width:0;background:#eaf1f7;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}#mcode-image-studio .mis-canvas-wrap{position:relative;width:100%;min-height:390px;display:flex;align-items:center;justify-content:center;overflow:auto;background:repeating-conic-gradient(#e0e6eb 0% 25%,#fff 0% 50%) 50%/20px 20px;border:1px solid #d2e0e9;border-radius:12px}#mcode-image-studio canvas{display:block;max-width:100%;max-height:62vh;object-fit:contain;touch-action:none}#mcode-image-studio .mis-empty{padding:35px;text-align:center;background:#fffffff0;border-radius:15px;max-width:430px}#mcode-image-studio .mis-empty h3{margin:0 0 10px}#mcode-image-studio .mis-bottom{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#526d80}#mcode-image-studio .mis-panel{padding:17px;border-left:1px solid var(--mis-line);background:white;min-width:0}#mcode-image-studio .mis-panel h3{font-size:17px;margin:0 0 12px;color:#071a35}#mcode-image-studio .mis-panel p{font-size:12px;line-height:1.7;color:#60768a}#mcode-image-studio .mis-field{display:flex;flex-direction:column;gap:5px;margin:13px 0;font-size:12px;font-weight:700}#mcode-image-studio .mis-field input,#mcode-image-studio .mis-field select{width:100%;padding:9px;border:1px solid #cbdce8;border-radius:8px}#mcode-image-studio .mis-row{display:flex;gap:7px;flex-wrap:wrap}#mcode-image-studio .mis-status{font-size:12px;min-height:20px;color:#1d6888}#mcode-image-studio .mis-note{padding:10px;border-radius:9px;background:#eaf8ff;font-size:12px;line-height:1.6}#mcode-image-studio .mis-hidden{display:none!important}@media(max-width:980px){#mcode-image-studio .mis-layout{grid-template-columns:190px minmax(0,1fr)}#mcode-image-studio .mis-panel{grid-column:1/-1;border-top:1px solid var(--mis-line)}}@media(max-width:600px){#mcode-image-studio .mis-layout{display:flex;flex-direction:column}#mcode-image-studio .mis-side{max-height:220px;border-right:0;border-bottom:1px solid var(--mis-line)}#mcode-image-studio .mis-canvas-wrap{min-height:300px}#mcode-image-studio .mis-top{border-radius:12px 12px 0 0}}

/* v1.1 — Neon creative studio redesign */
#mcode-image-studio{--mis-navy:#06152b;--mis-cyan:#00c9ff;--mis-green:#21e7ad;--mis-line:#284b65;color:#e8f7ff;background:#071a2e;border:1px solid #27516c;border-radius:18px;overflow:hidden;box-shadow:0 18px 65px #06182b29}
#mcode-image-studio .mis-top{border-radius:0;padding:18px 20px;background:linear-gradient(110deg,#06142b 15%,#102f4d 75%,#0a3444);border-bottom:1px solid #1c6580;gap:16px}
#mcode-image-studio .mis-brand{font-size:21px;letter-spacing:-.6px;white-space:nowrap}
#mcode-image-studio .mis-brand span{color:#21e7ad}
#mcode-image-studio .mis-btn{border:1px solid #37627e;background:#153550;color:#e8f7ff;padding:10px 13px;border-radius:10px;transition:background .18s,transform .18s,border-color .18s;white-space:nowrap}
#mcode-image-studio .mis-btn:hover:not(:disabled){background:#215276;border-color:#00c9ff;transform:translateY(-1px)}
#mcode-image-studio .mis-primary{background:linear-gradient(115deg,#00b8f0,#18dfbb);border-color:transparent;color:#05243b;box-shadow:0 4px 16px #00c9ff28}
#mcode-image-studio .mis-primary:hover:not(:disabled){background:linear-gradient(115deg,#36d9ff,#46f4c8)}
#mcode-image-studio .mis-layout{grid-template-columns:minmax(265px,295px) minmax(0,1fr) minmax(235px,260px);border:0;min-height:660px}
#mcode-image-studio .mis-side{background:linear-gradient(180deg,#0b2540,#071c33);border-right:1px solid #2a5069;padding:18px 13px;max-height:800px;scrollbar-color:#326987 #0a243b;scrollbar-width:thin}
#mcode-image-studio .mis-side input{background:#102f4c;border:1px solid #37627e;color:#f0faff;padding:13px 14px;border-radius:11px;outline:none}
#mcode-image-studio .mis-side input::placeholder{color:#a3c0d1;opacity:1}
#mcode-image-studio .mis-side input:focus{border-color:#00c9ff;box-shadow:0 0 0 3px #00c9ff1b}
#mcode-image-studio .mis-group{color:#21e7ad;font-size:10px;letter-spacing:1.15px;margin:23px 8px 10px;padding-bottom:8px;border-bottom:1px solid #23455f;line-height:1.5}
#mcode-image-studio .mis-tool{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 10px;margin:3px 0;background:transparent;color:#d9e9f5;border:1px solid transparent;border-radius:10px;font-size:12px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;min-height:40px}
#mcode-image-studio .mis-tool::before{content:'✦';display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:8px;background:#163d58;color:#38c9ef;font-size:12px}
#mcode-image-studio .mis-tool:hover,#mcode-image-studio .mis-tool[aria-pressed=true]{background:#123e5c;color:#fff;border-color:#237b9a}
#mcode-image-studio .mis-tool[aria-pressed=true]::before{background:#00c9ff;color:#071a35}
#mcode-image-studio .mis-tool .mis-tool-label{min-width:0;flex:1}
#mcode-image-studio .mis-tool .mis-planned{display:inline-block;margin-top:3px;color:#9eb2c5;font-size:10px;font-weight:700}
#mcode-image-studio .mis-center{background:radial-gradient(ellipse at 50% 30%,#173e5c 0%,#0c263e 47%,#071c31 100%);padding:25px;gap:17px}
#mcode-image-studio .mis-canvas-wrap{min-height:460px;border:1px solid #39617c;border-radius:18px;box-shadow:0 12px 38px #0003;background:repeating-conic-gradient(#253c50 0% 25%,#1c3044 0% 50%) 50%/22px 22px}
#mcode-image-studio .mis-empty{max-width:450px;padding:40px 32px;background:linear-gradient(145deg,#0b2845f7,#123e5af7);border:1px solid #31728c;box-shadow:0 12px 40px #0006;border-radius:19px;color:#f1faff}
#mcode-image-studio .mis-empty::before{content:'✦  CREATIVE WORKSPACE  ✦';display:block;margin-bottom:19px;font:800 10px monospace;letter-spacing:2px;color:#21e7ad}
#mcode-image-studio .mis-empty h3{font-size:24px;color:#fff;line-height:1.25}
#mcode-image-studio .mis-empty p{color:#c1d9e9;font-size:14px;line-height:1.85}
#mcode-image-studio .mis-bottom{color:#a9cadb;justify-content:center;text-align:center}
#mcode-image-studio .mis-status{color:#21e7ad}
#mcode-image-studio .mis-panel{background:linear-gradient(180deg,#0d2b46,#081e34);border-left:1px solid #2a5069;padding:23px 18px;color:#e8f7ff}
#mcode-image-studio .mis-panel h3{color:#fff;font-size:18px}
#mcode-image-studio .mis-panel p{color:#b6cddd;font-size:12px;line-height:1.85}
#mcode-image-studio .mis-field{color:#e0f1fa}
#mcode-image-studio .mis-field input,#mcode-image-studio .mis-field select{background:#123550;border:1px solid #38647e;color:#fff}
#mcode-image-studio .mis-note{background:#113d57;color:#cdebf6;border:1px solid #286786}
@media(max-width:1120px){#mcode-image-studio .mis-layout{grid-template-columns:minmax(245px,275px) minmax(0,1fr)}#mcode-image-studio .mis-panel{grid-column:1/-1;border-left:0;border-top:1px solid #2a5069}}
@media(max-width:700px){#mcode-image-studio .mis-layout{display:flex;flex-direction:column}#mcode-image-studio .mis-side{max-height:310px;border-right:0;border-bottom:1px solid #2a5069}#mcode-image-studio .mis-center{padding:15px}#mcode-image-studio .mis-canvas-wrap{min-height:330px}#mcode-image-studio .mis-empty{padding:28px 18px}#mcode-image-studio .mis-top{padding:15px}}
@media(prefers-reduced-motion:reduce){#mcode-image-studio .mis-btn{transition:none}}

/* v1.2 image zoom: presentation-only, never changes exported pixels */
#mcode-image-studio .mis-canvas-wrap{overflow:auto;justify-content:safe center;align-items:safe center}
#mcode-image-studio canvas{max-width:none!important;max-height:none!important;flex-shrink:0;margin:auto}
#mcode-image-studio .mis-bottom{width:100%;justify-content:space-between}
#mcode-image-studio .mis-zoom-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border:1px solid #31516a;border-radius:11px;background:#0b2943;color:#e6faff}
#mcode-image-studio .mis-zoom-controls button{min-width:30px;min-height:30px;padding:4px 9px;background:#154361;color:#c5f5ff;border:1px solid #36758c;border-radius:7px;font-weight:800;cursor:pointer}
#mcode-image-studio .mis-zoom-controls button:hover{background:#086b8e;color:white}
#mcode-image-studio .mis-zoom-controls input{width:125px;accent-color:#20e5a0;cursor:pointer}
#mcode-image-studio .mis-zoom-controls output{min-width:42px;text-align:center;font-size:12px;font-weight:800;color:#20e5a0}
@media(max-width:700px){#mcode-image-studio .mis-zoom-controls{width:100%;justify-content:center}#mcode-image-studio .mis-zoom-controls input{width:100px}}

/* v1.3 — Independent scrolling within editor panels */
@media (min-width: 981px){
 #mcode-image-studio .mis-layout{height:min(78vh,780px);min-height:520px;overflow:hidden;align-items:stretch}
 #mcode-image-studio .mis-side,#mcode-image-studio .mis-panel{height:100%;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#32a9cc #0b2540}
 #mcode-image-studio .mis-center{min-height:0;overflow:auto;overscroll-behavior:contain}
}
@media (min-width: 601px) and (max-width:980px){
 #mcode-image-studio .mis-layout{height:min(80vh,800px);min-height:540px;overflow:hidden;grid-template-rows:minmax(0,1fr) minmax(130px,auto)}
 #mcode-image-studio .mis-side{min-height:0;max-height:none;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
 #mcode-image-studio .mis-panel{min-height:0;max-height:220px;overflow-y:auto;overscroll-behavior:contain}
 #mcode-image-studio .mis-center{min-height:0;overflow:auto}
}
@media (max-width:600px){
 #mcode-image-studio .mis-side{height:240px;max-height:240px;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
 #mcode-image-studio .mis-panel{max-height:360px;overflow-y:auto;overscroll-behavior:contain}
}
#mcode-image-studio .mis-side::-webkit-scrollbar,#mcode-image-studio .mis-panel::-webkit-scrollbar{width:9px}
#mcode-image-studio .mis-side::-webkit-scrollbar-track,#mcode-image-studio .mis-panel::-webkit-scrollbar-track{background:#0a243b}
#mcode-image-studio .mis-side::-webkit-scrollbar-thumb,#mcode-image-studio .mis-panel::-webkit-scrollbar-thumb{background:#2e85a7;border-radius:9px;border:2px solid #0a243b}

/* v2.1: fixed editor height and independently scrolling sidebar */
#mcode-image-studio{overflow:visible!important}
#mcode-image-studio .mis-layout{height:clamp(500px,75vh,790px)!important;min-height:0!important;max-height:790px!important;overflow:hidden!important;align-items:stretch!important;grid-template-rows:minmax(0,1fr)!important}
#mcode-image-studio .mis-side{display:flex!important;flex-direction:column!important;min-height:0!important;max-height:none!important;height:100%!important;overflow:hidden!important;overscroll-behavior:contain!important}
#mcode-image-studio .mis-side #mis-search{flex:0 0 auto!important}
#mcode-image-studio .mis-side #mis-tools{display:block!important;flex:1 1 0!important;min-height:0!important;height:0!important;overflow-y:scroll!important;overflow-x:hidden!important;overscroll-behavior-y:contain!important;scrollbar-width:auto!important;scrollbar-color:#00c9ff #0b2540!important;-webkit-overflow-scrolling:touch}
#mcode-image-studio .mis-side #mis-tools::-webkit-scrollbar{width:11px}
#mcode-image-studio .mis-side #mis-tools::-webkit-scrollbar-thumb{background:#00c9ff;border:2px solid #0b2540;border-radius:10px}
#mcode-image-studio .mis-side #mis-tools::-webkit-scrollbar-track{background:#0b2540}
#mcode-image-studio .mis-panel{height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior-y:contain!important}
#mcode-image-studio .mis-center{height:100%!important;min-height:0!important;overflow:auto!important}
@media(max-width:1120px) and (min-width:701px){#mcode-image-studio .mis-layout{grid-template-columns:265px minmax(0,1fr)!important}#mcode-image-studio .mis-panel{display:none!important}}
@media(max-width:700px){#mcode-image-studio .mis-layout{height:auto!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:visible!important}#mcode-image-studio .mis-side{height:320px!important;max-height:320px!important;min-height:320px!important}#mcode-image-studio .mis-panel{display:block!important;height:auto!important;max-height:360px!important;min-height:180px!important}#mcode-image-studio .mis-center{height:auto!important;min-height:360px!important}}

/* v2.2: photo-first editor with compact, bottom tool-card gallery */
#mcode-image-studio .mis-layout{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) minmax(220px,260px)!important;
 grid-template-rows:minmax(0,1fr) 225px!important;
 grid-template-areas:"canvas settings" "tools tools"!important;
 height:clamp(650px,85vh,900px)!important;
 max-height:none!important;
 min-height:650px!important;
 overflow:hidden!important;
 gap:0!important;
}
#mcode-image-studio .mis-center{grid-area:canvas!important;min-width:0!important;min-height:0!important;height:100%!important;padding:16px!important;overflow:hidden!important}
#mcode-image-studio .mis-canvas-wrap{flex:1 1 auto!important;min-height:0!important;height:0!important;width:100%!important}
#mcode-image-studio .mis-bottom{flex:0 0 auto!important}
#mcode-image-studio .mis-panel{grid-area:settings!important;display:block!important;grid-column:auto!important;min-height:0!important;height:100%!important;overflow-y:auto!important}
#mcode-image-studio .mis-side{grid-area:tools!important;display:flex!important;flex-direction:column!important;grid-column:1/-1!important;min-width:0!important;min-height:0!important;height:225px!important;max-height:none!important;padding:11px 15px!important;border-right:0!important;border-top:1px solid #2a5069!important;overflow:hidden!important}
#mcode-image-studio .mis-side #mis-search{max-width:370px!important;margin:0 0 9px!important;padding:8px 12px!important;font-size:12px!important}
#mcode-image-studio .mis-side #mis-tools{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(138px,1fr))!important;gap:7px!important;align-content:start!important;flex:1 1 0!important;min-height:0!important;height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 6px 12px 0!important;scrollbar-width:thin!important}
#mcode-image-studio .mis-group{grid-column:1/-1!important;margin:8px 0 2px!important;padding:0 0 5px!important;font-size:10px!important}
#mcode-image-studio .mis-tool{display:flex!important;align-items:center!important;justify-content:flex-start!important;min-height:44px!important;margin:0!important;padding:7px 9px!important;background:#10334e!important;border:1px solid #2b5770!important;border-radius:9px!important;font-size:11px!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important}
#mcode-image-studio .mis-tool::before{flex:0 0 21px!important;height:21px!important;font-size:10px!important}
#mcode-image-studio .mis-tool:hover,#mcode-image-studio .mis-tool[aria-pressed=true]{background:#126183!important;border-color:#20e5a0!important;color:#fff!important}
@media(max-width:900px){
 #mcode-image-studio .mis-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto 225px!important;grid-template-areas:"canvas" "settings" "tools"!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
 #mcode-image-studio .mis-center{height:clamp(400px,65vh,680px)!important;min-height:400px!important}
 #mcode-image-studio .mis-panel{height:auto!important;max-height:260px!important;min-height:90px!important;border-left:0!important;border-top:1px solid #2a5069!important}
 #mcode-image-studio .mis-side{height:225px!important;min-height:225px!important;max-height:225px!important}
}
@media(max-width:520px){#mcode-image-studio .mis-side #mis-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important}#mcode-image-studio .mis-center{padding:10px!important}#mcode-image-studio .mis-tool{font-size:10px!important}}

/* v2.4: larger tool tray, independent scroll, and expand-all gallery */
#mcode-image-studio .mis-layout{grid-template-rows:minmax(0,1fr) 355px!important;height:clamp(760px,95vh,1050px)!important;min-height:760px!important}
#mcode-image-studio .mis-side{height:355px!important;min-height:0!important;max-height:none!important;overscroll-behavior:contain!important}
#mcode-image-studio .mis-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#e7f8ff;font-size:13px;margin:0 0 10px}
#mcode-image-studio .mis-gallery-head button{background:#134a63;color:#20e5a0;border:1px solid #286b85;border-radius:8px;padding:7px 12px;font-weight:700;font-size:12px;white-space:nowrap}
#mcode-image-studio .mis-side #mis-tools{overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch;scrollbar-width:auto!important;scrollbar-color:#00bff3 #0b2540!important}
#mcode-image-studio .mis-side #mis-tools::-webkit-scrollbar{width:12px}
#mcode-image-studio .mis-side #mis-tools::-webkit-scrollbar-thumb{background:#00bff3;border-radius:12px;border:2px solid #0b2540}
#mcode-image-studio .mis-side #mis-tools::-webkit-scrollbar-track{background:#0b2540}
/* Expand all cards without squeezing the photo workspace; the page grows naturally. */
#mcode-image-studio.mis-gallery-expanded .mis-layout{height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:minmax(540px,72vh) auto!important;overflow:visible!important}
#mcode-image-studio.mis-gallery-expanded .mis-side{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important}
#mcode-image-studio.mis-gallery-expanded .mis-side #mis-tools{height:auto!important;flex:0 0 auto!important;max-height:none!important;overflow:visible!important;display:grid!important}
@media(max-width:900px){
 #mcode-image-studio .mis-layout{height:auto!important;min-height:0!important;grid-template-rows:minmax(0,1fr) auto 355px!important}
 #mcode-image-studio .mis-side{height:355px!important;min-height:0!important;max-height:none!important}
 #mcode-image-studio.mis-gallery-expanded .mis-layout{grid-template-rows:minmax(0,1fr) auto auto!important}
}