:root{color-scheme:dark;--bg:#0c0f11;--sidebar:#101617;--card:#161c1e;--panel:#1a2225;--line:#303b40;--text:#f0f4f0;--muted:#98a9ae;--accent:#b9ed91;--blue:#4e93b8;--amber:#d9b980;--danger:#e7a6a3}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer;color:var(--text);border:1px solid #47575b;border-radius:7px;padding:9px 13px;background:#232d31;white-space:nowrap}button:hover{background:#354447}button:disabled{opacity:.4;cursor:not-allowed}.app{display:flex;min-height:100vh}aside{width:245px;position:sticky;top:0;height:100vh;flex:0 0 245px;padding:27px 18px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:16px;overflow:auto}
.logo{color:var(--text);font-size:11px;letter-spacing:2.5px;text-decoration:none;display:block}.logo strong{display:block;letter-spacing:1px;font-size:26px;font-weight:700}.logo small{display:block;color:var(--accent);font-size:10px;letter-spacing:1px;margin-top:4px}.return{color:var(--muted);font-size:12px;text-decoration:none}.return:hover{color:white}
.primary{color:#152111;border:0;background:var(--accent);font-weight:750;padding:13px 15px;border-radius:7px;white-space:normal}.primary:hover{background:#d5ffb3}.side-label,.eyebrow{color:var(--muted);letter-spacing:2px;font-size:10px;font-weight:650}.side-label{margin-top:15px}.side-note{margin-top:auto;color:#788b8d;font-size:11px}.side-project{width:100%;display:block;text-align:left;margin:7px 0;padding:10px;border-radius:7px;white-space:normal}.side-project.active{color:var(--accent);background:#253326;border-color:#536d4c}
main{width:calc(100% - 245px);max-width:1700px;min-width:0;padding:0 30px 42px}header{display:flex;justify-content:space-between;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding:18px 0 20px}h1{font-size:31px;letter-spacing:-.8px;margin:1px 0;font-weight:560}h2{font-size:15px;font-weight:650;letter-spacing:.5px;margin:0}#status{font-size:12px;color:var(--accent);max-width:470px;overflow-wrap:anywhere;text-align:right}section{min-width:0}#welcome{padding:7vh 8px;max-width:650px}#welcome h2{font-size:40px;line-height:1.2;font-weight:500}#welcome p{color:var(--muted);font-size:17px;max-width:580px}#welcome button{margin-top:16px}
#workspace{padding-top:25px}.top-grid{display:grid;grid-template-columns:minmax(360px,1.4fr) minmax(260px,1fr);gap:20px}.preview,.library,.timeline-section,.inspector,.export-panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.section-top>span{font-size:11px;color:var(--muted)}.screen{background:#070a0b;min-height:250px;height:330px;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.screen video{width:100%;height:100%;object-fit:contain;background:#050707}#preview-placeholder{position:absolute;text-align:center;padding:10px;color:var(--muted);pointer-events:none}.transport{display:flex;gap:11px;align-items:center;justify-content:center;margin-top:14px}.transport .play{background:var(--accent);color:#152111;font-size:18px;width:47px;height:44px}.transport #timecode{margin:auto;color:var(--text);font:12px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.library{display:flex;flex-direction:column;min-height:420px}.file-add{border:1px dashed #657b6e;border-radius:9px;background:#1c2c25;text-align:center;padding:20px 12px;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer}.file-add:hover{background:#253b2c}#media-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.assets{flex:1;max-height:235px;overflow:auto;margin-top:12px}.asset{padding:11px 6px;border-bottom:1px solid #2c373b;display:flex;align-items:center;justify-content:space-between;gap:12px}.asset-info{min-width:0}.asset-title{font-size:12px;word-break:break-word}.asset-sub{font-size:11px;color:var(--muted)}.asset button{font-size:11px;padding:7px}.hint{font-size:12px;color:var(--muted);margin:12px 0 0}
.timeline-section{margin-top:21px;min-width:0}.zoom{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11px}.zoom input{accent-color:var(--accent);width:140px}.zoom output{font-family:monospace;min-width:65px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}.toolbar button{font-size:12px;padding:8px 12px}.timeline-layout{display:flex;min-height:196px;border:1px solid #3b4a4e;border-radius:7px;overflow:hidden}.track-labels{flex:0 0 94px;display:grid;grid-template-rows:36px 78px 78px;background:#131a1c;border-right:1px solid var(--line);font-size:11px;letter-spacing:.2px}.track-labels>div{display:flex;align-items:center;padding:0 8px;border-bottom:1px solid #334348}.ruler-label{color:var(--muted)}.video-label{color:#8dc9ef}.audio-label{color:#e5c48d}.timeline-scroll{flex:1;min-width:0;overflow:auto;background:#111719;scrollbar-color:#52665a #172022}.timeline{position:relative;height:192px;min-width:700px;user-select:none}.ruler{height:36px;background:#1d2528;position:relative;border-bottom:1px solid #334348}.tick{position:absolute;top:0;height:100%;font:10px monospace;color:#afbbb7;padding:5px 5px;border-left:1px solid #445156}.video-track,.audio-track{position:relative;height:78px;border-bottom:1px solid #344347}.video-track{background:repeating-linear-gradient(90deg,#142026 0,#142026 48px,#15242b 48px,#15242b 96px)}.audio-track{background:repeating-linear-gradient(90deg,#201f18 0,#201f18 48px,#252319 48px,#252319 96px)}.clip{position:absolute;top:7px;height:64px;overflow:hidden;text-align:left;white-space:normal;border:1px solid #779abc;border-radius:5px;background:linear-gradient(140deg,#29546d,#214254);padding:5px 7px;font-size:11px;color:#e9f4f9;cursor:pointer}.clip b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip small{display:block;opacity:.85}.clip.audio{background:linear-gradient(135deg,#6a4f2a,#49371f);border-color:#b99660;color:#fff0d5}.clip.selected{outline:2px solid var(--accent);outline-offset:1px;z-index:2}.clip:hover{filter:brightness(1.2)}.audio-pattern{height:21px;margin-top:4px;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0px,transparent 3px,#f6d9a3 3px,#f6d9a3 4px,transparent 5px,transparent 8px);mask-image:linear-gradient(90deg,#0005,#000,#000b)}.playhead{position:absolute;z-index:6;left:0;top:0;bottom:0;width:2px;background:#ff7c66;pointer-events:none}.playhead:before{content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #ff7c66}
.bottom-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:21px}.fields{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:8px 15px}.fields label{font-size:11px;color:var(--muted)}.fields input{width:100%;background:#101719;border:1px solid #44545a;border-radius:6px;color:var(--text);padding:9px;margin-top:5px}.secondary{margin-top:12px}.export-panel p{color:var(--muted);font-size:13px}.export-panel .primary{width:100%;margin-top:11px}#export-status{min-height:25px}.download{display:block;text-align:center;color:#1a2b13;background:var(--accent);border-radius:7px;text-decoration:none;padding:10px;margin-top:10px;font-weight:700}#result-player{width:100%;max-height:210px;border-radius:8px;margin-top:14px;background:#050707}
[hidden]{display:none!important}
@media(max-width:1100px){.top-grid,.bottom-grid{grid-template-columns:1fr}.screen{height:360px}.library{min-height:200px}.assets{max-height:200px}}
@media(max-width:700px){.app{display:block}aside{position:relative;width:100%;height:auto;gap:10px;flex-direction:column}.side-note{display:none}#project-list{display:flex;gap:5px;overflow:auto}.side-project{min-width:140px}main{width:100%;padding:0 12px 30px}.top-grid{display:block}.library{margin-top:16px}.screen{height:290px}.transport{flex-wrap:wrap}.zoom{width:100%;justify-content:flex-end}.timeline-section .section-top{flex-wrap:wrap}.timeline-layout{min-height:190px}.track-labels{flex-basis:72px}.toolbar{gap:4px}.toolbar button{font-size:11px}.fields{grid-template-columns:1fr 1fr}h1{font-size:24px}}

/* SCALBIT CINEMA v0.2 — frame-by-frame filmstrip and mouse scrubbing */
.frame-info{font:11px ui-monospace,Consolas,monospace;color:#b4d8e9;white-space:nowrap}
.transport{flex-wrap:wrap}
.transport #timecode{margin:0 5px 0 auto}
.zoom output{min-width:78px;font-variant-numeric:tabular-nums}
.zoom input{min-width:150px;width:200px}
.timeline-scroll{cursor:crosshair;overscroll-behavior:contain}
.ruler{cursor:grab;touch-action:pan-x}
.ruler:active,.timeline-scroll.scrubbing .ruler{cursor:grabbing}
.playhead{width:16px!important;transform:translateX(-8px);background:transparent!important;
  pointer-events:auto;cursor:ew-resize;touch-action:none}
.playhead::after{content:"";position:absolute;left:7px;top:0;bottom:0;
  width:2px;background:#ff826d;pointer-events:none}
.playhead::before{left:2px!important;border-top:11px solid #ff826d!important;
  z-index:1}
.clip{padding:6px 8px;isolation:isolate}
.clip b,.clip small{position:relative;z-index:3;display:block;
  width:max-content;max-width:100%;padding:1px 4px;
  text-shadow:0 1px 3px #000;background:#101a20a0;border-radius:3px}
.clip small{margin-top:2px;max-width:100%;font-size:10px}
.filmstrip{position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;background:#192c36}
.frame-tile{position:absolute;top:0;bottom:0;overflow:hidden;
  border-right:1px solid #7d93a1a0}
.frame-tile img{display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.78);pointer-events:none}
.frame-index{position:absolute;right:3px;bottom:3px;z-index:1;
  color:#fff;font:10px ui-monospace,Consolas,monospace;
  text-shadow:0 1px 3px #000;background:#142026c7;border-radius:3px;
  padding:1px 3px}
@media(max-width:800px){.transport #timecode{margin:auto}.zoom input{width:145px;min-width:120px}}


/* SCALBIT CINEMA v0.3 — waveform is a real downsampled audio signal.
   The scale is relative to the loudest peak in the source, not dB SPL. */
.audio-label{display:flex!important;flex-direction:column;align-items:flex-start!important;
  justify-content:center!important;gap:3px;color:#f2d5a0}
.audio-label strong{font-size:11px;font-weight:650}
.amplitude-scale{font:9px/1.15 ui-monospace,Consolas,monospace;letter-spacing:-.35px;
  white-space:nowrap;color:#d7bd8e}
.clip.audio{background:linear-gradient(135deg,#594321,#362a19);
  border-color:#b99660}
.waveform-canvas{position:absolute;top:0;z-index:1;pointer-events:none;
  display:block;max-width:none;height:100%}
.clip.audio b,.clip.audio small{z-index:3;position:relative;
  color:#fff4df;background:#211809af;border-radius:3px;max-width:100%}
.audio-track{background:repeating-linear-gradient(90deg,#211f18 0,
  #211f18 50px,#262319 50px,#262319 100px)}
#undo:disabled{opacity:.5;cursor:not-allowed}


/* CINEMA Montaż Wideo 0.4 — artwork overlay and safe media management */
#image-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.image-add{margin-top:9px;color:#c3b9fa;background:#242139;border-color:#706488}
.image-add:hover{background:#312c49}
.asset-actions{display:flex;gap:5px;flex:0 0 auto;align-items:center}
.asset-actions button{font-size:11px;padding:7px 9px}
.delete-icon{color:#f6b3ad;border:1px solid transparent;background:transparent;
  font-size:17px;min-width:30px;padding:5px 6px;line-height:1.35;border-radius:6px}
.delete-icon:hover{background:#5d292b;border-color:#915255;color:#ffe2d9}
.side-project-row{display:flex;gap:2px;align-items:center;margin:6px 0;
  border:1px solid #3d4e53;border-radius:7px;background:#222d31}
.side-project-row.active{border-color:#6f9766;background:#273528}
.side-project-title{min-width:0;flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;
  border:0;background:transparent;padding:11px 9px;color:#eee;font-weight:500}
.side-project-title:hover{background:#2a3a3d}
.deleted-montages{border-top:1px solid var(--line);padding:10px 0 5px;color:#aab5af;font-size:12px}
.deleted-montages summary{cursor:pointer;user-select:none;color:#e3bfb0}
.deleted-montages summary span{background:#3b4142;border-radius:20px;padding:1px 7px;margin-left:5px}
.deleted-montage-row{display:flex;gap:6px;align-items:center;justify-content:space-between;
  padding:7px 3px;border-bottom:1px solid #2e393d}
.deleted-montage-row span{min-width:0;overflow-wrap:anywhere}
.restore-small{font-size:11px;padding:5px 6px;color:#b9ed91}
.track-labels{grid-template-rows:36px 78px 78px 78px!important}
.timeline,.timeline-layout{min-height:270px!important}
.timeline{height:270px!important}
.image-label{display:flex;align-items:center;padding:0 8px;color:#e6c1f2;
  font-size:11px;font-weight:700}
.image-track{height:78px;position:relative;background:
  repeating-linear-gradient(90deg,#241c2d 0,#241c2d 48px,#2b2036 48px,#2b2036 96px);
  border-bottom:1px solid #483c53;cursor:crosshair}
.image-clip{height:62px;top:7px;background:#5b4476;border:1px solid #bf91e4;
  padding:0 12px 0 0;display:flex;align-items:center;gap:5px;
  color:#fff;cursor:grab;touch-action:none;overflow:hidden;user-select:none}
.image-clip:hover{background:#76528f}
.image-clip.dragging{cursor:grabbing;z-index:5;outline:2px solid #cff3af}
.image-clip-thumb{height:58px;min-width:35px;width:58px;max-width:45%;
  object-fit:contain;background:#231d2b;pointer-events:none;flex:0 1 auto}
.image-clip-name{flex:1;font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;pointer-events:none}
.image-resize{position:absolute;right:0;top:0;bottom:0;width:13px;display:flex;
  align-items:center;justify-content:center;background:#d8b0ed;color:#2a1138;
  font-size:11px;font-weight:800;cursor:ew-resize;touch-action:none;z-index:4}
.image-resize:hover{background:#e6d0fa}
.overlay-preview{pointer-events:none;position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.overlay-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none}
.screen #preview-placeholder{z-index:3}
#selected-label{overflow-wrap:anywhere}

\n.overlay-preview{inset:auto!important;left:50%;top:50%;transform:translate(-50%,-50%)}\n
/* v0.5: independent preview canvas for 9:16 and 16:9 media */
.screen{height:400px;min-height:330px;position:relative;display:flex;justify-content:center;
  align-items:center;background:#080a0a;border-radius:9px;overflow:hidden}
.canvas-stage{position:relative;background:#050606;overflow:hidden;
  border:1px solid #38464b;box-shadow:0 3px 22px #0006}
.canvas-stage[data-aspect="16:9"]{width:min(100%,710px);height:auto;max-height:100%;aspect-ratio:16/9}
.canvas-stage[data-aspect="9:16"]{height:100%;width:auto;max-width:100%;aspect-ratio:9/16}
.canvas-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#050606}
.canvas-stage .overlay-preview{width:100%!important;height:100%!important;inset:0!important;
  left:0!important;top:0!important;transform:none!important}
.canvas-stage #preview-placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;white-space:normal;width:85%;text-align:center;color:#aababc}
.format-select{display:inline-flex;align-items:center;gap:5px;border:1px solid #3b4b50;
  background:#11181a;border-radius:8px;padding:5px}
.format-select span{font-size:10px;color:#c3d2d0;letter-spacing:.5px;margin:0 4px}
.format-select button{padding:6px 10px;border-color:#36484a;min-height:34px}
.format-select button.active,.format-select button[aria-pressed="true"]{background:#b9ed91;
  color:#18230f;border-color:#b9ed91;font-weight:750}
.audio-track .clip.audio{cursor:grab;touch-action:none}
.audio-track .clip.audio.dragging{cursor:grabbing;outline:2px solid #f8d184;
  outline-offset:1px;z-index:5}
@media(max-width:700px){.screen{height:340px}.format-select{flex-wrap:wrap}
 .format-select span{width:100%;text-align:center}}


/* v0.6 — library with draggable media tiles instead of list rows */
.library-imports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.library-imports .file-add{display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:9px 5px;margin:0;line-height:1.25;
  text-align:center;font-size:10px;letter-spacing:.15px;white-space:normal}
.library-imports .music-add{color:#f4d08c;background:#302617;
  border-color:#967c4d}
.library-imports .music-add:hover{background:#45331d}
.library-imports .image-add{color:#d7c2ff;background:#2a2039;
  border-color:#756496}
.library-imports .image-add:hover{background:#392a4e}
#music-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.library .assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:11px;align-content:start;align-items:start;max-height:340px;
  overflow-y:auto;overflow-x:hidden;padding:4px 3px 10px;margin-top:12px;
  scrollbar-color:#637473 #172022}
.asset-tile{position:relative;min-width:0;display:flex;flex-direction:column;
  border:1px solid #45565c;background:#192327;border-radius:9px;
  overflow:hidden;cursor:grab;user-select:none;transition:border-color .12s,transform .12s}
.asset-tile:hover{border-color:#92b98c;background:#22302e;transform:translateY(-1px)}
.asset-tile:active,.asset-tile.asset-dragging{cursor:grabbing;opacity:.65}
.asset-tile:focus-within{outline:2px solid #a4da83}
.asset-thumb{aspect-ratio:4/3;position:relative;width:100%;
  background:linear-gradient(135deg,#283a48,#111819);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.asset-tile-audio .asset-thumb{background:linear-gradient(135deg,#4a361b,#1e1c16)}
.asset-tile-image .asset-thumb{background:linear-gradient(135deg,#3b2d50,#1a1922)}
.asset-poster{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.asset-type{position:absolute;left:4px;bottom:4px;z-index:1;
  padding:2px 5px;border-radius:4px;background:#071014de;
  font-size:9px;letter-spacing:.3px;color:#eaf6f7;font-weight:700}
.asset-audio-icon{color:#edc680;font-size:54px;font-family:Georgia,serif;
  line-height:1;text-shadow:0 4px 16px #0008}
.asset-tile-name{color:#eaf4f2;font-weight:600;font-size:11px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:8px 7px 2px}
.asset-tile-meta{color:#a7b9b8;font-size:10px;padding:0 7px 5px;
  font-variant-numeric:tabular-nums}
.asset-tile-actions{padding:5px 6px;display:flex;gap:6px;
  justify-content:space-between;background:#131e20;border-top:1px solid #304044}
.asset-tile-actions button{padding:4px 7px;min-height:28px;font-size:15px;
  border-radius:5px;line-height:1}
.asset-insert{background:#344d3a;color:#c9f1be;border-color:#526e4c;
  flex:1}
.asset-insert:hover{background:#476448}
.asset-delete{background:#392527;border-color:#5e4043;color:#ffbcb7}
.asset-delete:hover{background:#6e353a}
.image-track,.video-track,.audio-track{transition:box-shadow .13s,background-color .13s;
  position:relative}
.image-track.drop-target-available,.video-track.drop-target-available,
.audio-track.drop-target-available{box-shadow:inset 0 0 0 2px #839e7f}
.image-track.drop-target-hover,.video-track.drop-target-hover,
.audio-track.drop-target-hover{box-shadow:inset 0 0 0 3px #c2f29e;
  background-color:#294334}
.toolbar>.format-select{order:-1}
@media(max-width:950px){.library .assets{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
 .library-imports .file-add{font-size:10px}}
@media(max-width:580px){.library-imports{grid-template-columns:1fr 1fr}
 .library-imports .image-add{grid-column:1/-1}
 .library .assets{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* CINEMA v0.8 — dynamically expandable timeline, up to six tracks total. */
.timeline-layout{max-height:440px!important;min-height:270px!important;
  overflow-y:auto!important;align-items:flex-start;
  scrollbar-color:#607273 #11191d}
.track-labels{display:flex!important;flex-direction:column!important;
  grid-template-rows:none!important;flex:0 0 126px!important;
  width:126px!important;height:auto;align-self:flex-start;
  background:#141a1d}
.track-labels .ruler-label{height:36px;min-height:36px;flex:0 0 36px;
  align-items:center;display:flex;color:#aebfc0}
.track-labels .track-label{height:78px;min-height:78px;flex:0 0 78px;
  display:flex;align-items:center;justify-content:space-between;
  gap:3px;padding:0 8px;box-sizing:border-box;border-bottom:1px solid #3b484b;
  font-size:11px;font-weight:600;white-space:normal}
.track-label-name{line-height:1.28;flex:1}
.track-label.image-label{color:#e0bee9;background:#231e29}
.track-label.video-label{color:#b8ddf0;background:#17232a}
.track-label.audio-label{color:#f2d396;background:#242218}
.track-remove{font-size:17px;padding:0;line-height:1;
  flex:0 0 24px;width:24px;height:26px;background:#3b292c;
  border:1px solid #784649;color:#ffbaba;border-radius:5px}
.track-remove:hover{background:#703237}
.track-lanes{position:relative;width:100%;min-height:234px;display:flex;flex-direction:column}
.track-lanes>.timeline-lane{flex:0 0 78px;height:78px!important;min-height:78px;
  width:100%;position:relative}
.timeline-scroll{overflow-x:auto!important;overflow-y:hidden!important;
  height:auto!important;min-height:270px}
.timeline{min-height:270px}
.track-add-row{margin:13px 0 4px;display:flex;align-items:center;
  flex-wrap:wrap;gap:10px}
.track-add-button{background:#243c29;border:1px dashed #85aa77;
  color:#c9f0b9;padding:13px 23px;font-size:14px;font-weight:750;
  border-radius:9px;min-height:48px}
.track-add-button:hover{background:#375a3b}
.track-add-button:disabled{opacity:.42}
.track-counter{font-size:12px;color:#a6babc;font-variant-numeric:tabular-nums}
.track-choice{display:inline-flex;align-items:center;gap:7px;
  padding:6px;background:#1e2b2f;border:1px solid #486151;border-radius:9px}
.track-choice[hidden]{display:none!important}
.track-choice button{font-size:12px;padding:9px 12px}
.extra-video-preview{position:absolute;inset:0;z-index:1;pointer-events:none}
.extra-video-layer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#050606;pointer-events:none}
.clip.video.dragging,.video-track .clip.dragging{z-index:5;outline:2px solid #adddf4;
  cursor:grabbing}
.timeline-lane .clip{touch-action:none}
@media(max-width:750px){.track-labels{flex:0 0 100px!important;width:100px!important}
 .track-labels .track-label{padding:0 5px;font-size:10px}
 .track-add-button{padding:12px 18px}
 .timeline-layout{max-height:405px!important}}


/* v0.9 — identical time-aligned bands on every lane at every zoom level. */
#track-lanes > .timeline-lane{
  background-repeat:repeat!important;
  background-position:0 0!important;
  background-size:auto 100%!important;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent var(--second-width,70px),
    rgba(255,255,255,.035) var(--second-width,70px),
    rgba(255,255,255,.035) calc(2 * var(--second-width,70px))
  )!important;
}
#track-lanes > .image-track{background-color:#241c2d!important}
#track-lanes > .video-track{background-color:#142026!important}
#track-lanes > .audio-track{background-color:#211f18!important}
/* The wrapper owns vertical scrolling. The inner viewport owns only horizontal.
   Allow regular page scrolling when fewer tracks fit inside the wrapper. */
.timeline-layout{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  scrollbar-gutter:stable;
}
.timeline-layout .timeline-scroll{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior:auto!important;
  align-self:flex-start!important;
}


/* SCALBIT CINEMA v0.10 — readable labels and Windows file explorer drops. */
html,body{font-size:16px}
h2{font-size:17px}
.logo{font-size:13px}
.logo small{font-size:12px;letter-spacing:.55px}
.return,.side-label,.eyebrow{font-size:13px}
.side-note{font-size:13px}
.section-top>span,.zoom,.zoom output,#status{font-size:14px}
#status{line-height:1.5}
.hint,.export-panel p,#inspector-empty{font-size:14px;line-height:1.55}
.toolbar button,.format-select button,.format-select span{font-size:14px}
.format-select span{font-weight:750}
.track-labels .track-label,.track-labels .track-label-name,
.track-labels .ruler-label{font-size:15px;letter-spacing:.1px;font-weight:720}
.track-labels .track-label{padding-left:9px}
.track-labels .ruler-label{font-size:14px}
.tick{font-size:12px;line-height:1.35}
.clip,.clip b,.clip small,.image-clip-name{font-size:13px}
.amplitude-scale{font-size:12px;letter-spacing:0}
.asset-tile-name{font-size:14px;line-height:1.35}
.asset-tile-meta,.asset-type{font-size:12px}
.asset-type{letter-spacing:.2px}
.track-add-button{font-size:16px}
.track-counter,.track-choice button{font-size:14px}
.fields label{font-size:14px}
.fields input{font-size:15px}
.transport #timecode,.frame-info{font-size:13px}
#selected-label{font-size:13px}
.library-imports .file-add{font-size:13px;line-height:1.35;font-weight:750}
.asset-tile-actions button{font-size:17px;min-height:32px}
#assets .hint{font-size:14px}
@media(max-width:750px){
 .track-labels .track-label,.track-label-name{font-size:13px}
 .toolbar button{font-size:13px}
}
/* Imported files may originate outside the browser (Windows Explorer).
   The entire Materials panel is a drop target, with a visible hover state. */
.library#materials-library{position:relative}
.media-import-status{margin-top:12px;padding:10px 12px;border-radius:7px;
 color:#c5d5d3;background:#1f2b2e;border:1px solid #35464b;
 font-size:14px;line-height:1.4;overflow-wrap:anywhere;min-height:46px}
.media-import-status.import-error{color:#ffd9ad;border-color:#9b7457;
 background:#34281f}
.library.media-importing .media-import-status{border-color:#8aba7c;color:#bfe4a5}
.media-drop-overlay{display:none;position:absolute;inset:5px;
 z-index:30;border-radius:10px;border:3px dashed #b9ed91;
 background:rgba(27,53,36,.95);pointer-events:none;
 flex-direction:column;gap:15px;align-items:center;justify-content:center;
 text-align:center;padding:24px;color:#e4ffd4}
.media-drop-overlay strong{font-size:20px;letter-spacing:.4px}
.media-drop-overlay span{font-size:15px;line-height:1.45}
.library.media-drop-active .media-drop-overlay{display:flex}
.library.media-drop-active{border-color:#b9ed91;box-shadow:0 0 0 2px #729f60}


/* Clear media categories while keeping compact draggable file tiles. */
.asset-group-heading{grid-column:1/-1;margin:6px 0 0;padding:6px 5px;
 border-bottom:1px solid #455458;color:#d3e9e5;
 font-size:14px;font-weight:750;letter-spacing:.35px}
.asset-group-heading:first-child{margin-top:0}

/* v0.12 — project clipboard under Materials, NOT an extra timeline lane. */
.copied-shelf{margin-top:15px;padding:11px;border:1px solid #58725f;
 background:#172421;border-radius:9px}
.copied-shelf h3{margin:0 0 10px;font-size:15px;color:#c7edb3;
 display:flex;gap:9px;align-items:center}
.copied-shelf h3 span{border-radius:10px;padding:2px 8px;
 font-size:12px;background:#35533b;color:#ddf4d8}
.copied-shelf #copied-empty{font-size:13px;color:#b8c6bd;line-height:1.45;margin:2px 0 0}
.copied-items{display:grid;gap:7px;max-height:260px;overflow-y:auto}
.copied-tile{display:flex;align-items:center;gap:8px;
 background:#24302b;border:1px solid #42564b;border-radius:7px;
 padding:7px;cursor:grab;min-width:0;user-select:none}
.copied-tile:hover{border-color:#b9e5a0}
.copied-tile.copied-dragging{opacity:.5;cursor:grabbing}
.copied-icon{font-size:22px;flex:0 0 30px;text-align:center}
.copied-label{display:grid;gap:3px;flex:1;min-width:0;color:#ebf3e9}
.copied-label strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copied-label>span{font-size:12px;color:#b9d6bf}
.copied-paste,.copied-remove{min-width:31px;height:31px;font-size:17px;padding:3px 7px}
.copied-paste{background:#395a36;color:#e0ffc8}
.copied-remove{background:#4d3030;color:#ffcfcb}
.timeline-lane .clip.dragging{outline:2px solid #b9eaa0;cursor:grabbing}
.timeline-lane .clip.ripple-moving{box-shadow:inset 0 0 0 2px #c5ee9c;z-index:4}


/* v0.14 — copied fragments are actual media file thumbnails/cards. */
.copied-items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:11px;max-height:380px;overflow-y:auto;overflow-x:hidden;
  align-items:start;padding:3px 2px 9px;
}
.copied-tile.asset-tile{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:0;border:1px solid #45565c;background:#192327;
  border-radius:9px;overflow:hidden;min-width:0;cursor:grab;
}
.copied-tile.asset-tile:hover{border-color:#b4df91;background:#233028}
.copied-tile .asset-thumb{aspect-ratio:4/3;width:100%;min-height:75px}
.copied-tile .asset-tile-name{font-size:13px;line-height:1.3;padding:8px 7px 3px}
.copied-tile .asset-tile-meta{font-size:12px;padding:0 7px 7px}
.copied-tile .asset-tile-actions{width:100%;margin-top:auto}
.copied-tile .asset-tile-actions button{font-size:16px;min-height:30px}
@media(max-width:950px){.copied-items{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))}}
@media(max-width:580px){.copied-items{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Dragging between tracks: source stays put until drop; green ghost marks
   the new location, red ghost indicates an occupied or incompatible track. */
.timeline-lane.track-transfer-available{box-shadow:inset 0 0 0 2px #66855c}
.timeline-lane.track-transfer-target{
 box-shadow:inset 0 0 0 3px #c2f29e;
 background-color:#284436!important;
}
.timeline-lane.track-transfer-invalid{
 box-shadow:inset 0 0 0 3px #d77a79;
 background-color:#472c2c!important;
}
.timeline-lane .clip.track-transfer-ghost{
 pointer-events:none!important;opacity:.86!important;
 background:linear-gradient(130deg,#406f41,#335739)!important;
 border:2px dashed #c3f2a9!important;
 z-index:10!important;cursor:grabbing;
}
.timeline-lane .clip.track-transfer-ghost-invalid{
 background:linear-gradient(130deg,#6b3a3b,#4b2929)!important;
 border-color:#ffa4a4!important;
}
/* While dragging between tracks, the OLD slot must appear genuinely
   empty, not a translucent duplicate of the grabbed frame. The clip node
   keeps pointer capture, and is shown again on cancel/invalid drop. */
.timeline-lane .clip.track-transfer-origin{
 opacity:0!important;
 outline:none!important;
 box-shadow:none!important;
}


/* v0.15: uniform gripping hand on every video/audio/graphic fragment.
   Dedicated graphic resize handle remains an ew-resize cursor. */
.timeline-lane .clip,.timeline-lane .clip.audio,
.timeline-lane .clip.image-clip{cursor:grab!important;touch-action:none}
.timeline-lane .clip.dragging,.timeline-lane .clip.dragging.audio,
.timeline-lane .clip.image-clip.dragging{cursor:grabbing!important}
.timeline-lane .image-resize,.timeline-lane .image-resize:hover{cursor:ew-resize!important}
#playhead{cursor:grab!important;touch-action:none}
.timeline-scroll.scrubbing #playhead{cursor:grabbing!important}
.transport .jump-button{font-size:13px;min-height:41px;padding:8px 12px;white-space:nowrap}
.transport .jump-button:hover{border-color:#a0d27b}

/* v0.16: precise snapping across ALL tracks while dragging a fragment.
   Green guide is temporary and never moves the real red playback cursor. */
.snap-guide{
 position:absolute;top:0;bottom:0;width:3px;
 background:#79ef77;
 box-shadow:0 0 0 1px #173a23,0 0 9px 3px #76ee7999;
 z-index:8;pointer-events:none;
}
.snap-guide::before{
 content:"✓ STYK";position:absolute;left:7px;top:5px;
 display:block;width:max-content;
 padding:3px 7px;border-radius:4px;
 font:700 12px/1.25 system-ui,Segoe UI,sans-serif;
 color:#122b15;background:#baff9d;border:1px solid #6fd768;
 box-shadow:0 2px 8px #000a;
}
#playhead.snap-aligned::after{
 background:#8cff88!important;
 box-shadow:0 0 7px 2px #5fe873b5;
}
#playhead.snap-aligned::before{
 border-top-color:#8cff88!important;
}


/* ─── SCALBIT CINEMA v0.17 / STUDIO LAYOUT ──────────────────────────────
   A height-aware editing workstation: tight player + thumbnail library,
   growing timeline and optional precision/export drawers.  No source
   media, media paths, timeline time geometry, or editing APIs change. */
:root{
 --bg:#0b1012;--sidebar:#0d1416;--card:#151d20;--panel:#1a2428;
 --line:#2c3b3f;--accent:#afe68d;--muted:#9dafb2;
}
html,body{height:100%;overflow:hidden}
.app{height:100dvh;min-height:0;overflow:hidden;display:flex}
aside{
 flex:0 0 198px;width:198px;height:100dvh;min-height:0;
 padding:17px 12px;gap:12px;
 background:#101719;border-right:1px solid #2b3b3d;
}
.logo{font-size:11px;letter-spacing:1.8px}
.logo strong{font-size:23px;letter-spacing:.5px}
.logo small{font-size:10px;line-height:1.5;margin-top:4px}
#new-project{font-size:12px;padding:10px 7px;min-height:39px}
.side-label{margin-top:6px;font-size:10px;letter-spacing:1.1px}
.side-note{font-size:11px;line-height:1.45}
.side-project-row{border-radius:7px}
main{
 display:flex;flex-direction:column;
 flex:1;min-width:0;width:auto;max-width:none;
 height:100dvh;min-height:0;overflow:hidden;
 padding:0 12px 0;
}
header{
 min-height:65px;max-height:65px;
 flex:0 0 65px;
 padding:8px 2px;gap:14px;
}
header .eyebrow{font-size:10px;letter-spacing:1.5px}
header h1{font-size:23px;font-weight:680;line-height:1.3;letter-spacing:-.3px}
.header-controls{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
#status{
 max-width:min(24vw,360px);font-size:12px;
 color:#b8dbc0;line-height:1.35;text-align:right;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.header-controls button{
 height:34px;min-height:34px;padding:6px 12px;
 border-radius:7px;font-weight:690;font-size:12px;
}
.header-controls .quiet-action{background:#1a282b;border:1px solid #395157;color:#cadce0}
.header-controls .quiet-action:hover{background:#26383c}
.header-controls .header-export{
 background:var(--accent);color:#10200d;border-color:transparent;
 box-shadow:0 1px 0 #d8ffba22;
}
.header-controls .header-export:hover{background:#ccfcae}
#workspace{
 display:flex;flex-direction:column;gap:8px;
 flex:1 1 auto;min-height:0;overflow:hidden;
 padding:9px 0 8px;
}
.top-grid{
 display:grid;
 grid-template-columns:minmax(320px,1.48fr) minmax(260px,.95fr);
 gap:10px;
 height:clamp(300px,41dvh,520px);
 flex:0 0 clamp(300px,41dvh,520px);
 min-height:0;overflow:hidden;
}
.preview,.library,.timeline-section{
 border:1px solid #2d3d41;background:#151d20;border-radius:9px;
 box-shadow:0 1px 0 #ffffff05;
}
.preview{display:flex;flex-direction:column;min-height:0;min-width:0;
 overflow:hidden;padding:9px 10px 8px}
.library{min-height:0;height:100%;overflow:hidden;padding:9px 10px 8px;
 display:flex;flex-direction:column}
.section-top{margin-bottom:7px;gap:8px;min-height:24px}
.section-top h2{font-size:13px;font-weight:800;letter-spacing:.6px}
.section-top>span{font-size:11px;white-space:nowrap}
.screen{
 flex:1;min-height:0;height:auto;max-height:none;
 border:1px solid #243134;background:#050809;
 border-radius:6px;
}
.screen .canvas-stage{height:100%;max-height:100%;box-shadow:none}
.screen .canvas-stage[data-aspect="9:16"]{height:100%;max-width:100%}
.screen .canvas-stage[data-aspect="16:9"]{width:min(100%,710px);height:auto}
.transport{
 flex:0 0 auto;min-height:40px;margin-top:7px;gap:5px;
 flex-wrap:nowrap;justify-content:space-between;
}
.transport button{font-size:12px;border-radius:6px;min-height:33px;height:33px;
 padding:4px 9px;white-space:nowrap}
.transport .jump-button{font-size:12px;min-height:33px;height:33px;padding:4px 9px}
.transport .play{width:37px;height:35px;min-height:35px;border-radius:7px;
 font-size:17px;background:var(--accent)}
.transport #timecode{margin:0 3px 0 auto;font-size:11px;font-variant-numeric:tabular-nums}
.transport .frame-info{font-size:11px;white-space:nowrap}
.library-head{flex:0 0 auto;min-height:29px}
.library-head h2{display:flex;gap:7px;align-items:center}
.library-count{font:700 10px/1.5 system-ui,sans-serif;background:#293b40;
 border:1px solid #3f5359;color:#bdd5d1;border-radius:8px;padding:0 7px}
.import-mini{
 border:1px solid #83bd71;border-radius:6px;padding:6px 10px;
 color:#172412;background:var(--accent);font-weight:780;cursor:pointer;
 font-size:12px;line-height:1.2;white-space:nowrap;
 transition:background .12s,transform .12s;
}
.import-mini:hover,.import-mini:focus-visible{background:#cffdb1;outline:2px solid #7cae75}
.import-mini:active{transform:translateY(1px)}
.media-filters{display:flex;align-items:center;gap:3px;flex:0 0 auto;
 border-bottom:1px solid #2d3b3e;padding:0 0 7px;margin-bottom:4px;
 overflow-x:auto;scrollbar-width:thin}
.media-filter{
 font-size:11px;min-height:27px;padding:4px 8px;
 background:transparent;color:#a7babd;border:1px solid transparent;
 border-radius:5px;font-weight:660;
}
.media-filter:hover{background:#283538;color:#e1eded}
.media-filter.active{
 background:#263734;color:#d9f1d4;border:1px solid #456a55;
}
.library .assets{
 flex:1;min-height:0;max-height:none;
 display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
 align-content:start;align-items:start;
 overflow-y:auto;overflow-x:hidden;
 gap:8px;padding:4px 2px 8px;margin-top:0;
 scrollbar-width:thin;
}
.asset-tile{
 border-radius:6px;border:1px solid #3a4a4d;
 background:#1a2428;transition:background .1s,border-color .1s;
 box-shadow:0 2px 3px #0002;
}
.asset-tile:hover{transform:none;border-color:#a4d58f;background:#233036}
.asset-thumb{aspect-ratio:4/3;background:#0e191d}
.asset-poster{object-fit:contain}
.asset-type{
 font-size:9px;line-height:1.4;font-weight:760;letter-spacing:0;
 left:3px;bottom:3px;padding:1px 4px;border-radius:3px;
 background:#0b1417de;
}
.asset-tile-length{
 position:absolute;right:3px;top:3px;font:10px/1.4 ui-monospace,Consolas,monospace;
 background:#081215df;color:#e5f3ef;padding:2px 4px;border-radius:3px;
}
.asset-tile-name{
 font-size:11px!important;line-height:1.25;padding:5px 5px 4px;
 font-weight:650;max-width:100%;color:#eaf1f1;
}
.asset-tile-actions{padding:3px 4px;gap:4px;border-color:#324347;background:#152023}
.asset-tile-actions button{
 min-height:23px;height:23px;font-size:12px!important;
 padding:1px 5px;border-radius:4px;
}
.asset-audio-icon{font-size:37px;color:#8cd7e4}
.asset-tile-audio .asset-thumb{
 background:repeating-linear-gradient(90deg,#17363e 0px,#285c6b 2px,
 #14323d 4px,#0f2831 7px,#0d2027 11px);
}
.asset-tile-audio .asset-thumb::before{
 content:"";height:34px;position:absolute;inset:auto 6px 22px;
 background:repeating-linear-gradient(90deg,transparent 0 2px,#46d1ec 3px 4px,
 transparent 5px 6px);opacity:.55;
 mask-image:linear-gradient(to bottom,transparent 0%,#000 32%,#000 73%,transparent 100%);
}
.asset-tile-audio .asset-audio-icon{position:relative;z-index:1;text-shadow:0 3px 6px #071619}
.copied-shelf{
 margin-top:6px;padding:7px;border-radius:7px;flex:0 0 auto;
 max-height:154px;overflow-y:auto;background:#172521;border:1px solid #40554b;
}
.copied-shelf h3{font-size:12px;margin-bottom:3px}
.copied-shelf h3 span{font-size:10px}
.copied-shelf #copied-empty{font-size:11px;line-height:1.3}
.copied-items{
 grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
 gap:6px;max-height:118px;padding-bottom:3px;
}
.copied-tile .asset-thumb{min-height:52px}
.copied-tile .asset-tile-name{font-size:10px!important;padding:4px}
.copied-tile .asset-tile-meta{font-size:10px;padding:0 4px 4px}
.copied-tile .asset-tile-actions button{min-height:23px}
.media-import-status{
 margin-top:6px;min-height:0;padding:5px 8px;line-height:1.2;
 font-size:11px;border-radius:5px;background:#1c292c;
}
.media-import-status:empty{display:none}
.timeline-section{
 display:flex;flex-direction:column;
 flex:1 1 auto;min-height:0;overflow:hidden;
 margin-top:0;padding:8px 10px 7px;
}
.timeline-section .section-top{flex:0 0 auto;min-height:27px;margin:0 0 4px}
.timeline-section .section-top h2{font-size:13px}
.zoom{font-size:11px;gap:6px}
.zoom input,.zoom input[type="range"]{width:120px;min-width:90px}
.zoom output{font-size:11px;min-width:69px}
.toolbar{
 flex:0 0 auto;display:flex;align-items:center;flex-wrap:nowrap;
 gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
 padding:1px 0 7px;margin:0;
}
.toolbar button{font-size:12px;padding:5px 10px;min-height:32px;
 height:32px;flex:0 0 auto;border-radius:6px}
.toolbar .format-select{
 display:flex;align-items:center;gap:3px;padding:2px 3px;
 border:1px solid #344549;background:#1a2427;
 border-radius:6px;flex:0 0 auto;
}
.toolbar .format-select span{font-size:11px;margin:0 3px;font-weight:750}
.toolbar .format-select button{font-size:11px;padding:3px 8px;height:28px;min-height:28px}
.toolbar .tool-settings{border-color:#425957;color:#d8ead9;background:#20302e}
.timeline-layout{
 flex:1 1 auto;min-height:0!important;max-height:none!important;height:auto;
 overflow-y:auto!important;overflow-x:hidden!important;
 border-radius:6px;border-color:#34454a;
}
.timeline-layout .timeline-scroll{height:100%!important;min-height:0!important;
 overflow-x:auto!important;overflow-y:hidden!important}
.track-add-row{
 min-height:35px;flex:0 0 auto;margin:5px 0 0;gap:7px;flex-wrap:nowrap;
}
.track-add-button{
 min-height:31px;padding:5px 12px;font-size:12px;
 border-radius:6px;font-weight:720;
}
.track-counter{font-size:11px}
.track-choice{padding:3px 4px;gap:3px;border-radius:6px}
.track-choice button{font-size:11px;padding:4px 8px}
.editor-drawer-backdrop{
 position:fixed;inset:0;background:rgba(2,8,10,.64);
 backdrop-filter:blur(3px);z-index:70;
}
.bottom-grid.editor-drawer{
 display:flex;flex-direction:column;gap:0;position:fixed;
 right:9px;top:9px;bottom:9px;
 width:min(440px,calc(100vw - 18px));
 margin:0;padding:0;background:#172125;
 border:1px solid #58726c;border-radius:10px;
 box-shadow:0 20px 80px #000b;overflow-y:auto;overflow-x:hidden;
 z-index:71;
}
.editor-drawer .drawer-topbar{
 display:flex;align-items:center;justify-content:space-between;
 flex:0 0 51px;min-height:51px;padding:8px 12px;
 background:#1d2b2d;border-bottom:1px solid #3c5050;
 font-size:14px;font-weight:760;color:#e0efe8;
 position:sticky;top:0;z-index:1;
}
.editor-drawer .drawer-topbar button{font-size:24px;width:33px;height:33px;
 padding:0;background:#263638;color:#dce7e1}
.editor-drawer .inspector,.editor-drawer .export-panel{
 display:block;box-shadow:none;border:0;border-radius:0;
 padding:15px 14px;background:transparent;min-height:0;
}
.editor-drawer[data-view="clip"] #editor-export-panel,
.editor-drawer[data-view="export"] #editor-inspector-panel{display:none}
.editor-drawer .fields{grid-template-columns:repeat(2,minmax(110px,1fr))}
.editor-drawer .fields label{font-size:13px}
.editor-drawer .fields input{font-size:14px;padding:8px}
.editor-drawer .inspector h2,.editor-drawer .export-panel h2{font-size:14px}
.editor-drawer .export-panel p{font-size:13px;line-height:1.5}
.editor-drawer #export{font-size:13px;min-height:41px}
@media(max-height:800px) and (min-width:851px){
 .top-grid{height:clamp(245px,38dvh,360px);flex-basis:clamp(245px,38dvh,360px)}
 header{flex-basis:57px;min-height:57px;max-height:57px}
 .transport .frame-info{display:none}
}
@media(max-width:1180px) and (min-width:851px){
 aside{width:168px;flex-basis:168px}
 #status{max-width:155px}
 .header-controls .quiet-action{font-size:0;padding:5px 9px}
 .header-controls .quiet-action::first-letter{font-size:14px}
 .top-grid{grid-template-columns:minmax(310px,1.25fr) minmax(245px,.9fr);gap:8px}
 .transport{gap:3px}
 .transport button{font-size:11px;padding:3px 6px}
 .transport .frame-info{display:none}
}
@media(max-width:850px){
 html,body{height:auto;min-height:100%;overflow:auto}
 .app{height:auto;min-height:100vh;overflow:visible;display:block}
 aside{width:100%;height:auto;position:relative;display:flex;gap:8px;flex-wrap:wrap;
   padding:10px;overflow:visible}
 .logo strong{font-size:20px}
 .side-note{display:none}
 #project-list{display:flex;overflow:auto;gap:6px;width:100%}
 .side-project-row{min-width:120px}
 main{width:100%;height:auto;min-height:100vh;overflow:visible;padding:0 10px 20px}
 header{height:auto;min-height:66px;max-height:none;flex-wrap:wrap}
 .header-controls{gap:5px;flex-wrap:wrap}
 #status{max-width:none}
 #workspace{height:auto;overflow:visible;display:block;padding-top:10px}
 .top-grid{display:flex;flex-direction:column;gap:8px;height:auto;
   min-height:0;overflow:visible}
 .preview{height:clamp(280px,52vh,470px);flex:0 0 auto}
 .library{height:250px;min-height:250px}
 .timeline-section{margin-top:9px;height:clamp(380px,60vh,700px);overflow:hidden}
 .timeline-layout{min-height:0!important;max-height:none!important}
 .transport{gap:4px}
 .transport #timecode{font-size:11px}
 .transport .frame-info{display:none}
 .toolbar{overflow-x:auto}
}


/* SCALBIT CINEMA v0.18 — MATERIALS | FILM | DETAILS studio, no AI. */
.top-grid{
 display:grid;
 grid-template-columns:minmax(205px,.95fr) minmax(275px,1.53fr) minmax(240px,1.04fr);
 grid-template-areas:"library preview details";
 gap:9px;
}
.top-grid .library{grid-area:library;min-width:0;min-height:0}
.top-grid .preview{grid-area:preview;min-width:0;min-height:0}
.top-grid .text-details{grid-area:details;min-width:0;min-height:0}
.text-details{
 display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
 border:1px solid #33464a;background:#151e21;border-radius:9px;
 padding:10px 11px 12px;scrollbar-width:thin;
}
.text-details .section-top{flex:0 0 auto;padding-bottom:7px;border-bottom:1px solid #364447}
.library-create-actions{display:flex;align-items:center;gap:6px;min-width:0}
.import-text{min-height:29px;height:29px;padding:5px 9px;border-radius:6px;
 font-weight:760;font-size:12px;white-space:nowrap;
 background:#29314c;border:1px solid #6774aa;color:#dfe5ff}
.import-text:hover{background:#3c4770;border-color:#9fa6f6}
.asset-tile-text .asset-thumb{background:linear-gradient(145deg,#242c4d,#323c67);
 display:flex;align-items:center;justify-content:center}
.asset-text-icon{font:800 43px/1 Georgia,serif;color:#e4e0ff;
 text-shadow:0 3px 8px #10132f}
.asset-tile-text .asset-type{background:#343a6ccc;color:#dfe3ff}
.text-details .details-empty{display:flex;flex:1;flex-direction:column;
 align-items:center;justify-content:center;gap:12px;padding:16px;
 text-align:center;color:#bdd0d0;font-size:12px}
.text-details .details-symbol{font:800 56px/1 Georgia,serif;color:#9198cb}
.text-details .details-empty strong{color:#e4edf0;font-size:14px}
.text-details .details-empty p{line-height:1.6;font-size:12px}
.text-details .detail-field{display:flex;flex-direction:column;gap:8px;
 margin:12px 0;font-size:11px;font-weight:760;letter-spacing:.18px;
 color:#c6d4d6;min-width:0}
.text-details textarea,.text-details select{
 width:100%;min-width:0;max-width:100%;border:1px solid #41545d;
 border-radius:7px;background:#0e181e;color:#edf7f6;
 padding:10px;font:13px/1.5 system-ui,Segoe UI,sans-serif;
 resize:vertical}
.text-details input[type="range"]{width:100%;accent-color:#b9ee95}
.text-details input[type="color"]{width:100%;height:37px;border:1px solid #41545d;
 padding:3px;background:#142126;border-radius:6px;cursor:pointer}
.text-details .detail-columns{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:8px}
.text-details .detail-columns .detail-field{min-width:0}
.text-details .detail-hint{font-size:11px;line-height:1.45;color:#9eafb6}
.text-details #save-text-details{width:100%;margin-top:12px;
 min-height:36px;padding:6px;border-radius:7px;font-size:12px}
#text-details-status{font-size:11px;color:#b1e1a4;margin-top:7px;line-height:1.35}
#text-preview{pointer-events:none;position:absolute;inset:0;z-index:5;overflow:hidden}
#text-preview .film-caption{position:absolute;transform:translate(-50%,-50%);
 white-space:pre-wrap;text-align:center;overflow-wrap:anywhere;
 max-width:82%;font-weight:600;line-height:1.15;pointer-events:none;
 text-shadow:0 1px 3px #000e,0 0 5px #0009}
.track-labels .track-label.text-label{
 height:50px!important;min-height:50px!important;flex:0 0 50px!important;
 color:#e6d8ff;background:#27253a;border-bottom:1px solid #5c527e;
 font-size:13px}
#track-lanes>.timeline-lane.text-track{
 height:50px!important;min-height:50px!important;flex:0 0 50px!important;
 background:repeating-linear-gradient(90deg,#232139 0,#232139 48px,#2c2947 48px,#2c2947 96px)!important;
 border-bottom:1px solid #5e527e!important}
#track-lanes>.text-track>.text-clip{
 position:absolute;top:5px;height:40px!important;max-height:40px;
 padding:0 14px 0 7px;display:flex;align-items:center;gap:6px;
 background:#565280;border:1px solid #aa9ad4;border-radius:5px;
 cursor:grab!important;color:#fff;touch-action:none;user-select:none;
 font-weight:670;line-height:1.2;overflow:hidden;white-space:nowrap}
.text-clip.dragging{cursor:grabbing!important;outline:2px solid #ddbbff}
.text-clip-icon{font:bold 17px/1 Georgia,serif;color:#eee0ff;pointer-events:none}
.text-clip-caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 font-size:12px;flex:1;pointer-events:none}
.text-length-grip{position:absolute;right:0;top:0;bottom:0;width:12px;
 display:flex;align-items:center;justify-content:center;cursor:ew-resize!important;
 background:#baacdf;color:#282343;font-size:10px;touch-action:none;z-index:6}
.text-length-grip:hover{background:#ddd2fc}
@media(max-width:1230px) and (min-width:851px){
 .top-grid{grid-template-columns:minmax(175px,.9fr) minmax(220px,1.5fr) minmax(205px,1fr);gap:7px}
 .top-grid .section-top h2{font-size:12px}
 .library-create-actions{gap:3px}
 .import-mini,.import-text{font-size:10px!important;padding:5px 6px!important}
 .text-details{padding:8px}
}
@media(max-width:850px){
 .top-grid{display:flex;flex-direction:column;height:auto;flex-basis:auto;
  grid-template-areas:none;gap:8px;overflow:visible}
 .top-grid .library{order:1}
 .top-grid .preview{order:2}
 .top-grid .text-details{order:3}
 .text-details{min-height:180px;max-height:420px}
 .preview{min-height:280px}
}


/* v0.19 — locally imported font files, distinct from media assets */
.font-upload-label{display:flex;align-items:center;justify-content:center;
 margin-top:7px;min-height:30px;border:1px dashed #7e93bd;
 border-radius:6px;background:#212b3e;color:#c9d9fc;
 font-size:11px;font-weight:750;cursor:pointer;letter-spacing:0}
.font-upload-label:hover{border-color:#adc7ff;background:#2b3b58}
#font-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* SCALBIT CINEMA v0.20 — context clip menu + photo Ken Burns controls */
.clip-context-menu{
 position:fixed;z-index:110;width:min(260px,calc(100vw - 16px));
 padding:6px;background:#1c272c;
 border:1px solid #52706b;border-radius:10px;
 box-shadow:0 14px 55px #000c;
 display:flex;flex-direction:column;gap:2px;
 backdrop-filter:blur(10px);
}
.clip-context-menu[hidden]{display:none!important}
.clip-context-menu .context-action{
 appearance:none;display:flex;align-items:center;text-align:left;width:100%;
 min-height:35px;padding:8px 11px;border:0;border-radius:6px;
 color:#e7f2ef;font-size:12px;font-weight:650;
 background:transparent;cursor:pointer;
}
.clip-context-menu .context-action:hover,
.clip-context-menu .context-action:focus-visible{
 background:#334848;color:#eefded;outline:0;
}
.clip-context-menu .context-action.danger{color:#ffbbb8}
.clip-context-menu .context-action.danger:hover{background:#543134}
.clip-context-menu .context-action[disabled]{opacity:.45;cursor:default}
.clip-context-menu .context-divider{
 height:1px;margin:5px 6px;background:#3f5356;
}
.camera-details-form[hidden],#camera-custom-fields[hidden],#camera-simple-fields[hidden]{
 display:none!important;
}
.camera-details-form{
 display:flex;flex-direction:column;gap:5px;
 color:#e5eefa;
}
.camera-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 0}
.camera-badge{font-weight:750;color:#d7edfb;background:#2a4555;
 border:1px solid #527b91;border-radius:6px;padding:6px 8px;font-size:12px}
#camera-clip-duration{font-variant-numeric:tabular-nums;color:#abc3cc;font-size:11px}
.camera-subtitle{color:#aabdc0;font-size:12px;line-height:1.55;margin:5px 0}
.camera-details-form .detail-field{margin:9px 0}
.camera-details-form select{
 width:100%;min-height:37px;border-radius:7px;
 padding:8px;background:#101d23;color:#eaf4f1;border:1px solid #425b63;
 font-size:12px;
}
.camera-details-form input[type="range"]{width:100%;accent-color:#a9dfa1}
.camera-details-form .camera-subhead{
 color:#cce7ec;font-size:12px;font-weight:800;
 margin:12px 0 3px;padding:0 0 6px;border-bottom:1px solid #324749;
}
.camera-details-form output{color:#bdedaa;font-variant-numeric:tabular-nums}
.camera-smooth{display:flex;align-items:center;gap:8px;
 margin:14px 0 7px;font-size:12px;color:#d9e8e5}
.camera-smooth input{accent-color:#aedb95}
#camera-save{min-height:39px;width:100%;border-radius:7px;font-size:12px}
.camera-reset{min-height:30px;background:transparent!important;
 border:1px solid #495763!important;color:#c2d1d0!important;
 font-size:11px;border-radius:6px}
#camera-status{color:#afdfac;font-size:11px;line-height:1.45;margin-top:6px}
.overlay-image.camera-moving{object-fit:contain;transform-origin:50% 50%;will-change:transform}


/* v0.21: image framing starts full-frame, endpoints are explicit. */
.camera-tip{padding:9px 10px;border-radius:6px;background:#1f3035;
 border:1px solid #38555e;color:#d5e5e6;font-size:11px;line-height:1.55}
.camera-tip strong{color:#b6e99d}
.camera-help{font-size:11px;line-height:1.55;color:#bfd4dc;padding:1px 2px}
.camera-details-form .camera-subhead{margin-top:13px}
.camera-details-form .detail-field{margin:7px 0}
.camera-details-form .detail-field output{float:right}


/* v0.22: true independent temporal camera speed, not zoom distance. */
.camera-speed-fields[hidden]{display:none!important}
.camera-speed-fields{padding:9px 11px 7px;background:#1b3033;
 border:1px solid #45605c;border-radius:8px;margin:8px 0 12px}
.camera-speed-fields .detail-field{font-size:12px;letter-spacing:.25px;margin:5px 0 4px}
.camera-speed-fields output{font-weight:800;color:#beeaa1}
.camera-speed-fields input[type="range"]{width:100%;accent-color:#b8ed94;cursor:pointer}
.camera-speed-ticks{display:flex;justify-content:space-between;gap:8px;
 font-size:10px;color:#b6c8c9;font-variant-numeric:tabular-nums}
.camera-speed-help{font-size:11px;color:#c6e7b8;line-height:1.5;margin:8px 0 3px}

/* v0.24: long context menu remains fully accessible on compact screens. */
.clip-context-menu{max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain}

/* v0.24: keep image thumbnails visible without filename labels. */
.timeline-lane .image-clip-thumb{display:block;width:100%;max-width:none;min-width:0;height:100%;flex:1 1 auto;object-fit:contain}

/* v0.25: clear library drag landing cue, position ghost, and mismatch state. */
#track-lanes > .timeline-lane.drop-target-available{
 box-shadow:inset 0 0 0 2px #95c68e!important;
}
#track-lanes > .timeline-lane.drop-target-hover{
 background-color:#294a34!important;
 box-shadow:inset 0 0 0 4px #a3ff9c,0 0 18px #6fd87365!important;
}
#track-lanes > .timeline-lane.drop-target-invalid{
 background-color:#49302d!important;
 box-shadow:inset 0 0 0 3px #f69d91!important;
}
/* v0.28: semi-transparent colored stretch covers the actual transition time. */
.timeline-lane .transition-marker{
 position:absolute;top:6px;z-index:11;height:64px;
 min-width:18px;box-sizing:border-box;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:3px;padding:2px 3px;overflow:hidden;
 border:2px solid #c4edc0;border-radius:5px;
 background:repeating-linear-gradient(135deg,
  #3f8156b9 0px,#3f8156b9 8px,#21442eb9 8px,#21442eb9 16px);
 box-shadow:inset 0 0 0 1px #173c29;
 color:#f0ffe8;cursor:grab;touch-action:none;
}
.timeline-lane .transition-marker-symbol{font-size:21px;font-weight:900;line-height:1}
.timeline-lane .transition-marker-caption{
 max-width:100%;text-align:center;text-overflow:ellipsis;overflow:hidden;
 white-space:nowrap;font-size:9px;font-weight:800;color:#fff;
 text-shadow:0 1px 2px #172a1c;
}
.timeline-lane .transition-marker.active{
 border-color:#fff7aa;background:repeating-linear-gradient(135deg,
 #688e44df 0px,#688e44df 8px,#395b30dc 8px,#395b30dc 16px);
 color:#fffcd2;
}
.timeline-lane .transition-marker:hover{filter:brightness(1.17)}


/* Thin effect band leaves the clip thumbnail readable. The width still equals
   the actual on-timeline duration of the attached transition. */
.timeline-lane .transition-marker{
 top:5px;height:27px;flex-direction:row;gap:2px;
 padding:1px 3px;border:1px solid #c4efbe;border-left-width:3px;
 border-right-width:3px;border-radius:4px;
 background:repeating-linear-gradient(135deg,#27583fc9 0px,
  #27583fc9 7px,#39704cc9 7px,#39704cc9 14px);
}
.timeline-lane .transition-marker-symbol{font-size:17px}
.timeline-lane .transition-marker-caption{font-size:9px}
.transition-preview .transition-preview-black{
 background:#000;pointer-events:none;
}


/* SCALBIT CINEMA v0.29 — six compact selectable draggable transition tiles. */
.transition-tiles{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:9px;margin:3px 0 9px;
}
.transition-tiles .transition-tile{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:9px 5px;min-height:95px;gap:3px;
 border:1px solid #486960;border-radius:9px;
 background:linear-gradient(155deg,#1c3131,#182625);
 color:#e4f4ee;cursor:grab;text-align:center;
 font-size:12px;font-weight:800;touch-action:auto;
}
.transition-tiles .transition-tile .transition-tile-symbol{
 display:block;font-size:27px;line-height:1.2;
 color:#b6e6c2;text-shadow:0 0 10px #2f6b4970;
}
.transition-tiles .transition-tile small{
 font-size:10px;font-weight:500;color:#99b5ad;
}
.transition-tiles .transition-tile:hover{
 border-color:#b7e9a8;background:#25443d;
}
.transition-tiles .transition-tile:focus-visible{
 outline:2px solid #e0ffa3;outline-offset:2px;
}
.transition-tiles .transition-tile.active{
 border:2px solid #baf09d;
 background:linear-gradient(155deg,#2b5a3d,#1d402e);
 box-shadow:0 0 0 1px #56896580;
}
.transition-tiles .transition-tile.active .transition-tile-symbol{
 color:#e0ffd3;
}
.transition-resize-grip{
 position:absolute;top:0;bottom:0;width:8px;
 background:repeating-linear-gradient(90deg,#ecffd9b0 0,
  #ecffd9b0 1px,#16432bd0 1px,#16432bd0 3px);
 z-index:2;cursor:ew-resize;touch-action:none;opacity:.95;
}
.transition-resize-left{left:0;border-radius:2px 0 0 2px}
.transition-resize-right{right:0;border-radius:0 2px 2px 0}
.timeline-lane .transition-marker{
 padding-left:10px;padding-right:10px;
 transition:background-color .12s;
}
.timeline-lane .transition-marker.active .transition-resize-grip{
 background:repeating-linear-gradient(90deg,#fffbc3 0,
  #fffbc3 1px,#456c38 1px,#456c38 3px);
}
.transition-details-form label output{font-variant-numeric:tabular-nums}
.transition-details-form #transition-speed{accent-color:#c4e2fa}


/* v0.30: actual live preview compositing for visual transitions.
   Sits above video and photo layers, below captions. It MUST have positioning;
   otherwise the inline opacity curve updates a normal-flow div outside the frame. */
.canvas-stage .transition-preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  background:transparent;
  isolation:isolate;
}
.canvas-stage .transition-preview[hidden] {display:none!important}
.canvas-stage .transition-preview > .transition-preview-image,
.canvas-stage .transition-preview > .transition-preview-fill {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
  object-fit:contain;
  pointer-events:none;
  background:#000;
  will-change:opacity,transform,clip-path,mask-image;
}
.canvas-stage .transition-preview > .transition-preview-black {
  background:#000;
}


/* v0.31: live magnetic STYK follows the destination lane and stays readable. */
.transition-snap-guide{
 transform:translateX(-2px);
 min-height:26px;
 z-index:24;
 pointer-events:none;
}
.transition-snap-guide::before{
 bottom:100%;
 font-size:11px;
 padding:5px 9px;
 border:1px solid #9ad783;
 box-shadow:0 2px 9px #0007;
}
.timeline-lane .transition-marker{
 user-select:none;
 -webkit-user-select:none;
 cursor:grab;
}
.timeline-lane .transition-marker:active{cursor:grabbing}


/* v0.33: compact 3-by-2 transition chooser.
   Preserve real draggable buttons and selection states; leave room for
   the duration control without scrolling past three large tile rows. */
.transition-details-form{
 gap:5px;
 padding:3px 0;
}
.transition-details-form .transition-help{
 font-size:11px;
 line-height:1.35;
 margin:0;
}
.transition-details-form .camera-head{
 margin-bottom:0;
}
#transition-tiles.transition-tiles{
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:6px;
 margin:2px 0 3px;
}
#transition-tiles .transition-tile{
 min-width:0;
 min-height:62px;
 padding:4px 3px;
 gap:1px;
 border-radius:7px;
 font-size:10.5px;
 line-height:1.2;
}
#transition-tiles .transition-tile .transition-tile-symbol{
 font-size:20px;
 line-height:1;
}
#transition-tiles .transition-tile small{
 font-size:9px;
 line-height:1.1;
}
.transition-details-form .detail-field{
 margin:2px 0 3px;
 gap:4px;
}
.transition-details-form .detail-field input[type="range"]{
 min-height:18px;
 margin:2px 0;
 cursor:pointer;
}
.transition-details-form .transition-controls{
 margin-top:2px;
}


/* v0.34: duration is read-only; its handle lives on the timeline. */
.transition-details-form .transition-duration-readout{
 display:grid;grid-template-columns:minmax(0,1fr) auto;
 align-items:center;column-gap:9px;row-gap:3px;
 padding:7px 9px;margin:1px 0 3px;
 border:1px solid #37584a;border-radius:7px;
 background:#182b25;
 font-size:11px;font-weight:750;color:#d4e6d9;
}
.transition-details-form .transition-duration-readout output{
 font-weight:850;color:#c5efa8;font-size:13px;
 font-variant-numeric:tabular-nums;
}
.transition-details-form .transition-duration-readout small{
 grid-column:1/-1;color:#a5beb0;
 font-size:10px;font-weight:450;line-height:1.25;
}


/* v0.36: text motion wizard in the existing SZCZEGÓŁY inspector. */
.text-wizard-step[hidden]{display:none!important}
.text-wizard-step{display:flex;flex-direction:column;gap:9px}
.text-wizard-heading{display:flex;align-items:center;justify-content:space-between;
 font-size:12px;font-weight:800;letter-spacing:.2px;color:#e0ede9}
.text-wizard-heading small{font-size:10px;color:#99b0b4;font-weight:500}
.text-effect-open{margin-top:7px;width:100%;min-height:38px}
.text-wizard-back,.text-wizard-none{
 display:block;min-height:34px;border:1px solid #4a6462;border-radius:7px;
 padding:7px 10px;text-align:left;background:#233238;color:#d5ebe7;
 font-size:12px;font-weight:650;cursor:pointer}
.text-wizard-back:hover,.text-wizard-none:hover{background:#30504a}
.text-effect-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:7px}
.text-effect-tile{min-width:0;min-height:76px;padding:8px 6px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:4px;border-radius:8px;border:1px solid #587268;
 color:#def7e7;background:linear-gradient(140deg,#203b36,#192b2d);
 font-size:11px;font-weight:750;text-align:center;cursor:pointer}
.text-effect-tile span{font-size:24px;line-height:1;color:#b9eaaa}
.text-effect-tile:hover,.text-effect-tile.active{
 border-color:#beee9e;background:#305540}
.text-effect-help{color:#b7c9c9;font-size:11px;line-height:1.5;margin:0}
.text-paste-hint{font-size:10px;font-weight:450;color:#b5c6c5;line-height:1.35}
.text-effect-direction{display:flex;flex-direction:column;gap:8px;
 color:#cfdfd9;font-size:11px;font-weight:750}
.text-effect-direction[hidden]{display:none!important}
.text-effect-direction-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.text-effect-direction-buttons button{padding:9px 6px;border-radius:6px;
 border:1px solid #52746b;background:#203532;color:#d2e7df;font-weight:650}
.text-effect-direction-buttons button.active{border-color:#c5f5ae;
 background:#365d40;color:#ecffe5}
#text-effect-speed{width:100%;accent-color:#b9ed9e}
#text-effect-status{font-size:11px;color:#c4edaf}


/* v0.41: STYK at video/audio/image/text edges during RED cursor scrubbing.
   Separate from the clip-drag snap-guide; does not magnetize the cursor. */
.playhead-styk-guide{
 position:absolute;top:0;bottom:0;width:3px;
 background:#80f074;
 box-shadow:0 0 0 1px #174823,0 0 9px 3px #76ee7999;
 z-index:9;pointer-events:none;
}
.video-trim-handle{
 position:absolute;top:0;bottom:0;width:7px;z-index:5;
 background:#d7ead388;cursor:ew-resize;touch-action:none;opacity:0
}
.clip:hover .video-trim-handle,.clip.selected .video-trim-handle{opacity:1}
.video-trim-handle.trim-start{left:0}
.video-trim-handle.trim-end{right:0}
.audio-level-line{
 position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none
}
.audio-level-line line{
 stroke:#fff1ad;stroke-width:2;vector-effect:non-scaling-stroke;
 filter:drop-shadow(0 1px 1px #15100b)
}
.audio-effect-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.audio-effect-buttons button[aria-pressed="true"]{outline:1px solid #b9ed9e}
.playhead-styk-guide[hidden]{display:none!important}
.playhead-styk-guide::before{
 content:"STYK";display:block;position:absolute;left:8px;top:5px;
 width:max-content;padding:3px 8px;border-radius:4px;
 font:750 11px/1.3 system-ui,Segoe UI,sans-serif;
 color:#112b12;background:#baf9a1;border:1px solid #6fd768;
 box-shadow:0 2px 8px #0009;
}


/* v0.44: source-frame boundary is highlighted ONLY within its video lane. */
.video-frame-guide{
 position:absolute;display:block;box-sizing:border-box;width:3px;
 background:#8ff68b;border-radius:2px;pointer-events:none;z-index:9;
 box-shadow:0 0 0 1px #124e22,0 0 12px 4px #58f57b99;
}
.video-frame-guide[hidden]{display:none!important}
.video-frame-guide::after{
 content:"KLATKA";position:absolute;top:3px;left:7px;padding:2px 5px;
 border-radius:3px;color:#18321a;background:#bbf5a4;font-size:10px;
 font-weight:750;white-space:nowrap;
}


/* v0.45: validation belongs next to Podziel at extreme timeline zoom.
   Only appears on error and does not obscure the frame or timeline. */
.split-feedback{
 display:inline-flex;align-items:center;max-width:380px;
 padding:6px 10px;background:#332820;border:1px solid #a67a54;
 border-radius:6px;color:#ffdeb9;font-size:12px;font-weight:650;
 line-height:1.35;overflow-wrap:anywhere;
}
.split-feedback[hidden]{display:none!important}


/* v0.47: zoom slider follows MATERIALS panel and uses larger type. */
.timeline-section .section-top{min-width:0;gap:12px}
.timeline-section .zoom{
 display:flex;align-items:center;justify-content:flex-end;
 min-width:0;gap:9px;
 font-size:15px;line-height:1.3;color:#d5e6de;
}
.timeline-section .zoom label{
 font-size:15px;font-weight:630;white-space:nowrap;
}
.timeline-section .zoom>span{
 font-size:18px;font-weight:700;line-height:1;
}
.timeline-section .zoom input[type="range"]{
 width:min(var(--materials-slider-width, 300px), calc(100vw - 280px));
 min-width:150px;max-width:none;flex:0 1 auto;
 accent-color:#b8f09d;cursor:pointer;height:24px;
}
.timeline-section .zoom output{
 min-width:96px;font-size:15px;
 font-family:ui-monospace,Consolas,monospace;
 font-variant-numeric:tabular-nums;
 white-space:nowrap;color:#d5e8e1;
}
@media(max-width:800px){
 .timeline-section .section-top{flex-wrap:wrap}
 .timeline-section .zoom{
  flex:1 1 100%;justify-content:flex-start;max-width:100%;
  gap:7px;
 }
 .timeline-section .zoom input[type="range"]{
  flex:1 1 auto;min-width:105px;
  width:min(var(--materials-slider-width,300px),calc(100vw - 260px));
 }
}


/* v0.49: intentionally compact Word-like toolbar for the text inspector.
   Plain textarea + versioned formatting keeps all 8 MP4 effects compatible. */
.text-format-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
 margin:8px 0 12px;padding:7px;border:1px solid #425c5d;
 background:#17292b;border-radius:9px}
.text-format-group{display:inline-flex;align-items:center;gap:3px}
.text-details .text-format-group button{
 min-height:35px;min-width:35px;padding:5px 9px;
 font-size:13px;font-weight:720;border:1px solid #567074;
 border-radius:6px;background:#1c3539;color:#e9f5f2;cursor:pointer;
}
.text-details .text-format-group button:hover{background:#2d4e50}
.text-details .text-format-group button.active,
.text-details .text-format-group button[aria-pressed="true"]{
 background:#b0e98c;border-color:#c6f3b2;color:#152819;
}
.text-details .text-format-size{margin-left:auto}
.text-details #text-content{text-align:center;line-height:1.5;
 font-size:14px;min-height:100px;white-space:pre-wrap}
@media(max-width:440px){.text-details .text-format-size{margin-left:0}}


/* v0.55: tidy font-size controls and compact Star Wars text rows */
.text-details .text-format-toolbar{
 display:grid;grid-template-columns:max-content minmax(0,1fr);
 align-items:center;gap:8px;padding:8px;
}
.text-details .text-format-toolbar>.text-format-group:nth-child(2){
 justify-self:end;min-width:0;
}
.text-details .text-format-size{
 grid-column:1/-1;margin-left:0!important;width:100%;
 display:flex;align-items:center;justify-content:flex-end;
 gap:7px;border-top:1px solid #355054;padding-top:7px;
}
.text-details .text-format-size-label{
 margin-right:auto;color:#bfcfcf;
 font-size:10px;font-weight:700;letter-spacing:.4px;
 white-space:nowrap;
}
.text-details .text-format-size button{
 min-width:49px;min-height:35px;flex:0 0 49px;
}
#text-preview .cinema-caption-line{
 display:block;margin:0;padding:0;line-height:1.11;
 white-space:pre-wrap;overflow-wrap:anywhere;
}


/* v0.56: real FFmpeg progress */
.cinema-export-progress{margin-top:12px;padding:12px;border:1px solid var(--line);
 border-radius:9px;background:#141e1d}
.cinema-export-progress[hidden]{display:none!important}
.cinema-export-progress-head{display:flex;justify-content:space-between;
 gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.cinema-export-progress-head strong{color:var(--accent);font-variant-numeric:tabular-nums}
.cinema-export-progress-head span{color:var(--muted)}
.cinema-export-progress progress{width:100%;height:14px;margin:10px 0 5px;
 accent-color:var(--accent);display:block}
.cinema-export-progress small{color:var(--muted);font-size:11px;line-height:1.4}


/* v0.57: hidden position sliders MUST stay hidden despite authored labels. */
#text-details-form label.detail-field[hidden]{display:none!important}

#editor-export-panel .export-summary{
 display:grid;gap:0;margin:14px 0;padding:4px 14px;
 border:1px solid #4c685c;border-radius:10px;background:#20312e;
}
#editor-export-panel .export-summary div{padding:10px 0}
#editor-export-panel .export-summary div+div{border-top:1px solid #3e554c}
#editor-export-panel .export-summary dt{color:#c4d8d0;font-size:13px}
#editor-export-panel .export-summary dd{
 margin:3px 0 0;color:#edffe7;font-size:22px;font-weight:750;line-height:1.25;
}
#export-summary-size{display:block;margin-top:3px;color:#cce6cc;font-size:18px}
#editor-export-panel .export-setting{
 display:grid;gap:5px;margin:12px 0;font-size:14px;font-weight:650;
}
#editor-export-panel .export-setting select{
 width:100%;min-height:40px;padding:7px 10px;border:1px solid #526961;
 border-radius:7px;background:#21332f;color:#eff9f0;font:inherit;
}

#transition-direction[hidden],#transition-curtain[hidden],.transition-duration-readout[hidden]{display:none!important}
#transition-direction label,#transition-curtain label{display:flex;align-items:center;gap:6px;padding:9px;border:1px solid #587268;border-radius:6px;cursor:pointer}
#transition-direction input,#transition-curtain input{width:auto;margin:0}

#transition-tiles.transition-tiles{
 grid-template-columns:repeat(2,minmax(0,1fr));
}
#transition-tiles .transition-tile,
.text-effect-tiles .text-effect-tile{
 min-height:80px;padding:8px 6px;gap:4px;
 font-size:15px;line-height:1.25;overflow-wrap:anywhere;
}
#transition-tiles .transition-tile small,
.text-effect-tiles .text-effect-tile small{
 font-size:12px;line-height:1.25;color:#b6d1ca;
}
#transition-direction label,#transition-curtain label,
.text-effect-direction-buttons button,.context-action{
 font-size:14px;line-height:1.3;
}
.library-imports .file-add,.import-mini,.import-text{
 font-size:13px!important;
}

html[lang="en"] .snap-guide::before{content:"\2713  CUT"}
html[lang="en"] .playhead-styk-guide::before{content:"CUT"}

.cinema-language{display:grid;gap:5px;font-size:13px;color:inherit;margin:4px 0}.cinema-language select{font:inherit;color:inherit;background:#21332f;border:1px solid #526961;border-radius:6px;padding:7px 9px;width:100%}

@font-face{font-family:"Arial";src:url("/fonts/DejaVuSans.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Georgia";src:url("/fonts/DejaVuSerif.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Times New Roman";src:url("/fonts/DejaVuSerif.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Consolas";src:url("/fonts/DejaVuSansMono.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Impact";src:url("/fonts/DejaVuSans-Bold.ttf") format("truetype");font-display:swap}