:root{
  --bg:#070708;--panel:#0c0c0e;--muted:#9aa0a6;--accent:#1db954;--danger:#ff6b6b
}
*{box-sizing:border-box}
html,body,#app{height:100%}

/* make page a column flex so footer stays pinned to bottom; main app grows */
body{
  display:flex;
  flex-direction:column;
  margin:0;background:linear-gradient(180deg,var(--bg),#080809);
  color:#e6e6e6;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;text-size-adjust:100%;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior-y:contain;
  overflow-x:hidden;
}
#app{flex:1;display:flex;flex-direction:column}

.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,0.02);backdrop-filter:blur(6px)}
.title{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  line-height:1;
}
/* small app icon next to title without breaking layout */
.appIcon{
  width:24px;
  height:24px;
  object-fit:contain;
  border-radius:6px;
  -webkit-user-drag:none;
  user-select:none;
  display:block;
}
/* main app name kept prominent */
.appName{
  font-size:16px;
  color:inherit;
  font-weight:700;
}
/* by-line styled smaller and slightly darker */
.byLine{
  font-size:11px;
  font-weight:600;
  color:rgba(230,230,230,0.75); /* slightly darker / muted than main text */
  margin-left:2px;
}
.controls{display:flex;gap:8px;align-items:center}
.filebtn{background:#0f0f11;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}

/* Make the help button visually match the file selector button */
#helpBtn{
  background:#0f0f11;
  border:1px solid rgba(255,255,255,0.08);
  padding:8px 10px;
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.filebtn input{display:none}
.iconbtn{
  /* glassy translucent icon buttons */
  background: linear-gradient(180deg, rgba(29,185,84,0.12), rgba(29,185,84,0.06));
  border: 1px solid rgba(255,255,255,0.06);
  padding:8px;
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 6px 18px rgba(12,18,12,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform 150ms ease, box-shadow 150ms ease, background 180ms ease;
}

/* single-column simplified layout for mobile */
.content{display:flex;flex-direction:column;flex:1;padding:12px;gap:12px;overflow:auto}
.single{display:flex;flex-direction:column;gap:12px}
.videoWrap{
  position:relative;
  background:linear-gradient(180deg,#0b0b0c,#0f0f11);
  border-radius:12px;
  overflow:hidden;
  min-height:60vh;
  max-height:60vh;        /* enforce fixed height to avoid unexpected resizing */
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* hide native video element; use canvas for preview to avoid duplicate/double visuals */
.videoWrap video{display:none}
.videoWrap.showing video{
  display:block;
  position:relative;
  /* force the same displayed size as the preview canvas: fixed 60vh height
     and ensure the video never overflows the container width so aspect ratio
     is preserved for both vertical and horizontal sources */
  width:auto;
  height:60vh;
  max-height:60vh;
  max-width:100%;
  transform:none;
  object-fit:contain; /* contain within the videoWrap without cropping */
  z-index:2;
}
.videoWrap.showing canvas{
  display:none;
}

/* Canvas should fit inside the videoWrap and match the video element size; preserve aspect ratio */
.videoWrap canvas{
  display:block;
  width:auto;
  max-width:100%;
  /* enforce fixed displayed height so paused preview and playing video match exactly */
  height:60vh;
  max-height:60vh;
  object-fit:contain;
}

/* Frame navigation controls below the preview */
.videoControls{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  /* center controls horizontally within the bar */
  justify-content:center;
  /* stretch buttons to fill available width */
  background:rgba(0,0,0,0.25);
  padding:6px;
  border-radius:10px;
  backdrop-filter:blur(4px);
  z-index: 3;              /* keep controls above the video element when playing */
  pointer-events: auto;   /* ensure buttons remain interactive */
  align-items:center;
  min-height:48px;
}
/* visual range highlight inside transport: positioned behind buttons */
.videoControls .rangeHighlight {
    position: absolute;
    left: 0;
    top: 56px;
    height: 10%;
    width: 0%;
    background: linear-gradient(90deg, rgba(29, 185, 84, 0.7), rgba(29, 185, 84, 0.7));
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}

/* Fit toggle button: neutral, semi-transparent (override green gradient from .iconbtn) */
.fitBtn{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  /* neutral semi-transparent background to avoid green tint */
  background: rgba(255,255,255,0.03) !important;
  /* slightly stronger subtle border to keep button defined on dark bg */
  border:1px solid rgba(255,255,255,0.06) !important;
  color:var(--muted);
  /* reduce overall button chrome so the control itself is a bit smaller */
  padding:6px 8px;
  border-radius:8px;
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  box-shadow: none; /* remove greenish shadow from .iconbtn */
  cursor:pointer;
  /* enlarge only the inner icon by increasing font-size, keep line-height tight */
  font-size:26px;
  line-height:1;
  font-weight:600;
}

/* When fill mode is active on the videoWrap, make the video fill (cover) the area */
.videoWrap.fill video{
  object-fit:cover;
  width:100%;
  height:100%;
}

/* Ensure canvas preserves its fixed displayed height when not playing,
   so paused preview and playing video match visually; in fill mode keep canvas behind */
.videoWrap.fill canvas{
  object-fit:cover;
}
.ctrlBtn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:#ffffff; /* icons set to white */
  padding:6px 8px;           /* reduced padding to save horizontal space */
  border-radius:8px;
  font-size:14px;            /* slightly smaller icons/text so more fit on screen */
  flex: 0 1 auto;            /* allow buttons to shrink when needed instead of forcing equal large widths */
  min-width:34px;            /* smaller minimum hit area while staying touch-friendly */
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Start (inicio) and End (fin) transport buttons: icons only, colored for clarity */
#btnSetInit{
  color: var(--accent); /* green */
  font-weight:700;
  padding-left:12px;
  padding-right:12px;
  font-size:18px; /* slightly larger icon */
}
/* stronger, more specific selector to ensure the End button appears red even when other rules apply */
.videoControls .ctrlBtn#btnSetEnd,
#btnSetEnd {
  color: #ff0000; /* enforce red */
  font-weight:700;
  padding-left:12px;
  padding-right:12px;
  font-size:18px; /* slightly larger icon */
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* Center placeholder absolutely so it remains centered even when canvas/video sizes change.
   Use a vertical layout so an icon can sit above the text. */
.placeholder{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--muted);
  padding:12px 18px;
  text-align:center;
  cursor:pointer;
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
/* Icon above the placeholder text */
.placeholderIcon{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
  -webkit-user-drag: none;
  user-select: none;
  opacity:0.95;
}
/* Keep text styling consistent */
.placeholderText{ font-size:15px; color:var(--muted); }
.controlsBlock{display:flex;flex-direction:column;gap:8px}
.timeRow{display:flex;gap:8px;align-items:center;justify-content:space-between}

/* compact marks display: keep on one line, don't wrap, and truncate if needed */
.marksDisplay{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  color:var(--muted);
  min-width:0;        /* allow flex children to shrink properly */
  margin-left:8px;
}
.timeEdit{display:flex;align-items:center;gap:8px;min-width:0}
.timeEditBtn{
  background:transparent;border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);padding:8px;border-radius:8px;min-width:40px;min-height:40px;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
#timeInput{
  /* reduce the visible width so it's a compact counter; allow the duration label to remain visible */
  width:110px; /* compact fixed width for mm:ss.ms */
  flex:0 0 110px;
  padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;
  text-align:center;
}
#frameSlider{
  width:100%;
  /* add vertical breathing room so adjacent controls aren't tapped accidentally */
  margin:10px 0;
  touch-action:pan-y; /* ensure vertical scrolling remains natural on touch devices */
  min-height:44px; /* slightly larger hit area for easier touch interactions */
}

/* small triangular markers positioned above the slider to indicate start/end of selection */
.sliderWithMarkers{ position:relative; width:100%; }
.sliderMarkers{
  position:absolute;
  left:0;
  /* moved closer to the slider so markers appear nearer the bar */
  top:6px;
  right:0;
  height:12px;
  pointer-events:none;
}
.sliderMarker{
  position:absolute;
  transform:translateX(-50%);
  font-size:12px;
  line-height:12px;
  /* default neutral color kept for fallback */
  color:var(--muted);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  opacity:0;
  transition:opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform, left;
}
/* distinct styles and positions for start (green) and end (red) markers */
.sliderMarker.startMarker{
  transform:translateX(-50%) translateY(-2px);
  top:7px;
  color:var(--accent); /* green for inicio */
  font-weight:700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.sliderMarker.endMarker{
  transform:translateX(-50%) translateY(2px);
  top:3px;
  color:var(--danger); /* red for fin */
  font-weight:700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
/* show when active */
.sliderMarker.visible{ opacity:1; }
.filebtn{background:#0f0f11;padding:8px 8px;border-radius:8px;cursor:pointer;font-size:14px;display:inline-block;text-align:center;border:1px solid rgba(255,255,255,0.08)}
.filebtn input{display:none}
.mainActions{display:flex;gap:8px;align-items:center}
.iconbtn{
  /* glassy translucent icon buttons (larger variant) */
  background: linear-gradient(180deg, rgba(29,185,84,0.12), rgba(29,185,84,0.06));
  border: 1px solid rgba(255,255,255,0.06);
  padding:10px;
  border-radius:12px;
  color:var(--muted);
  cursor:pointer;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 8px 22px rgba(12,18,12,0.36), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform 150ms ease, box-shadow 150ms ease, background 180ms ease;
}
.primary{
  /* prominent green glass button */
  background: linear-gradient(180deg, rgba(29,185,84,0.95), rgba(16,112,52,0.95));
  color:#e9f8ef;
  border:none;
  padding:10px;
  border-radius:12px;
  flex:1;
  box-shadow: 0 12px 30px rgba(13,80,40,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px) saturate(140%);
  cursor:pointer;
  transition: transform 150ms ease, box-shadow 180ms ease;
}



/* footer stays at bottom because body is column flex and #app expands */
.footer{height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
a{color:var(--accent);text-decoration:none}

/* add subtle separation for footer link so it doesn't touch preceding text */
.footer a{ margin-left:5px; display:inline-block; }

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);z-index:9999}
.modal.hidden{display:none}
.modalBox{
  width:88%;
  max-width:420px;
  background:#0b0b0c;
  padding:16px;
  border-radius:12px;
  /* prevent the modal from growing beyond the viewport and allow internal scrolling if needed */
  max-height:80vh;
  overflow:auto;
}
.modalActions{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.modal button{
  padding:8px 12px;
  border-radius:10px;
  border:none;
  background: linear-gradient(180deg, rgba(29,185,84,0.95), rgba(16,112,52,0.95));
  color:#e9f8ef;
  box-shadow: 0 10px 24px rgba(13,80,40,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px) saturate(140%);
  transition: transform 140ms ease, box-shadow 160ms ease;
}

/* confirmation row shown when reset is requested */
.modalConfirm{margin-top:12px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.03)}
.modalConfirm .confirmText{color:var(--muted);font-size:13px;margin-bottom:8px}
.modalConfirm .confirmButtons{display:flex;gap:8px;justify-content:flex-end}
.modalConfirm.hidden{display:none}
/* danger style for destructive action */
.modal button.danger{background:var(--danger);color:#000}

/* Responsive adjustments (single-screen mobile-first) */
@media(min-width:900px){
  .content{padding:20px}
}

/* Hide the visible PWA install button from the interface while keeping the install logic intact */
#installBtn{ display:none !important; }