:root{
  --bg-void:#0a0c0f;
  --bg-panel:#12151a;
  --bg-elevated:#1a1e25;
  --bg-elevated-2:#20252d;
  --line:#262b33;
  --line-soft:#1c2028;
  --text-primary:#e7eaee;
  --text-dim:#8892a0;
  --text-faint:#565e6b;
  --accent:#49d3c4;
  --accent-soft:rgba(73,211,196,.16);
  --accent-strong:#7ee8db;
  --tally:#f2a154;
  --tally-soft:rgba(242,161,84,.18);
  --danger:#e8615f;
  --danger-soft:rgba(232,97,95,.15);
  --radius:4px;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--ui);
  font-size:13px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
.mono{font-family:var(--mono);}
.hidden{display:none !important;}

#app{
  display:flex;
  flex-direction:column;
  height:100vh;
}

/* ===== MENÜLEISTE ===== */
#menubar{
  display:flex;
  align-items:center;
  height:38px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--line);
  padding:0 8px;
  flex-shrink:0;
  position:relative;
  z-index:50;
}
.menu{position:relative;}
.menu-btn{
  background:transparent;
  border:none;
  color:var(--text-dim);
  padding:0 14px;
  height:38px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.02em;
}
.menu-btn:hover{color:var(--text-primary);}
.menu.open .menu-btn{color:var(--accent);}
.menu-panel{
  position:absolute;
  top:38px;
  left:0;
  min-width:240px;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.5);
  padding:8px;
  display:none;
  flex-direction:column;
  gap:2px;
}
.menu-panel.wide{min-width:280px;}
.menu.open .menu-panel{display:flex;}
.menu-item{
  background:transparent;
  border:none;
  color:var(--text-primary);
  text-align:left;
  padding:8px 10px;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:12.5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.menu-item:hover{background:var(--accent-soft);color:var(--accent-strong);}
.menu-item.danger:hover{background:var(--danger-soft);color:var(--danger);}
.menu-item .hint{color:var(--text-faint);font-size:11px;font-weight:400;}
.menu-item.block, .hint.block{white-space:normal;}
.menu-divider{height:1px;background:var(--line);margin:6px 2px;}
.menu-label{color:var(--text-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:6px 10px 2px;}

.field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  font-size:12px;
  color:var(--text-dim);
}
.field.col{flex-direction:column;align-items:stretch;gap:6px;}
.field.col span{color:var(--text-dim);font-size:11.5px;}
.field input[type=range]{flex:1;accent-color:var(--accent);}
.field input[type=number]{
  width:64px;background:var(--bg-void);border:1px solid var(--line);
  color:var(--text-primary);border-radius:var(--radius);padding:4px 6px;
}
.field input[type=color]{width:40px;height:26px;border:1px solid var(--line);border-radius:var(--radius);background:none;padding:0;}
.field textarea, .field input[type=text]{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-primary);
  border-radius:var(--radius);padding:6px 8px;font-family:inherit;font-size:12.5px;resize:vertical;
}
.switch-field input{accent-color:var(--accent);width:16px;height:16px;}

.font-presets{display:flex;flex-wrap:wrap;gap:6px;}
.font-presets button{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-primary);
  padding:5px 9px;border-radius:var(--radius);cursor:pointer;font-size:11.5px;
}
.font-presets button.active{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft);}
.font-custom-row{display:flex;gap:6px;margin-top:6px;}
.font-custom-row input{flex:1;}
.font-custom-row button{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);padding:0 8px;cursor:pointer;font-size:11px;white-space:nowrap;
}
.style-toggles{display:flex;flex-wrap:wrap;gap:8px 12px;}
.fx-panel{min-width:300px;max-width:320px;}
.menu-panel.fx-panel{min-width:300px;max-width:320px;}
.fx-toggles{gap:7px 10px;padding:0 10px 4px;}
.fx-toggles label{width:calc(50% - 5px);}
.style-toggles label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-dim);}
.style-toggles input{accent-color:var(--accent);}

.header-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.project-title{
  color:var(--text-faint);
  font-size:11.5px;
  letter-spacing:.04em;
  padding-right:6px;
}
.ai-toggle{
  background:var(--bg-elevated);border:1px solid var(--line);color:var(--text-dim);
  padding:0 12px;height:26px;border-radius:13px;cursor:pointer;font-size:11.5px;
  display:flex;align-items:center;gap:6px;
}
.ai-toggle:hover{border-color:var(--accent);color:var(--accent-strong);}
.ai-toggle.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);}

.tiktok-fill-label{
  display:flex;align-items:center;gap:6px;
  color:var(--text-dim);font-size:11px;
  background:var(--bg-elevated);border:1px solid var(--line);
  padding:0 10px;height:26px;border-radius:13px;cursor:pointer;white-space:nowrap;
}
.tiktok-fill-label:hover{border-color:var(--accent);color:var(--text-primary);}
.tiktok-fill-label input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer;}

.count-badge{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-dim);
  font-size:9.5px;padding:1px 6px;border-radius:8px;margin-left:6px;font-family:var(--mono);
}
.total-length-row{display:flex;gap:6px;padding:4px 10px 2px;}
.total-length-row input{
  width:64px;background:var(--bg-void);border:1px solid var(--line);color:var(--text-primary);
  border-radius:var(--radius);padding:4px 6px;font-family:var(--mono);
}
.total-length-row button{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);padding:4px 8px;cursor:pointer;font-size:11px;
}
.total-length-row button:hover{border-color:var(--accent);color:var(--accent-strong);}

.time-limit-row{display:flex;gap:6px;padding:4px 10px 2px;}
.time-limit-btn{
  flex:1;background:var(--bg-void);border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);padding:6px 8px;cursor:pointer;font-size:11.5px;font-family:var(--mono);
}
.time-limit-btn:hover{border-color:var(--accent);color:var(--accent-strong);}
.time-limit-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);font-weight:600;}

.clip-fx-tag{
  position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.55);color:var(--accent-strong);
  font-size:8.5px;padding:1px 4px;border-radius:2px;z-index:2;font-family:var(--mono);pointer-events:none;
}
.clip-fx-badge{
  position:absolute;top:2px;right:2px;width:15px;height:15px;background:rgba(0,0,0,.6);
  color:var(--text-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;cursor:pointer;z-index:6;opacity:0;transition:opacity .15s;
}
.clip:hover .clip-fx-badge{opacity:1;}
.clip-fx-badge:hover{background:var(--danger);color:#fff;}

/* ===== ARBEITSBEREICH / VORSCHAU ===== */
#workspace{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at center, #0d1014 0%, #07080a 100%);
  min-height:0;
  padding:16px;
}
#preview-panel{display:flex;flex-direction:column;align-items:center;gap:12px;max-height:100%;}
#preview-frame{
  position:relative;
  background:#000;
  border:1px solid var(--line);
  box-shadow:0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.6);
}
#preview-canvas{display:block;max-width:70vw;max-height:56vh;background:#000;}
#preview-frame.phone-frame{
  border-radius:34px;
  border:10px solid #05070a;
  box-shadow:0 0 0 1px #000, 0 0 0 2px #2a2f38, 0 20px 60px rgba(0,0,0,.65);
  padding-top:18px;
  overflow:hidden;
}
#preview-frame.phone-frame::before{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:38%;height:18px;
  background:#05070a;
  border-radius:0 0 14px 14px;
  z-index:3;
}
#preview-frame.phone-frame #preview-canvas{max-width:34vh;max-height:70vh;}
#preview-badge{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.55);
  color:var(--tally);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  padding:3px 7px;
  border:1px solid rgba(242,161,84,.35);
  border-radius:2px;
}
#transport{display:flex;align-items:center;gap:12px;}
#transport button{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  color:var(--text-primary);
  width:34px;height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
#transport button:hover{border-color:var(--accent);color:var(--accent-strong);}
#timecode{color:var(--tally);font-size:14px;letter-spacing:.03em;min-width:150px;text-align:center;}
#transport #btn-export{
  border-radius:6px;width:auto;padding:0 16px;height:34px;
  background:var(--accent);border-color:var(--accent);color:#04211d;font-weight:600;
  white-space:nowrap;
}
#transport #btn-export:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#04211d;}
#transport #btn-cancel-export{
  border-radius:6px;width:auto;padding:0 16px;height:34px;
  background:var(--danger-soft);border-color:var(--danger);color:var(--danger);font-weight:600;
}
#transport #btn-cancel-export:hover{background:var(--danger);color:#fff;}

/* ===== TIMELINE ===== */
#timeline-panel{
  flex-shrink:0;
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  padding:0 0 8px 0;
  height:230px;
  display:flex;
  flex-direction:column;
  position:relative;
  user-select:none;
}
#ruler-wrap{
  height:22px;
  position:relative;
  border-bottom:1px solid var(--line-soft);
  margin-left:84px;
}
#ruler{position:relative;height:100%;}
.ruler-tick{
  position:absolute;top:0;bottom:0;
  border-left:1px solid var(--line);
  font-family:var(--mono);
  font-size:9px;
  color:var(--text-faint);
  padding-left:3px;
  padding-top:3px;
  white-space:nowrap;
}
#playhead{
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:var(--tally);
  left:84px;
  pointer-events:none;
  z-index:40;
}
#playhead::before{
  content:'';
  position:absolute;top:0;left:-4px;
  width:9px;height:9px;
  background:var(--tally);
  border-radius:1px;
  transform:rotate(45deg);
}
#export-limit-overlay{
  position:absolute;
  top:0;bottom:0;right:0;
  background:repeating-linear-gradient(135deg, rgba(232,97,95,.20) 0 10px, rgba(232,97,95,.28) 10px 20px);
  border-left:1px dashed var(--danger);
  pointer-events:none;
  z-index:20;
}
.export-limit-label{
  position:absolute;top:4px;left:8px;
  color:var(--danger);font-size:9.5px;font-family:var(--mono);letter-spacing:.03em;
  background:rgba(0,0,0,.55);padding:2px 6px;border-radius:2px;
  white-space:nowrap;
}
#export-fade-overlay{
  position:absolute;
  top:0;bottom:0;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  pointer-events:none;
  z-index:19;
}
.export-fade-label{
  position:absolute;bottom:4px;right:8px;
  color:var(--text-dim);font-size:9.5px;font-family:var(--mono);letter-spacing:.03em;
  background:rgba(0,0,0,.55);padding:2px 6px;border-radius:2px;
  white-space:nowrap;
}

.track{display:flex;height:60px;border-bottom:1px solid var(--line-soft);}
.track:last-child{border-bottom:none;}
.track-label{
  width:84px;flex-shrink:0;
  display:flex;align-items:center;
  padding-left:12px;
  color:var(--text-faint);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--bg-panel);
}
.track-body{
  position:relative;
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  background:
    repeating-linear-gradient(90deg, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent 40px);
}

/* Media-Strip Clips */
.clip{
  position:absolute;top:6px;bottom:6px;
  border-radius:var(--radius);
  background:var(--bg-elevated-2);
  border:1px solid var(--line);
  overflow:hidden;
  cursor:grab;
  display:flex;align-items:flex-end;
}
.clip.dragging{opacity:.5;cursor:grabbing;z-index:30;}
.clip.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.clip.multi-selected{border-color:var(--tally);box-shadow:0 0 0 2px var(--tally);}
.clip.multi-selected::after{
  content:'✓';
  position:absolute;top:2px;left:2px;z-index:3;
  width:14px;height:14px;border-radius:50%;
  background:var(--tally);color:#1a0f04;
  font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.clip img, .clip .video-thumb{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.55;}
.clip-label{
  position:relative;z-index:2;
  font-size:10px;color:var(--text-primary);
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  width:100%;padding:3px 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.clip-drop-indicator{
  position:absolute;top:4px;bottom:4px;width:2px;
  background:var(--accent);z-index:35;pointer-events:none;
}

/* Sound / Text Bars */
.bar{
  position:absolute;top:8px;bottom:8px;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  display:flex;align-items:center;
  cursor:grab;
}
.bar.text-bar{background:var(--tally-soft);border-color:var(--tally);}
.bar.selected{box-shadow:0 0 0 2px var(--accent-strong);}
.bar.text-bar.selected{box-shadow:0 0 0 2px var(--tally);}
.bar-fill-label{
  flex:1;padding:0 8px;font-size:10.5px;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.bar .fade-tri{
  position:absolute;top:0;bottom:0;width:0;
  border-style:solid;
  pointer-events:none;
  opacity:.55;
}
.bar .fade-tri.left{left:0;border-width:0 0 26px 0;border-color:transparent transparent var(--bg-void) transparent;}
.bar .fade-tri.right{right:0;border-width:26px 0 0 0;border-color:var(--bg-void) transparent transparent transparent;}
.handle{
  position:absolute;top:0;bottom:0;width:9px;
  cursor:ew-resize;
  z-index:5;
}
.handle.left{left:0;}
.handle.right{right:0;}
.handle::after{
  content:'';
  position:absolute;top:50%;left:50%;
  width:3px;height:16px;
  background:rgba(255,255,255,.4);
  border-radius:2px;
  transform:translate(-50%,-50%);
}
.no-media-msg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);font-size:11.5px;
}

/* ===== STATUSZEILE ===== */
#statusbar{
  height:34px;
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 14px;
  flex-shrink:0;
}
.status-group{display:flex;align-items:center;gap:10px;}
.status-field{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-faint);}
.status-field select{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-primary);
  border-radius:var(--radius);padding:3px 6px;font-size:11px;font-family:var(--mono);
}
#progress-wrap{
  flex:1;height:16px;background:var(--bg-void);border:1px solid var(--line);border-radius:8px;
  position:relative;overflow:hidden;display:flex;align-items:center;
}
#progress-bar{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong));
  opacity:.55;
  transition:width .12s linear;
}
#progress-label{
  position:relative;z-index:2;margin:0 auto;font-size:10px;color:var(--text-primary);letter-spacing:.03em;
}
.volume-group{margin-left:auto;}
.volume-group button{
  background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;
}
.volume-group input[type=range]{width:100px;accent-color:var(--accent);}

/* Scrollbars */
.track-body::-webkit-scrollbar{height:6px;}
.track-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

/* ===== BATCH-LEISTE ===== */
#clip-batch-bar{
  display:flex;align-items:center;gap:14px;
  background:var(--bg-elevated);border-top:1px solid var(--tally);
  padding:8px 16px;flex-shrink:0;
}
#clip-batch-count{color:var(--tally);font-size:12px;white-space:nowrap;}
.clip-batch-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);}
.clip-batch-field input{
  width:64px;background:var(--bg-void);border:1px solid var(--line);color:var(--text-primary);
  border-radius:var(--radius);padding:4px 6px;font-family:var(--mono);
}
#clip-batch-bar button{
  background:var(--bg-void);border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);padding:5px 10px;cursor:pointer;font-size:11.5px;
}
#btn-clip-batch-apply{border-color:var(--tally);color:var(--tally);}
#btn-clip-batch-apply:hover{background:var(--tally-soft);}
#btn-clip-batch-clear:hover{border-color:var(--danger);color:var(--danger);}
#clip-batch-bar .hint{margin-left:auto;color:var(--text-faint);font-size:10.5px;}

/* ===== MOBILE-SPERRE ===== */
#mobile-lock{
  position:fixed;inset:0;z-index:1000;
  background:radial-gradient(ellipse at center, #0d1014 0%, #07080a 100%);
  display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.mobile-lock-box{
  max-width:360px;text-align:center;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;
  padding:32px 24px;
}
.mobile-lock-icon{font-size:40px;margin-bottom:14px;}
.mobile-lock-box h1{font-size:17px;color:var(--text-primary);margin:0 0 12px;}
.mobile-lock-box p{font-size:13px;color:var(--text-dim);line-height:1.5;margin:0 0 10px;}
.mobile-lock-hint{color:var(--accent-strong) !important;font-weight:600;}