/* Video and photo editors (editor.html, photo.html). Loaded after style.css. */
.editor-page{background:#f4f6fb}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.ed{max-width:1440px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
.ed h4{font-size:14px;margin:6px 0 -6px;color:var(--ink)}

/* Empty state */
.ed-empty{display:grid;place-items:center;min-height:calc(100dvh - 190px);padding:12px 0}
.ed-drop{width:min(680px,100%);text-align:center;border:2px dashed #c7d2fe;border-radius:28px;padding:44px 22px;background:radial-gradient(70% 60% at 50% 0%,#eef2ff,#fff 70%);transition:border-color .2s,background .2s}
.ed-drop.drag{border-color:#7c5cff;background:#f5f3ff}
.ed-big-icon{width:84px;height:84px;margin:0 auto;border-radius:26px;background:var(--grad);display:grid;place-items:center;box-shadow:0 20px 40px -18px #7c5cff}
.ed-big-icon svg{width:42px;height:42px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-drop h1{font-size:clamp(34px,7vw,54px);letter-spacing:-2px;margin:20px 0 10px;line-height:1.05}
.ed-drop>p{color:var(--muted);font-size:16px;line-height:1.6;margin:0 auto 22px;max-width:460px}
.ed-drop .primary{min-height:54px;padding:14px 30px;font-size:16px}
.ed-drop .ed-hint{margin-top:14px}
.ed-drop .message{text-align:left;margin:16px auto 0;max-width:460px}
.ed-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.ed-chips span{font-size:12px;font-weight:700;color:#4f46e5;background:#eef2ff;border-radius:999px;padding:6px 12px}

/* Work area */
.ed-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ed-bar strong{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;color:var(--ink)}
.ed-bar-export{min-height:44px;padding:10px 20px}
.ed-icon-btn{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);padding:0}
.ed-icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ed-icon-btn#play svg,.ed-bigplay svg{fill:currentColor;stroke:none}
.ed-main{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
.ed-stage-wrap{position:sticky;top:12px;min-width:0}
.ed-stage{position:relative;height:min(62vh,640px);border-radius:22px;background:#0b1020 radial-gradient(60% 60% at 50% 50%,#17204a,#0b1020);display:grid;place-items:center;overflow:hidden}
.ed-canvas{position:relative;line-height:0;box-shadow:0 24px 60px -24px #000;border-radius:6px;overflow:hidden}
.ed-canvas canvas{display:block;width:100%;height:100%}
.ed-overlay{position:absolute;inset:0;touch-action:none;cursor:pointer}
.ed-overlay.pannable{cursor:grab}
.ed-overlay.texting{cursor:crosshair}
.ed-bigplay{position:absolute;width:72px;height:72px;border-radius:50%;border:0;background:#ffffffe6;color:#1e1b4b;display:grid;place-items:center;box-shadow:0 12px 30px -10px #000;pointer-events:auto}
.ed-bigplay svg{width:30px;height:30px;margin-left:4px}
.ed-transport{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap}
.ed-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--ink)}
.ed-out{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Timeline */
.ed-timeline{position:relative;height:66px;border-radius:14px;overflow:visible;background:#1e293b;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;margin:0 9px}
.ed-timeline>canvas{width:100%;height:100%;display:block;border-radius:14px}
.tl-shade{position:absolute;top:0;bottom:0;background:#0b1020c4;pointer-events:none}
#shade-l{border-radius:14px 0 0 14px}#shade-r{border-radius:0 14px 14px 0}
.tl-range{position:absolute;top:0;bottom:0;border-top:3px solid #ffb547;border-bottom:3px solid #ffb547;pointer-events:none}
.tl-handle{position:absolute;top:-4px;bottom:-4px;width:22px;margin-left:-11px;background:#ffb547;border-radius:8px;cursor:ew-resize;box-shadow:0 4px 12px -4px #000;z-index:2;touch-action:none}
.tl-handle:after{content:"";position:absolute;left:9px;right:9px;top:30%;bottom:30%;border-left:2px solid #7a4a00;border-right:2px solid #7a4a00;pointer-events:none}
.tl-handle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tl-cut{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,#ff4d8de6 0 6px,#ff4d8d80 6px 12px);pointer-events:none}
.tl-mark{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;background:#ff4d8d;pointer-events:none}
.tl-head{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px #0008;pointer-events:none;z-index:3}

/* Tool panel */
.ed-side{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;min-width:0}
.ed-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px;border-bottom:1px solid var(--line);background:#fafbff}
.ed-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px;border:0;border-radius:12px;background:none;color:#5a7194;font-size:11px;font-weight:700;min-height:58px}
.ed-tabs button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ed-tabs button[aria-selected=true]{background:var(--grad);color:#fff;box-shadow:0 10px 20px -12px #7c5cff}
.ed-panel{padding:18px;display:grid;gap:14px}
.ed-panel[hidden]{display:none}
.ed-panel .primary,.ed-panel .secondary{min-height:46px;font-size:14px}
.ed-field label{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.ed-field output{color:#7c5cff;font-weight:700;font-variant-numeric:tabular-nums}
.ed-field input[type=range]{width:100%;min-height:34px;accent-color:#7c5cff}
.ed-sliders{display:grid;gap:4px}
.ed-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ed-row{display:flex;gap:8px;flex-wrap:wrap}
.ed-row>*{flex:1 1 0}
.ed-chiprow{display:flex;flex-wrap:wrap;gap:8px}
.ed-chip{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px;color:var(--ink);transition:background .15s,color .15s}
.ed-chip[aria-pressed=true]{background:var(--grad);color:#fff;border-color:transparent}
.ed-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);margin:0}
.ed-check input{width:20px;height:20px;accent-color:#7c5cff;flex-shrink:0}
.ed-hint{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
.ed-summary{background:#f5f3ff;border:1px solid #e0e7ff;border-radius:14px;padding:12px 14px;font-size:14px;font-weight:600;color:#3730a3;line-height:1.6}
.ed-summary p{margin:0}
.ed-summary.warn{background:#fff7e6;border-color:#f6d9a3;color:#8a5a12}
.ed-list{display:grid;gap:6px}
.ed-list:empty{display:none}
.ed-list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:#fff1f6;color:#9d174d;font-size:13px;font-weight:600}
.ed-danger{color:#dc2626!important}
.ed-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ed-preset{border:2px solid transparent;border-radius:16px;padding:4px;background:none;display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--ink)}
.ed-preset canvas{width:100%;aspect-ratio:1;border-radius:12px;display:block;background:#e5e7eb}
.ed-preset[aria-pressed=true]{border-color:#7c5cff;background:#f5f3ff}
.ed-layers{display:flex;flex-wrap:wrap;gap:8px}
.ed-layers:empty{display:none}
.ed-layers .ed-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-text-editor{display:grid;gap:12px;padding-top:4px;border-top:1px dashed var(--line)}
.ed-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ed-swatch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1;padding:0}
.ed-swatch[aria-pressed=true]{box-shadow:0 0 0 3px #7c5cff}
.ed-swatches input[type=color]{width:42px;height:38px;padding:2px;border-radius:10px;border:1px solid var(--line);background:#fff;min-height:0}
.ed-music{display:grid;gap:12px;padding:12px;border-radius:14px;background:#f5f3ff}
.ed-music strong{font-size:14px;color:#4f46e5;overflow-wrap:anywhere}
.ed-stickers{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ed-stickers button{font-size:26px;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:#fff;padding:0;line-height:1}
.ed-stickers button:active{transform:scale(.92)}
.ed-job{width:min(520px,calc(100vw - 24px));padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.ed-job .job-card{margin:0}

/* Photo editor additions */
.ed-photo-stage{background:#0b1020 repeating-conic-gradient(#ffffff0a 0% 25%,transparent 0% 50%) 50%/24px 24px}
.ed-crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px #0b1020a8;touch-action:none;cursor:move}
.ed-crop-box:before,.ed-crop-box:after{content:"";position:absolute;inset:0;pointer-events:none;border:0 solid #ffffff59}
.ed-crop-box:before{left:33.33%;right:33.33%;border-left-width:1px;border-right-width:1px}
.ed-crop-box:after{top:33.33%;bottom:33.33%;border-top-width:1px;border-bottom-width:1px}
.ed-crop-box i{position:absolute;width:26px;height:26px;border:4px solid #fff;touch-action:none}
.ed-crop-box i[data-h=nw]{left:-5px;top:-5px;border-right:0;border-bottom:0;cursor:nwse-resize}
.ed-crop-box i[data-h=ne]{right:-5px;top:-5px;border-left:0;border-bottom:0;cursor:nesw-resize}
.ed-crop-box i[data-h=sw]{left:-5px;bottom:-5px;border-right:0;border-top:0;cursor:nesw-resize}
.ed-crop-box i[data-h=se]{right:-5px;bottom:-5px;border-left:0;border-top:0;cursor:nwse-resize}
.ed-compare{position:absolute;right:12px;bottom:12px;min-height:40px;padding:8px 14px;border-radius:999px;border:0;background:#ffffffe6;color:#1e1b4b;font-weight:700;font-size:13px;user-select:none;-webkit-user-select:none;touch-action:none}
.ed-badge{position:absolute;left:12px;top:12px;padding:6px 12px;border-radius:999px;background:#0b1020b3;color:#fff;font-size:12px;font-weight:700;pointer-events:none}
.ed-result{display:grid;gap:10px}

@media(max-width:960px){
.ed-main{grid-template-columns:1fr;gap:12px}
.ed-stage-wrap{position:static}
.ed-stage{height:min(48vh,440px);border-radius:18px}
.ed-tabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:6px;padding:8px}
.ed-tabs::-webkit-scrollbar{display:none}
.ed-tabs button{flex:0 0 68px}
.ed-side{border-radius:18px}
}
@media(max-width:480px){
.ed{padding:10px max(10px,env(safe-area-inset-right)) 24px max(10px,env(safe-area-inset-left))}
.ed-drop{padding:34px 16px;border-radius:22px}
.ed-stage{height:min(44vh,380px)}
.ed-bar-export{padding:10px 14px}
.ed-panel{padding:14px}
.ed-presets{grid-template-columns:repeat(3,1fr);gap:8px}
.ed-two{grid-template-columns:1fr}
}
@media(prefers-color-scheme:dark){
.editor-page{background:#0b1220}
.ed-drop{border-color:#33407a;background:radial-gradient(70% 60% at 50% 0%,#17204a,#0b1220 70%)}
.ed-drop.drag{background:#1b1f45}
.ed-chips span{background:#1b2547;color:#a5b4fc}
.ed-icon-btn,.ed-chip,.ed-swatches input[type=color],.ed-stickers button{background:#16223a;border-color:#2a3b58;color:var(--ink)}
.ed-side{background:#111b2c;border-color:var(--line)}
.ed-tabs{background:#0e1726;border-color:var(--line)}
.ed-tabs button{color:#93a8c9}
.ed-summary{background:#1b2547;border-color:#2b3870;color:#c7d2fe}
.ed-summary.warn{background:#2c2410;border-color:#5a4718;color:#f3cf86}
.ed-list-row{background:#3a1328;color:#fbcfe8}
.ed-preset[aria-pressed=true]{background:#1b2547}
.ed-music{background:#1b2547}
.ed-music strong{color:#a5b4fc}
.ed-swatch{border-color:#111b2c}
}