*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
:root{--bg:#0f172a;--panel:#111827;--muted:#374151;--text:#e5e7eb;--accent:#22d3ee;--grid:#1f2937;--bg-alt:#0b1020;--bg-alt2:#0b1224;--accent2:#0ea5b3;--accent2-border:#67e8f9;--muted-text:#9ca3af;--section-title:#cbd5e1}
body{background:linear-gradient(180deg,var(--bg-alt),var(--bg-alt2));color:var(--text)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-alt);position:sticky;top:0;border-bottom:1px solid var(--grid);gap:8px}
.topbar .left,.topbar .center,.topbar .right{display:flex;align-items:center;gap:8px}
button,.btn-file{background:var(--panel);color:var(--text);border:1px solid var(--grid);border-radius:8px;padding:6px 10px;cursor:pointer}
button:hover,.btn-file:hover{border-color:var(--accent)}
.btn-file input{display:none}
.btn-file.small{padding:2px 6px;font-size:12px}
.ml{margin-left:12px}
.layout{display:grid;grid-template-columns:280px 1fr 320px;gap:10px;padding:10px}
.sidebar{background:rgba(17,24,39,.7);backdrop-filter:saturate(120%) blur(6px);border:1px solid var(--grid);border-radius:12px;padding:10px;max-height:calc(100vh - 100px);overflow:auto}
.section{margin-bottom:14px}
.section h3{margin:6px 0 10px;font-size:16px}
.section h4{margin:10px 0 6px;font-size:14px;color:var(--section-title)}
label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
input[type=text],input[type=number],select{flex:1 1 auto;background:var(--bg-alt);color:var(--text);border:1px solid var(--grid);border-radius:8px;padding:6px 8px}
input[type=color]{height:32px}
.layer-toolbar{display:flex;gap:6px;flex-wrap:wrap}
#layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.layer-item{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--grid);border-radius:10px;padding:6px}
.layer-item input{background:transparent;border:none;color:var(--text);width:100%}
.layer-item .drag{cursor:grab}
.layer-item .mini{display:flex;gap:6px}
.hidden{display:none}
.animationPreIn,.animationOutEnded{opacity:0!important;pointer-events:none}
ul {padding-inline-start: 20px;}
.canvas-wrap{display:flex;flex-direction:column;gap:10px}
#canvas{margin:auto;background:var(--bg-alt);border:1px solid var(--grid);border-radius:12px;position:relative;overflow:hidden;transform-origin:top left}
#canvas.grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(0deg,transparent 24%,rgba(255,255,255,.045) 25%,rgba(255,255,255,.045) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.045) 75%,rgba(255,255,255,.045) 76%,transparent 77%),
    linear-gradient(90deg,transparent 24%,rgba(255,255,255,.045) 25%,rgba(255,255,255,.045) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.045) 75%,rgba(255,255,255,.045) 76%,transparent 77%);
  background-size:32px 32px;
  z-index:0;
}
.el{position:absolute;border:1px dashed rgba(255,255,255,.25);border-radius:0;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;transform-origin:center;z-index:1}
.el.selected{border:2px solid var(--accent)}
.el .resize{position:absolute;width:10px;height:10px;border:1px solid var(--accent2-border);background:var(--accent2)}
.el .resize.nw{top:-6px;left:-6px;cursor:nwse-resize}
.el .resize.ne{top:-6px;right:-6px;cursor:nesw-resize}
.el .resize.sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.el .resize.se{bottom:-6px;right:-6px;cursor:nwse-resize}
.el .rotate{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:14px;height:14px;border:1px solid var(--accent2-border);border-radius:50%;background:var(--accent2);cursor:grab}
.el.locked{pointer-events:none;opacity:.7}
.el .content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.el.text .content{padding:0}
.inline-tools button{background:var(--bg-alt);border:1px solid var(--grid);border-radius:6px;padding:2px 6px}
.note{font-size:12px;color:var(--muted-text)}
.timeline{background:var(--bg-alt);border:1px solid var(--grid);border-radius:12px;padding:8px}
.timeline-controls{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#clips{position:relative;height:120px;border:1px dashed var(--grid);border-radius:8px;overflow:auto;padding:8px;
  background-image:
    repeating-linear-gradient(to right,
      rgba(148,163,184,0.3) 0,
      rgba(148,163,184,0.3) 1px,
      transparent 1px,
      transparent 100px),
    repeating-linear-gradient(to right,
      rgba(148,163,184,0.6) 0,
      rgba(148,163,184,0.6) 2px,
      transparent 2px,
      transparent 200px);
  background-size:auto 100%;
  background-position:0 0;
  background-attachment: local;
}
.clip{position:absolute;height:28px;background:var(--accent2);color:var(--bg-alt);border-radius:6px;padding:4px 6px;font-size:12px;white-space:nowrap}
.foot{padding:8px 12px;color:var(--muted-text);border-top:1px solid var(--grid)}
#toast{position:fixed;right:12px;bottom:12px;background:var(--panel);border:1px solid var(--grid);border-radius:8px;padding:8px 12px;opacity:0;transition:.2s}
#toast.show{opacity:1}

/* v1.75 drag-sort styles */
#layers{position:relative}
.layer-item.dragging{opacity:.9;position:absolute;left:0;right:0;z-index:5;box-shadow:0 8px 20px rgba(0,0,0,.35);cursor:grabbing}
.layer-item.placeholder{border:2px dashed var(--accent);background:rgba(34,211,238,.08)}
.layer-item .drag{cursor:grab}

/* v2.0.1: smooth movement for timeline clips */
.clip{ transition: top 0.2s ease; }

/* v2.2: decorative dashed line above section titles in sidebar */
.sidebar.right h4 {
  border-top: 3px dashed var(--accent);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* v2.4: language switch visibility */
#btn-lang{ min-width:48px; padding:4px 8px; }
.topbar .right #btn-lang{ margin-left:8px; }

/* global css */
.ms-5 { margin-left:5px; }
.ms-10 { margin-left:10px; }
.ms-15 { margin-left:15px; }
.mt-5 { margin-top:5px; }
.mt-10 { margin-top:10px; }
.mt-15 { margin-top:15px; }
.pt-5 { padding-top:5px; }
.pt-10 { padding-top:10px; }
.pt-15 { padding-top:15px; }

/* v2.9: theme switching (dark / light / auto) */
body[data-theme="light"]{
  --bg:#e5e7eb;
  --panel:#ffffff;
  --muted:#d1d5db;
  --text:#111827;
  --accent:#0ea5b3;
  --grid:#d1d5db;
  --bg-alt:#f9fafb;
  --bg-alt2:#e5e7eb;
  --accent2:#0ea5b3;
  --accent2-border:#22d3ee;
  --muted-text:#6b7280;
  --section-title:#111827;
}
body[data-theme="light"] .sidebar{
  background:rgba(255,255,255,0.92);
}
body[data-theme="light"] input[type=text],
body[data-theme="light"] input[type=number],
body[data-theme="light"] select{
  background:#ffffff;
}
body[data-theme="light"] .clip{
  color:#111827;
}
.auto-cls-31 { margin-top: 10px !important; }




/* tl-cursor constrained to #clips */
#clips #tl-cursor {
  position: absolute;
  width: 2px;
  top: 0;
  bottom: 0;
  background: var(--accent, #ff4d4f);
  z-index: 9999;
  pointer-events: auto; /* żeby drag & drop działał */
}

#clips #tl-cursor .tl-cursor-label {
  position: sticky;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  top: 10px;
  left: 0;
  height: 14px;
  display: ruby;
  padding: 2px 4px;
  background: #000;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  border-radius: 2px;
  white-space: nowrap;
}