/* Creative Studio 2.5: phone-native workspace. Keep desktop 2.4 styling 1:1. */
@media (max-width:850px){
 body.cs-v2 #cs-app{--cs-mobile-rail:calc(66px + env(safe-area-inset-bottom));background:#151518!important;}
 body.cs-v2 #cs-editor{display:flex!important;flex-direction:column!important;position:relative!important;overflow:hidden!important;isolation:isolate;}
 body.cs-v2 #cs-top{height:49px!important;flex:0 0 49px!important;background:#1b1b1e!important;}
 body.cs-v2 #cs-center{position:relative!important;order:1!important;flex:1 1 auto!important;min-height:0!important;background:#18181b!important;}
 /* Pages live inside Pages tool on phones. Three navigation strips above the canvas
    were taking up space without helping the user edit. */
 body.cs-v2 #cs-stage-head,body.cs-v2 #cs-pages-mount{display:none!important;}
 body.cs-v2 #cs-stage{flex:1 1 auto!important;min-height:0!important;align-items:center!important;
   justify-content:center!important;padding:15px!important;overflow:auto!important;
   background:radial-gradient(ellipse at center,#26262c 0%,#161618 78%)!important;
   transition:padding-bottom .14s ease;}
 body.cs-v2 #cs-stage canvas{border-radius:2px;box-shadow:0 10px 33px #000a!important;}
 body.cs-v2 #cs-status{height:31px!important;flex:0 0 31px!important;padding:0 10px!important;background:#202023!important;}
 body.cs-v2 #cs-status .cs-status-left{font-size:10px;gap:5px;}
 body.cs-v2 #cs-zoom{gap:4px;}
 body.cs-v2 #cs-zoom button{min-width:29px!important;min-height:26px!important;height:26px!important;border-radius:6px;}
 body.cs-v2 #cs-rail{order:3!important;z-index:25!important;flex:0 0 var(--cs-mobile-rail)!important;
   height:var(--cs-mobile-rail)!important;width:100%!important;display:flex!important;flex-flow:row nowrap!important;
   align-items:center!important;justify-content:flex-start!important;gap:0!important;
   border:0!important;border-top:1px solid #464246!important;padding:3px 5px env(safe-area-inset-bottom)!important;
   background:#1e1e21!important;overflow-x:auto!important;overflow-y:hidden!important;
   overscroll-behavior-x:contain!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
   touch-action:pan-x!important;scroll-snap-type:x proximity;}
 body.cs-v2 #cs-rail::-webkit-scrollbar{display:none!important;}
 body.cs-v2 #cs-rail button{flex:0 0 64px!important;min-width:64px!important;width:64px!important;
   min-height:56px!important;height:56px!important;max-height:56px!important;margin:0!important;
   padding:5px 2px!important;border:1px solid transparent!important;border-radius:9px!important;
   background:transparent!important;color:#b9b8bc!important;gap:3px!important;font-size:10px!important;
   white-space:nowrap!important;scroll-snap-align:start;}
 body.cs-v2 #cs-rail .cs-rail-icon{font-size:20px!important;font-weight:450!important;line-height:1.1!important;}
 body.cs-v2 #cs-rail button.active{background:#352d20!important;color:#f6ce8b!important;border-color:#ae813e!important;}
 /* Focused mobile property sheet, not a permanently mounted shrunk desktop column. */
 body.cs-v2 #cs-inspector:not([hidden]){display:flex!important;position:absolute!important;
   top:auto!important;bottom:var(--cs-mobile-rail)!important;left:0!important;right:0!important;
   z-index:22!important;order:2!important;flex:0 0 auto!important;width:100%!important;
   height:min(39dvh,370px)!important;max-height:min(39dvh,370px)!important;min-height:0!important;
   border:0!important;border-top:1px solid #96723e!important;border-radius:15px 15px 0 0!important;
   overflow:hidden!important;background:#202024!important;box-shadow:0 -12px 40px #000b!important;
   -webkit-transform:none!important;transform:none!important;}
 body.cs-v2 #cs-inspector.cs-expanded:not([hidden]){height:min(66dvh,630px)!important;
   max-height:min(66dvh,630px)!important;}
 body.cs-v2 #cs-inspector.cs-gallery:not([hidden]){height:min(54dvh,510px)!important;
   max-height:min(54dvh,510px)!important;min-height:0!important;}
 body.cs-v2 #cs-inspector-head{position:relative!important;flex:0 0 47px!important;height:47px!important;
   min-height:47px!important;background:#25252a!important;padding:10px 12px 5px!important;
   align-items:center!important;border-bottom:1px solid #36363c!important;}
 body.cs-v2 #cs-sheet-grab{position:absolute;top:3px;left:50%;transform:translateX(-50%);
   width:52px;height:5px;background:#7f7770;border-radius:10px;touch-action:none;cursor:grab;}
 body.cs-v2 #cs-inspector-head>div:first-of-type{display:flex!important;flex-flow:row nowrap!important;
   align-items:center!important;gap:8px!important;min-width:0!important;}
 body.cs-v2 #cs-sheet-subtitle{display:none!important;}
 body.cs-v2 #cs-panel-title{font-size:14px!important;font-weight:750!important;letter-spacing:-.01em;}
 body.cs-v2 #cs-mobile-swipe{display:none!important;}
 body.cs-v2 #cs-inspector-head .cs-panel-actions{flex:0 0 auto;gap:4px;}
 body.cs-v2 #cs-inspector-head button{display:grid!important;place-items:center!important;
   width:31px!important;height:31px!important;min-height:31px!important;background:#35353b!important;
   border-radius:8px!important;color:#e0e0e3!important;font-size:19px!important;}
 body.cs-v2 #cs-inspector-head #cs-expand{display:grid!important;}
 body.cs-v2 #cs-tabs{flex:0 0 44px!important;min-height:44px!important;height:44px!important;
   display:flex!important;flex-flow:row nowrap!important;justify-content:flex-start!important;align-items:center!important;
   gap:5px!important;padding:5px 10px!important;background:#242429!important;
   border-bottom:1px solid #39393e!important;overflow-x:auto!important;overflow-y:hidden!important;
   overscroll-behavior-x:contain;touch-action:pan-x!important;scrollbar-width:none!important;}
 body.cs-v2 #cs-tabs:empty{display:none!important;}
 body.cs-v2 #cs-tabs::-webkit-scrollbar{display:none;}
 body.cs-v2 #cs-tabs button{min-height:31px!important;height:31px!important;flex:0 0 auto!important;
   min-width:0!important;max-width:none!important;padding:5px 13px!important;font-size:12px!important;
   border-radius:17px!important;white-space:nowrap!important;background:#313139!important;color:#dad8df!important;}
 body.cs-v2 #cs-tabs button.active{background:#624829!important;border-color:#d6a155!important;color:#ffe4b2!important;}
 body.cs-v2 #cs-inspector-body{display:block!important;flex:1 1 auto!important;min-height:0!important;
   overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;
   -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
   padding:13px 15px calc(19px + env(safe-area-inset-bottom))!important;
   background:#202024!important;scrollbar-width:thin!important;scrollbar-color:#72614a transparent!important;}
 body.cs-v2 #cs-inspector-body>*{max-width:100%!important;}
 body.cs-v2 #cs-inspector-body .cs-hint{font-size:12px!important;color:#aba7a7!important;line-height:1.5!important;}
 body.cs-v2 #cs-inspector-body>button.cs-action,
 body.cs-v2 #cs-inspector-body>button.cs-action-primary{min-height:46px!important;
   border-radius:9px!important;margin:0 0 11px!important;padding:10px 14px!important;
   text-align:center!important;font-size:13px!important;}
 body.cs-v2 #cs-inspector-body #selectedTools,
 body.cs-v2 #cs-inspector-body #selectedTools>details.editor-group,
 body.cs-v2 #cs-inspector-body #selectedTools>details.editor-group>.editor-group-body{
   min-width:0!important;max-width:100%!important;width:100%!important;
   height:auto!important;max-height:none!important;overflow:visible!important;
   display:flex!important;flex-direction:column!important;gap:12px!important;}
 body.cs-v2 #cs-inspector-body #selectedTools>details.editor-group:not([open])>.editor-group-body{display:none!important;}
 body.cs-v2 #cs-inspector-body :is(input[type=number],input[type=text],select,textarea){font-size:16px!important;
   min-height:44px!important;padding:9px 10px!important;max-width:100%!important;}
 body.cs-v2 #cs-inspector-body .position-nudge{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;}
 body.cs-v2 #cs-inspector-body .position-nudge button{min-height:42px!important;width:100%!important;}
 body.cs-v2 #cs-inspector-body .position-slider-controls{display:grid!important;grid-template-columns:minmax(0,1fr) 70px 12px!important;gap:7px!important;}
 body.cs-v2 #cs-inspector-body #selectedTools label{line-height:1.4!important;}
 /* PHOTO browsing remains a horizontally swiped gallery. Sliders stay on separate rows. */
 body.cs-v2 #cs-inspector-body :is(.cs-filter-thumbs,.cs-photo-effect-thumbs){display:flex!important;
   flex-flow:row nowrap!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;
   touch-action:pan-x!important;overscroll-behavior-x:contain!important;
   scroll-snap-type:x proximity;max-width:100%!important;width:100%!important;}
 body.cs-v2 #cs-inspector-body .cs-filter-thumb{flex:0 0 112px!important;width:112px!important;max-width:112px!important;min-height:115px!important;}
 body.cs-v2 #cs-inspector-body .cs-photo-effect{flex:0 0 110px!important;width:110px!important;max-width:110px!important;}
 /* Editing options that need continuous canvas visibility reserve space below it. */
 body.cs-v2 #cs-editor:has(#cs-inspector:not([hidden]):not(.cs-gallery)) #cs-stage{
   padding-bottom:calc(min(39dvh,370px) + 15px)!important;}
 body.cs-v2 #cs-editor:has(#cs-inspector.cs-expanded:not([hidden]):not(.cs-gallery)) #cs-stage{
   padding-bottom:calc(min(66dvh,630px) + 15px)!important;}
 /* The grabber/gallery intentionally cover the canvas like full-featured mobile editors. */
 body.cs-v2 #cs-editor:has(#cs-inspector.cs-gallery:not([hidden])) #cs-stage{padding-bottom:15px!important;}
 /* Range controls require one deliberate activation, then allow as many edits as needed.
    Vertical swiping stays with the inspector sheet rather than adjusting the range. */
 body.cs-v2 .cs-safe-range{display:flex;position:relative;flex:1 1 auto;
   align-items:center;min-width:0;width:100%;min-height:42px;}
 body.cs-v2 .cs-safe-range input[type=range]{width:100%!important;max-width:100%!important;min-width:0!important;touch-action:pan-y!important;}
 body.cs-v2 .cs-safe-range .cs-slider-touch-target{position:absolute!important;inset:0!important;
   display:block!important;z-index:2!important;touch-action:pan-y!important;
   cursor:ew-resize!important;background:transparent!important;}
 body.cs-v2 .cs-safe-range .cs-slider-touch-target[hidden]{display:none!important;}
 body.cs-v2 .cs-safe-range .cs-slider-shield{position:absolute!important;inset:0!important;z-index:3!important;
   display:flex!important;align-items:center!important;justify-content:center!important;
   width:100%!important;height:100%!important;min-height:40px!important;
   border:1px solid #6a573e!important;border-radius:9px!important;
   background:linear-gradient(90deg,#2b2a2eeb,#393025ec)!important;color:#f5cb8d!important;
   font-size:11px!important;font-weight:750!important;letter-spacing:.01em!important;touch-action:pan-y!important;}
 body.cs-v2 .cs-safe-range .cs-slider-shield[hidden]{display:none!important;}
 body.cs-v2 .cs-safe-range.cs-armed{outline:1px solid #ad8044;border-radius:7px;}
 body.cs-v2 #cs-inspector-body .text-effect-value .cs-safe-range{flex:1;}
 body.cs-v2 #cs-inspector-body .cs-photo-effect-thumbs canvas{max-width:100%!important;}
}
@media(max-width:380px){
 body.cs-v2 #cs-rail button{flex-basis:59px!important;width:59px!important;min-width:59px!important;}
 body.cs-v2 #cs-inspector-body .two{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}