/* FRAY 1850 — editorial workbench. No renderer or authentication changes. */
:root{--studio-radius:12px;--studio-copy:#f4f4ee;--studio-muted:#aab4ad}
body{font-family:var(--ui-font);font-size:13px}
body header{min-height:62px;padding:10px 20px;gap:16px}
body header .brandWordmark{font-size:29px!important;letter-spacing:-1.8px!important}
body header .brandMark{width:32px;height:32px;flex-basis:32px}
body header .brandLine{padding-right:20px}
body header .hint{display:none}
body header .btn,body header select{min-height:36px;font-size:12px}
body main{grid-template-columns:minmax(0,1fr) 352px}
body aside{width:100%;max-width:100%;min-width:0;border-left:1px solid var(--studio-edge)}
body aside>.tabbar,body aside>.inspectorBody{width:100%;max-width:100%;min-width:0}
body aside .group,body aside .motionSection,body aside .animationFold,body aside .ctl,body aside .fld{min-width:0;max-width:100%}
body aside :is(select,textarea,input[type=range]){max-width:100%;min-width:0}
body aside .ctl>label{min-width:0;gap:8px}
body aside .ctl>label>span{min-width:0;overflow-wrap:anywhere}
body aside .ctl>label>output{flex-shrink:0}
body .stage{background-image:radial-gradient(#68786b25 1px,transparent 1px)!important;background-size:24px 24px!important}
body .tabbar{padding:12px!important}
body .flow{border:0;background:transparent;padding:0;gap:4px}
body .flow .fbtn{min-height:42px;border-radius:8px!important}
body .flow .fbtn.active{background:var(--ux-action)!important;color:var(--ux-action-ink)!important;box-shadow:none;border-color:var(--ux-action)!important}
body .flow .fbtn.active .flabel,body .flow .fbtn.active .flabel:before{color:var(--ux-action-ink)!important}
body #workflowGuide{padding:10px 0 0;gap:8px;align-items:center}
body #workflowHint{font-size:12px;line-height:1.5;margin:0;max-width:24ch;color:var(--studio-muted)}
body #workflowNext{font-size:12px;min-height:34px;padding:6px 10px;white-space:nowrap}
body .inspectorBody{padding:14px 12px!important}
body .inspectorBody>.group{margin-bottom:12px}
body .inspectorBody>.group>h2{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 0;min-height:0}
body .ctl{margin:9px 0}
body .ctl label,body .fld{font-size:12px;line-height:1.5}
body .btn{min-height:34px;padding:7px 11px;font-size:12px;font-weight:650}
body .btn:hover:not(:disabled){transform:none}
body .btn:active:not(:disabled){transform:scale(.98)}
body :is(input,select,textarea){font-family:inherit}
body input[type=range]{height:18px}
body #styleStrengthControl{padding:10px 12px;background:var(--studio-rail);border:1px solid var(--studio-edge);border-radius:10px;margin-bottom:16px}
body #styleMixNote{display:none}
body #styleAccess{padding:10px 2px 0;border:0}
body #activeStyleName{font-size:16px;font-weight:750;letter-spacing:-.4px}
body #btnStyleParams{min-height:32px;font-size:11px}
body .styleCatalogHeader{font-size:20px;font-weight:750;letter-spacing:-.7px;margin:0 0 12px}
body .styleFilterBar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
body #styleSearch{width:100%;min-height:36px;font-size:12px}
body #catBtn{font-size:11px;min-height:36px;max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .styleCatalogMeta{font-size:11px;margin:8px 0 14px;color:var(--studio-muted)}
body #presets{display:block}
body #presets>.presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body #presets .cath{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin:12px 0 3px}
body #presets .preset{width:100%;min-width:0;margin:0;padding:10px;text-align:left;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-radius:10px!important}
body #presets .preset small{font-size:11px;line-height:1.4;color:var(--studio-muted)}
body #presets .preset.active{box-shadow:inset 3px 0 var(--ux-action);border-color:var(--ux-action)}
body #presets .preset:hover{transform:none}
body .brushLab{padding:12px!important;border-radius:12px}
body .brushLab>summary{font-size:18px;letter-spacing:-.5px;min-height:40px;padding:4px 0}
body .brushMaterials{gap:7px}
body .brushMaterial{padding:7px!important;border-radius:9px!important}
body .brushMaterial canvas{height:42px!important}
body .brushMaterial span{font-size:12px!important}
body .brushGrid{gap:12px!important;margin-top:16px}
body .brushGrid label{font-size:12px}
body .brushAdvanced{margin:16px 0 10px;padding:10px 0;border-top:1px solid var(--studio-edge);border-bottom:1px solid var(--studio-edge)}
body .brushAdvanced>summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--studio-muted);padding:4px 0}
body #styleCatalogLabel{font-size:19px;font-weight:750;color:var(--studio-copy)}
body .flow .fbtn .flabel:before{display:none}
body .flow .fbtn .ficon{display:inline-flex;width:17px;height:17px;align-items:center;color:inherit}
body .flow .fbtn .ficon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body .flow .fbtn{display:flex;justify-content:center;align-items:center;gap:6px}
body .brushOps{gap:4px}
body .brushOps button{font-size:11px;min-height:34px!important;padding:5px}
body .variationBar{padding:5px;border-radius:10px;gap:4px;box-shadow:0 8px 24px #0003}
body .variationBar .btn{min-height:34px}
body .variationHint{font-size:11px;color:var(--studio-muted)}
body #tlTransport{padding:8px 16px;min-height:48px}
body #tlDock.editing{max-height:34dvh}
body #tlDock .tlToolGroup{padding:7px 10px!important}
body #authDialog{width:min(400px,100vw);border-radius:16px 0 0 16px;padding:24px}
body .authBrand{font-size:11px;letter-spacing:.14em;color:var(--ux-action)}
body #authTitle{font-size:27px;letter-spacing:-1px;line-height:1.15;margin:14px 0}
body #authIntro{font-size:12px;line-height:1.5}
body .accountPrefs,body .cloudProjects{padding-top:16px;margin-top:20px;border-top:1px solid var(--studio-edge)}
body .accountPrefs h3,body .cloudProjects h3{font-size:13px;margin-bottom:12px}
body #authClose{position:sticky;bottom:0;width:100%;margin-top:20px}
body footer{font-size:11px;padding:8px 16px;min-height:0}
/* Empty canvas becomes an actual source launcher, not a tiny upload box. */
body.source-empty .headerSourceTools{display:none!important}
body.source-empty .stage{align-items:center;justify-content:center;min-height:0!important;padding:28px 24px!important}
body.source-empty #drop{width:min(760px,100%);padding:0!important;border:0!important;background:transparent!important;box-shadow:none;text-align:left;border-radius:0}
body #drop .startKicker{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--studio-muted)}
body #drop .startEditorial h2{font-size:clamp(36px,5.3vw,68px);font-weight:800;letter-spacing:-.055em;line-height:.99;margin:16px 0;color:var(--studio-copy)}
body #drop .startEditorial em{font-style:normal;color:var(--ux-action)}
body #drop .startEditorial p{font-size:14px;color:var(--studio-muted);margin:18px 0 28px}
body #drop>b{display:none}
body #drop .dropModes{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
body #drop .dropMode{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;min-height:122px;padding:0;overflow:hidden;border:1px solid var(--studio-edge);background:var(--studio-surface);box-shadow:none;border-radius:12px}
body #drop .dropMode::after{display:none}
body #drop .dropMode:hover{transform:translateY(-3px);border-color:var(--ux-action);box-shadow:none;background:var(--studio-raised)}
body #drop .sourceChoice{display:flex;align-items:center;gap:9px;padding:12px 14px;color:var(--studio-copy);font-size:15px;font-weight:750}
body #drop .sourceArrow{margin-left:auto;font-size:18px;color:var(--studio-muted)}
body #drop .dropModeIcon{width:20px;height:20px;flex:0 0 20px;background:none;border:0;box-shadow:none;color:var(--studio-copy)}
body #drop .dropModeIcon svg{width:20px;height:20px;stroke-width:1.7;filter:none}
body #drop .sourceArt{height:76px;display:block;position:relative;overflow:hidden;background:#202723;pointer-events:none}
body #drop .sourceArt-photo{background:linear-gradient(145deg,transparent 50%,#d8f06a 50% 70%,#71864b 70%),radial-gradient(circle at 70% 28%,#f0f4d7 0 9px,transparent 10px),#303a2c}
body #drop .sourceArt-video{background:repeating-linear-gradient(90deg,transparent 0 35px,#101413 35px 39px),repeating-linear-gradient(0deg,#bd8066 0 9px,#372a26 9px 14px,#d0a27a 14px 58px)}
body #drop .sourceArt-text{background:#c6adff;color:#272035}
body #drop .sourceArt-text:after{content:'Aa';position:absolute;right:18px;top:-24px;font:800 110px/1.2 var(--ui-font);letter-spacing:-12px}
body #drop .sourceArt-shape{background:radial-gradient(ellipse at 44% 30%,#e6eee8 0,#869c8e 25%,#34463b 44%,transparent 45%),#222a25}
body #drop .sourceArt-shape:after{content:'';position:absolute;width:70px;height:70px;left:50%;top:4px;border:1px solid #d8f06a;transform:rotate(35deg);border-radius:16px}
body #drop .sourceArt-abstract{background:repeating-radial-gradient(ellipse at 24% 150%,#d8f06a 0 7px,#303a27 8px 17px)}
body #drop .dropHint{font-size:12px;margin-top:16px;color:var(--studio-muted);text-align:center}
html[data-theme=light] body #drop .startEditorial h2{color:var(--studio-copy)}
html[data-theme=light] body .flow .fbtn.active .flabel,html[data-theme=light] body .flow .fbtn.active .flabel:before{color:var(--ux-action-ink)!important}
@media(min-width:1000px){body.source-empty .stage{min-height:calc(100dvh - 110px)!important}}
@media(max-width:900px){body main{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:680px){body header{padding:8px 12px;min-height:56px}body main{grid-template-columns:1fr}body.source-empty .stage{padding:30px 20px!important}body #drop .startEditorial h2{font-size:42px}body #drop .startEditorial p{margin-bottom:22px;font-size:13px}body #drop .dropModes{gap:8px}body #drop .dropMode{min-height:102px}body #drop .sourceArt{height:56px}body #drop .sourceChoice{padding:11px 9px;font-size:13px;gap:6px}body #drop .sourceArrow{font-size:15px}body .btn,body .srcbtn,body .fbtn{min-height:44px}body #tlDock.editing{max-height:40dvh}body .inspectorBody{padding:12px!important}body #authDialog{padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom))}body #presets .preset{min-height:70px}}
@media(prefers-reduced-motion:reduce){body #drop .dropMode:hover{transform:none}body button{transition:none!important}}

/* 1860 — one inspector surface, purposeful sections, no nested card tower. */
body aside{padding:0;gap:0;box-shadow:none;overflow:hidden}
body aside>.tabbar{flex:0 0 auto;padding:10px!important;background:var(--studio-surface);border-bottom:1px solid var(--studio-edge)}
body aside>.inspectorBody{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px!important;scrollbar-gutter:stable;gap:0}
body aside #workflowGuide{justify-content:flex-end;padding-top:6px}
body aside #workflowHint{display:none}
body aside #workflowNext{background:transparent!important;border:0!important;min-height:28px;padding:2px 6px;color:var(--studio-muted)!important;font-size:11px}
body aside #workflowNext:not(:disabled):hover{color:var(--ux-action)!important}
body aside .inspectorBody>.group.pop.open,body aside .inspectorBody>.group{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;margin:0 0 18px}
body aside .inspectorBody>.group>h2{padding:0 0 14px;margin:0 0 14px;min-height:0;font-size:18px;line-height:1.3;font-weight:750;text-transform:none;border-bottom:1px solid var(--studio-edge);text-wrap:balance}
body aside .inspectorBody>.group>h2:before,body aside .inspectorBody>.group>h2:after{display:none}
body aside :is(.motionSection,.creativePanel,.motionSection.native){padding:0!important;margin:18px 0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
body aside .motionEyebrow{font-size:11px;font-weight:750;text-transform:uppercase;color:var(--studio-muted);margin:0 0 12px}
body aside :is(.fld,.ctl){margin:0 0 14px!important}
body aside .fld{display:flex;flex-direction:column;align-items:stretch;gap:6px;font-size:12px}
body aside .fld>span,body aside .fld>label{color:var(--studio-muted);line-height:1.5}
body aside .ctl>label{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:6px;line-height:1.5}
body aside .ctl output{font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;background:var(--studio-rail);border:1px solid var(--studio-edge);border-radius:5px;padding:2px 6px;min-width:38px;text-align:center;color:var(--studio-copy)}
body aside :is(select,.txt,textarea){width:100%;height:auto;min-height:36px;padding:8px 10px;font-size:12px;line-height:1.4;border-radius:8px!important}
body aside input[type=range]{display:block;width:100%;height:20px;margin:0;padding:0;background:transparent!important;border:0;box-shadow:none}
body aside input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line2);border-radius:4px}
body aside input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:2px solid var(--studio-surface);border-radius:50%;background:var(--ux-action);box-shadow:0 0 0 1px var(--ux-action)}
body aside input[type=range]::-moz-range-track{height:4px;background:var(--line2);border-radius:4px}
body aside input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--studio-surface);border-radius:50%;background:var(--ux-action)}
body aside .note,body aside .creativeHelp,body aside .motionLead,body aside .previewSpeedHint{font-size:11px;line-height:1.5;padding:0!important;background:transparent!important;border:0!important;color:var(--studio-muted);text-wrap:pretty;margin:6px 0 12px}
body aside #animIntro,body aside #framesNote,body aside #nativeMotionLead{display:none}
body aside #loopSecNote{display:block;font-variant-numeric:tabular-nums;color:var(--studio-copy)}
body aside #btnPlay{width:100%;min-height:40px;background:var(--ux-action)!important;border-color:var(--ux-action)!important;color:var(--ux-action-ink)!important;margin-bottom:14px}
body aside .inspectorFold,body aside .postMotion{margin:12px 0 0!important;padding:0!important;background:transparent!important;border:0!important;border-top:1px solid var(--studio-edge)!important;border-radius:0!important;box-shadow:none!important}
body aside .inspectorFold>summary,body aside .postMotion>summary{display:list-item;list-style:disclosure-closed;padding:13px 0;min-height:42px;font-size:12px;font-weight:650;color:var(--studio-copy);cursor:pointer;background:transparent;border:0}
body aside .inspectorFold[open]>summary,body aside .postMotion[open]>summary{list-style:disclosure-open}
body aside .inspectorFoldBody,body aside .postMotionBody{padding:3px 0 8px}
body aside .inspectorFoldBody>.fld:last-child,body aside .inspectorFoldBody>.ctl:last-child{margin-bottom:0!important}
body aside .motionGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body aside .motionCard,body aside .nativeSceneCard{min-height:48px;padding:8px;font-size:12px;box-shadow:none}
body aside .saveImageBlock{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;align-items:end;padding:0;margin-bottom:20px;background:transparent;border:0}
body aside .saveImageBlock .fld{margin:0!important}
body aside #btnSave{min-height:38px}
body aside .frameRatioGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body aside .ratioBtn{min-height:34px;font-size:12px;padding:5px}
body aside #btnGif,body aside #btnVideo{background:var(--studio-raised)!important;color:var(--studio-copy)!important;border-color:var(--studio-edge)!important;min-height:38px}
body aside #renderNote{font-size:11px}
body aside #styleAccess{padding:10px 4px 2px}
body aside #styleAccess .paramsBtn{width:auto;margin:0;font-size:11px;min-height:30px}
body aside .styleCatalogHeader{margin:12px 0}
body aside .styleFilterBar .catbar{min-width:0}
body aside #catBtn{max-width:114px}
body aside .brushLab{border:0!important;background:transparent!important;padding:0!important}
body aside .brushLab>summary{border-bottom:1px solid var(--studio-edge);margin-bottom:14px}
body aside .brushGrid label{display:flex;flex-direction:column;gap:6px}
body aside .brushGrid input[type=color]{height:30px;width:100%;padding:2px;border:1px solid var(--studio-edge);border-radius:6px}
@media(max-width:680px){body aside>.inspectorBody{padding:14px!important;padding-bottom:calc(var(--workspace-dock-clearance,20px) + env(safe-area-inset-bottom))!important}body aside :is(select,.txt){min-height:44px;font-size:14px}body aside .inspectorFold>summary{min-height:44px}body aside .ratioBtn{min-height:44px}}