/* Refract edit tools: safe-zone checker, cover maker, caption length checker.
   Everything is scoped to .et and built on the tokens and components in base.css. */
.et{container:et/inline-size;position:relative;margin:30px 0 0;padding:24px;border-radius:var(--r-xl);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 180px),var(--panel);box-shadow:var(--shadow-1);color:var(--text-primary);font-family:var(--body);font-size:1rem;line-height:1.5;text-align:left;min-width:0;overflow-wrap:break-word}
.et:empty{min-height:300px}
.et [hidden]{display:none!important}
@media (max-width:520px){.et{padding:16px;border-radius:var(--r-lg)}}

/* header row */
.et-head{display:flex;align-items:center;gap:12px}
.et-mark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line-2);background:var(--grad-soft),var(--panel-2);color:var(--text-primary)}
.et-mark svg{width:19px;height:19px}
.et-title{margin:0;font-family:var(--display);font-weight:500;font-size:1.32rem;line-height:1.15;letter-spacing:-.015em}
.et-badge{margin-left:auto;flex:none}
.et-sub{margin:10px 0 20px;max-width:62ch;color:var(--text-secondary);font-size:.98rem}
@container et (max-width:420px){.et-badge{display:none}.et-title{font-size:1.18rem}.et-sub{font-size:.94rem;margin-bottom:16px}}

/* drop zone (a label for the visually hidden file input) */
.et-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:230px;padding:30px 20px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:radial-gradient(120% 80% at 50% 0%,rgba(183,162,255,.08),transparent 62%),var(--sunken);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out),transform var(--spring-press-dur) var(--spring-press)}
.et-drop:hover{border-color:#7489A0}
.et-drop:active{transform:scale(.99)}
.et.is-drag .et-drop{border-color:var(--beam-reels);background-color:rgba(183,162,255,.09);transform:scale(1.01)}
.et-file:focus-visible+.et-drop{outline:2px solid var(--beam-reels);outline-offset:3px}
.et-drop-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text-primary);transition:transform var(--spring-press-dur) var(--spring-press)}
.et-drop-ic svg{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){.et-drop:hover .et-drop-ic{transform:translateY(-2px)}}
.et-drop-t{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;line-height:1.25}
.et-coarse{display:none}
@media (pointer:coarse){.et-fine{display:none}.et-coarse{display:inline}}
.et-drop-b{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:var(--accent);color:#0A0F16;font-weight:600;font-size:.94rem;transition:background-color var(--dur-micro) var(--ease-out)}
.et-drop:hover .et-drop-b{background:#fff}
.et-drop-h{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--text-secondary)}
.et-drop-busy{display:none;align-items:center;gap:10px;font-size:.94rem;color:var(--text-secondary)}
.et-drop-busy .spin{display:block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.et-drop.is-busy{cursor:progress}
.et-drop.is-busy .et-drop-b,.et-drop.is-busy .et-drop-h{display:none}
.et-drop.is-busy .et-drop-busy{display:inline-flex}
@media (pointer:coarse){.et-drop{min-height:200px}.et-drop-b{min-height:44px;padding:11px 22px}}

/* workspace: one column on phones, stage + controls side by side when there is room */
.et-work{display:grid;gap:22px}
.et-stagecol,.et-side,.et-limmain,.et-limside{display:grid;gap:20px;align-content:start}
.et-stagecol{gap:14px}
@container et (min-width:640px){
  .et-sz{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:start}
  .et-cw{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start}
  .et-lim{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
  .et-sz .et-stagecol,.et-cw .et-stagecol{position:sticky;top:84px}
  .et-lim .et-ta{min-height:300px}
}
.et-in>*{animation:etRise var(--spring-panel-dur) var(--spring-panel) both,etFade .24s var(--ease-out) both}
.et-in>*:nth-child(2){animation-delay:60ms}
@keyframes etRise{from{transform:translateY(14px)}to{transform:none}}
@keyframes etFade{from{opacity:0}to{opacity:1}}
.et-lim>*{animation:etRise var(--spring-panel-dur) var(--spring-panel) both,etFade .24s var(--ease-out) both}
.et-lim>*:nth-child(2){animation-delay:60ms}

.et-fs{margin:0;padding:0;border:0;min-width:0}
.et-fs>legend.lbl{padding:0;float:none;width:100%}
.et .help{margin-top:8px;font-size:.86rem;line-height:1.45}
.et .lbl{margin-bottom:10px}

/* segmented controls stretched to the full width, long or short labels by container width */
.et .seg.et-full{display:flex;width:100%}
.et .seg.et-full label{flex:1 1 0;min-width:0}
.et .seg.et-full span{text-align:center;overflow:hidden;text-overflow:ellipsis}
.et .seg label{cursor:pointer}
.et .seg span{transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.et .seg label:hover input:not(:checked)+span{color:var(--text-primary)}
.et-l,.et-s{font-style:normal}
.et-s{display:none}
@container et (max-width:440px){.et-l{display:none}.et-s{display:inline}}
.et-side{container:etside/inline-size}
@container etside (max-width:380px){.et-l{display:none}.et-s{display:inline}}
.et .et-plat input:checked+span{font-weight:600}
.et .et-plat input[value="tiktok"]:checked+span{background:var(--beam-tiktok)}
.et .et-plat input[value="reels"]:checked+span{background:var(--beam-reels)}
.et .et-plat input[value="shorts"]:checked+span{background:var(--beam-youtube)}

/* 9:16 frame with the platform overlays */
.et-frame{position:relative;width:100%;max-width:calc(min(64vh,600px)*.5625);max-width:calc(min(64svh,600px)*.5625);aspect-ratio:9/16;margin:0 auto;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line-2),0 22px 50px rgba(0,0,0,.45);container-type:inline-size;isolation:isolate;transition:box-shadow var(--dur-ui) var(--ease-out)}
.et-media{position:absolute;inset:0}
.et-m{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.et-frame.is-fit .et-m{object-fit:contain}
.et-ov{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--dur-ui) var(--ease-out)}
.et-frame[data-p="tiktok"] .et-ov[data-p="tiktok"],.et-frame[data-p="reels"] .et-ov[data-p="reels"],.et-frame[data-p="shorts"] .et-ov[data-p="shorts"]{opacity:1}
.et-z{position:absolute;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,rgba(var(--c),.30) 0 2px,transparent 2px 9px),linear-gradient(rgba(var(--c),.16),rgba(var(--c),.16)),rgba(10,15,22,.34)}
.et-z b{display:block;padding:.32em .7em;border-radius:999px;background:rgba(8,12,18,.8);color:rgb(var(--c));font-family:var(--mono);font-weight:400;font-size:9px;font-size:clamp(8.5px,3.3cqi,12px);line-height:1.2;letter-spacing:.02em;white-space:nowrap}
.et-z-r b{writing-mode:vertical-rl;padding:.7em .32em}
.et-safe{position:absolute;border:1.5px dashed rgb(var(--c))}
.et-safe span{position:absolute;left:5px;top:5px;padding:.25em .6em;border-radius:999px;background:rgba(8,12,18,.72);color:rgb(var(--c));font-family:var(--mono);font-size:8px;font-size:clamp(8px,2.8cqi,11px);line-height:1.2;white-space:nowrap}
.et.is-drag .et-frame,.et.is-drag .et-cvwrap{box-shadow:0 0 0 2px var(--beam-reels),0 22px 50px rgba(0,0,0,.45)}

/* player and sliders */
.et-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;max-width:calc(min(64vh,600px)*.5625 + 40px);margin:0 auto}
.et-scrub{display:grid;gap:2px}
.et-time{font-family:var(--mono);font-size:.74rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.et-scrub .et-time{justify-self:end;line-height:1}
.et-ib{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text-primary);transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--spring-press-dur) var(--spring-press)}
.et-ib svg{width:18px;height:18px}
.et-ib:hover{background:rgba(255,255,255,.08);border-color:var(--border-strong)}
.et-ib:active{transform:scale(.95)}
.et-ib[aria-pressed="true"]{border-color:rgba(183,162,255,.6);background:rgba(183,162,255,.12)}
.et-range{--p:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y}
.et-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--accent) var(--p),rgba(160,180,200,.22) var(--p))}
.et-range::-moz-range-track{height:6px;border-radius:999px;background:rgba(160,180,200,.22)}
.et-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
.et-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(8,12,18,.55);transition:transform var(--spring-press-dur) var(--spring-press)}
.et-range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(8,12,18,.55)}
.et-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.et-range:focus{outline:none}
.et-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--beam-reels)}
.et-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--beam-reels)}
@media (pointer:coarse){
  .et .seg span{line-height:22px}
  .et-ib{width:44px;height:44px}
  .et-range{height:44px}
  .et-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-10px}
  .et-range::-moz-range-thumb{width:26px;height:26px}
}

/* legend and notes */
.et-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.et-legend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--sunken);font-size:.94rem;line-height:1.3}
.et-legend i{width:12px;height:12px;border-radius:4px;background:rgba(var(--c),.35);box-shadow:inset 0 0 0 1.5px rgb(var(--c))}
.et-legend b{font-family:var(--mono);font-weight:400;font-size:.76rem;color:var(--text-secondary);white-space:nowrap}
@container et (max-width:420px){.et-legend li{grid-template-columns:auto minmax(0,1fr);row-gap:2px}.et-legend b{grid-column:2}}
.et-legend.et-swap li{animation:etFade .24s var(--ease-out) both}
.et-legend.et-swap li:nth-child(2){animation-delay:30ms}
.et-legend.et-swap li:nth-child(3){animation-delay:60ms}
.et-legend.et-swap li:nth-child(4){animation-delay:90ms}
.et-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:.86rem;line-height:1.45;color:var(--text-secondary)}
.et-note svg{width:16px;height:16px;flex:none;margin-top:1px}

/* actions, status and privacy line */
.et-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.et-actions .btn svg{width:17px;height:17px}
.et-actions .btn.is-busy{opacity:.7;cursor:progress}
@container et (max-width:460px){.et-sz .et-actions .btn:not(.btn-q),.et-cw .et-actions .btn:not(.btn-q){flex:1 1 100%}}
.et-msg{font-size:.92rem;line-height:1.45;color:var(--text-secondary)}
.et-msg:not(:empty){margin-top:14px}
.et-msg.is-err{color:var(--danger)}
.et-msg.is-ok{color:var(--text-primary)}
.et-msg .linkbtn{font-size:inherit;margin-left:4px}
.et-okic{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;vertical-align:-4px;border-radius:50%;background:var(--success);color:#0A0F16;animation:etPop var(--spring-pop-dur) var(--spring-pop) both}
.et-okic svg{width:13px;height:13px}
@keyframes etPop{from{transform:scale(.4)}to{transform:none}}
.et>.et-msg:not(:empty){margin-top:16px}
.et-priv{display:flex;align-items:center;gap:8px;margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.74rem;line-height:1.45;letter-spacing:.02em;color:var(--text-secondary)}
.et-priv svg{width:15px;height:15px;flex:none;color:var(--success)}

/* cover maker */
.et-cvwrap{position:relative;width:100%;margin:0 auto;border-radius:16px;transition:box-shadow var(--dur-ui) var(--ease-out)}
.et-cvwrap[data-size="story"]{max-width:calc(min(64vh,620px)*.5625);max-width:calc(min(64svh,620px)*.5625)}
.et-cvwrap[data-size="post"]{max-width:calc(min(64vh,620px)*.8);max-width:calc(min(64svh,620px)*.8)}
.et-canvas{display:block;width:100%;height:auto;border-radius:16px;background:#000;box-shadow:0 0 0 1px var(--line-2),0 22px 50px rgba(0,0,0,.45)}
.et-gridg{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity var(--dur-ui) var(--ease-out)}
.et-gridg.is-on{opacity:1}
.et-gridg::before,.et-gridg::after{content:"";position:absolute;left:0;right:0;height:12.5%;background:rgba(8,12,18,.66)}
.et-gridg::before{top:0;border-bottom:1.5px dashed rgba(241,236,226,.9)}
.et-gridg::after{bottom:0;border-top:1.5px dashed rgba(241,236,226,.9)}
.et-gridg span{position:absolute;left:50%;top:12.5%;translate:-50% 8px;padding:.3em .75em;border-radius:999px;background:rgba(8,12,18,.8);color:var(--accent);font-family:var(--mono);font-size:.68rem;line-height:1.2;white-space:nowrap}
.et-pick{padding:14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--sunken)}
.et-pickrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.et-pickrow .lbl{margin:0}
.et-scrubrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:6px}
.et-pickact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px}
.et-pickact .help{margin:0}
.et-pickact .btn svg{width:15px;height:15px}
.et-picked{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.et-picked p{font-size:.94rem;color:var(--text-secondary)}
.et-picked b{font-family:var(--mono);font-weight:400;color:var(--text-primary)}
.et-hl{min-height:0;resize:none;font-family:var(--display);font-weight:500;font-size:1.1rem;line-height:1.3}
.et-focus{margin-top:16px}
.et-sws{display:flex;flex-wrap:wrap;gap:8px}
.et-sw{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;cursor:pointer}
.et-sw input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.et-sw span{width:28px;height:28px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(10,15,22,.25);transition:transform var(--spring-press-dur) var(--spring-press),box-shadow var(--dur-micro) var(--ease-out)}
.et-sw input:checked+span{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--sw)}
.et-sw:active span{transform:scale(.92)}
.et-sw input:focus-visible+span{outline:2px solid var(--beam-reels);outline-offset:7px}
.et-hold{position:absolute;width:1px;height:1px;overflow:hidden;opacity:.01;pointer-events:none;left:0;top:0}
.et-hold video{width:1px;height:1px}
@media (pointer:coarse){.et-sw{width:44px;height:44px}.et-ctl .toggle{min-height:44px}}

/* caption length checker */
.et-ta{min-height:200px;font-size:1rem;line-height:1.55}
.et-stats{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-family:var(--mono);font-size:.76rem;color:var(--text-secondary)}
.et-limmain{gap:0}
.et-limmain .et-out{margin-top:16px}
.et-lim .et-actions .btn svg{width:16px;height:16px}
@container et (max-width:460px){.et-lim .et-actions .btn{flex:1 1 100%}}
.et-meters{display:grid;gap:10px}
.et-meter{padding:13px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--sunken);transition:border-color var(--dur-micro) var(--ease-out)}
.et-mtop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
.et-meter .tag{font-size:.74rem;color:var(--text-over)}
.et-mval{font-family:var(--mono);font-size:.8rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.et-mval b{font-weight:400;color:var(--text-primary)}
.et-bar{height:6px;margin-top:10px;border-radius:999px;background:rgba(160,180,200,.12);overflow:hidden}
.et-bar i{display:block;height:100%;border-radius:999px;background:rgb(var(--c));transform:scaleX(0);transform-origin:left center;transition:transform var(--spring-press-dur) var(--spring-press),background-color var(--dur-micro) var(--ease-out)}
.et-mnote{margin-top:8px;font-size:.84rem;line-height:1.4;color:var(--text-secondary)}
.et-mnote+.et-mnote{margin-top:4px}
.et-meter.is-near .et-mnote[data-note]{color:var(--warn)}
.et-meter.is-over{border-color:rgba(255,140,140,.4)}
.et-meter.is-over .et-bar i{background:var(--danger)}
.et-meter.is-over .et-mnote[data-note],.et-meter.is-over .et-mval b{color:var(--danger)}
.et-mnote.is-bad{color:var(--danger)}
.et-igwrap{margin-top:4px}
.et-ig{margin:0;padding:14px 16px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:#000}
.et-igacts{display:flex;align-items:center;gap:14px;color:#F5F5F5}
.et-igacts svg{width:22px;height:22px}
.et-igsave{margin-left:auto;display:inline-flex}
.et-igcap{margin-top:10px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:18px;color:#F5F5F5;white-space:pre-wrap;overflow-wrap:anywhere}
.et-igcap b{font-weight:600}
.et-igtag{color:#E0F1FF}
.et-igmore,.et-igph{color:#A8A8A8}
.et-ig .help{margin-top:12px;font-size:.8rem;color:var(--text-tertiary)}