/* MOMENTLOOP PHOTO STUDIO 3 — five tools, one preview, phone-first.
   No decorative boxes nested within boxes. */
.editor-section{padding-top:6px;padding-bottom:36px}
.editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 0 10px}
.editor-head .backlink,.editor-reset{background:none;border:0;color:#1c2940;font-size:13px;font-weight:750;padding:10px 3px;white-space:nowrap}
.editor-reset{color:#d56c64}.editor-center-title{font-size:16px;font-weight:850;letter-spacing:-.5px}
.editor-grid{grid-template-columns:minmax(0,52%) minmax(0,48%);align-items:start;gap:24px}
.canvas-column{position:sticky;top:7px;background:#141e31;border-radius:17px;overflow:hidden;padding:0 0 8px}
.canvas-tools{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:8px 11px}
.studio-chip{margin-right:auto;font-size:10px;font-weight:800;letter-spacing:1.1px;color:#f5c4b3}
.canvas-tools button{min-height:33px;border:1px solid #ffffff45;border-radius:10px;background:#ffffff12;color:#f7f5f5;padding:6px 12px;font-size:11px;font-weight:750}
.canvas-tools button:active{background:#ffffff40}
.canvas-wrap{display:flex;justify-content:center;align-items:center;background:#131d2d!important;padding:0!important;border-radius:0!important;max-width:none!important;box-shadow:none!important;min-height:280px}
#artCanvas{display:block;width:auto!important;height:auto;max-height:69vh;max-width:100%;object-fit:contain;touch-action:none;border-radius:0!important;cursor:grab}
#artCanvas:active{cursor:grabbing}
.canvas-hint{display:block;color:#b2bdc9;font-size:10px;text-align:center;margin:9px 6px 3px}
.edit-controls{padding:0;min-width:0}
.studio-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid #e7ded8;gap:1px}
.studio-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:3px;padding:10px 2px 9px;border:0;border-bottom:3px solid transparent;background:none;color:#73818d;font-size:19px;line-height:1;cursor:pointer}
.studio-tab span{font-size:10px;font-weight:800;line-height:1.1;white-space:nowrap;letter-spacing:-.2px}
.studio-tab.active{color:#ef685c;border-bottom-color:#ef685c}
.studio-tab:focus-visible{outline:2px solid #ef685c}
.studio-panel{min-height:175px;animation:fadeTool .17s ease-out;padding:13px 1px 0}
@keyframes fadeTool{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.tool-title{display:flex;justify-content:space-between;gap:9px;align-items:center;margin:4px 0 12px}
.tool-title h2{font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.2;margin:0}
.tool-title>span{font-size:11px;color:#98a0aa}
.tool-title button{border:0;background:transparent;color:#e06a5c;font-weight:750;font-size:12px}
.tool-note{font-size:11px;line-height:1.5;color:#929a9f;margin:8px 0 14px}
.studio-range{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:11px 0 8px}
.studio-range label,.studio-range output{font-size:12px;font-weight:800;color:#29354a}
.studio-range output{color:#ee7566;font-variant-numeric:tabular-nums}
.studio-panel input[type=range]{accent-color:#fb7165;display:block;width:100%;cursor:pointer;height:25px;margin:0 0 12px}
.studio-panel .filter-list{display:flex;gap:9px;max-width:100%;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.studio-panel .filter-pill{scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:0;min-width:79px;max-width:79px;padding:6px 5px 8px;border-radius:13px;border:2px solid transparent;background:none;box-shadow:none;color:#677381;font-size:10px;line-height:1.25;white-space:normal}
.studio-panel .filter-pill.active{border-color:#f7796e;color:#c85f55;background:#fff2e9}
.studio-panel .filter-dot{width:61px;height:69px;border-radius:9px;flex-shrink:0;background-position:center;background-size:cover}
.look-clean{background:linear-gradient(135deg,#38465c,#efb498);color:#fff}
.adjust-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.adjust-control{min-width:0;padding:0 0 2px}.adjust-control input{margin-bottom:4px!important}
.crop-ratios{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 16px}
.ratio-btn{border:1px solid #e9dcd5;background:white;border-radius:12px;padding:10px 4px;min-height:57px;color:#2e3850;font-size:15px;font-weight:800}
.ratio-btn small{font-size:10px;font-weight:650;color:#86909a}
.ratio-btn.active{border:2px solid #ee796c;background:#fff2ec}
.crop-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 20px}
.crop-actions button{background:#fff;border:1px solid #e9dcd5;border-radius:12px;padding:11px 5px;color:#34435b;font-size:12px;font-weight:800;white-space:nowrap}
.template-list{grid-auto-columns:100px;max-width:100%;margin:0;padding:3px 3px 12px}
#panel-decorate textarea{font-size:15px;width:100%;max-width:none;min-height:72px;margin:0 0 13px}
#panel-decorate .sticker-list{margin:0;max-width:100%}
.editor-privacy{text-align:center;margin:13px 0 0!important}
.actions-column{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:0}
.actions-column .btn{flex:1 1 130px;white-space:nowrap;min-height:45px;font-size:12px;padding:11px 12px}
.actions-column .btn.ghost{flex:1 1 100%;background:none;border:1px solid #ead8c9}
.full-preview{border:0;border-radius:17px;padding:35px 12px 12px;background:#101929;max-width:100vw;max-height:100dvh;box-shadow:0 35px 90px #000b;position:fixed}
.full-preview::backdrop{background:#0a0f1bf2}
.full-preview img{display:block;max-width:calc(100vw - 40px);max-height:calc(100dvh - 70px);object-fit:contain;margin:auto}
.full-preview button{position:absolute;top:0;right:3px;border:0;background:transparent;color:white;padding:4px 12px;font-size:27px}
.editor-section .feedback{font-size:12px;line-height:1.5}
@media(max-width:850px){
 .editor-grid{display:flex;flex-direction:column;gap:0}
 .editor-section.shell{padding:0 0 40px!important}
 .editor-head{padding:4px 15px 8px}
 .canvas-column{position:sticky;top:0;z-index:14;width:100%;border-radius:0;padding-bottom:5px}
 .canvas-wrap{min-height:0;max-height:44svh;height:44svh}
 #artCanvas{height:auto!important;max-height:44svh;max-width:100%;width:auto!important;aspect-ratio:auto}
 .canvas-tools{padding:5px 12px}
 .canvas-hint{margin:3px 0 1px}
 .edit-controls{width:100%;padding:0 17px 35px;background:var(--warm)}
 .studio-tabs{position:relative;z-index:4;padding:5px 0 0;min-height:65px}
 .studio-panel{min-height:140px;padding-top:12px}
 .actions-column{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .actions-column .btn{width:100%;min-width:0;white-space:normal;font-size:12px}
 .actions-column .btn.ghost{grid-column:1/-1}
}
@media(max-width:390px){
 .adjust-list{gap:5px 12px}.studio-tab span{font-size:9px}
 .studio-panel .filter-pill{min-width:70px;max-width:70px}
 .studio-panel .filter-dot{width:54px;height:64px}
}

/* Make the editor immersive on mobile, not stacked under duplicate headers. */
@media(max-width:850px){body:has(#view-editor:not(.hidden)) .topbar,
 body:has(#view-editor:not(.hidden)) .creator-back,
 body:has(#view-editor:not(.hidden)) footer{display:none!important}
 body:has(#view-editor:not(.hidden)) .editor-head{height:46px}
 body:has(#view-editor:not(.hidden)) .canvas-wrap{height:43svh;max-height:43svh}
 body:has(#view-editor:not(.hidden)) #artCanvas{max-height:43svh}}