content.css

#das-toast {
  position: fixed;
  top: 76px;
  left: 50%;
  z-index: 2147483647;
  display: flex;
  max-width: min(760px, calc(100vw - 32px));
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
  background: rgba(22, 24, 29, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -10px);
  transition: opacity 160ms ease, transform 160ms ease;
}

#das-toast > span:first-child { min-width:0; overflow-wrap:anywhere; }

#das-toast.das-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.das-player-controls {
  display: flex !important;
  align-items: center;
  width: auto !important;
  height: 32px !important;
  margin: 0 2px;
  overflow: visible !important;
  color: #fff;
}

.das-player-controls .das-control-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: 7px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  opacity: .9;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}

.das-player-controls .das-control-button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

.das-player-controls svg { width: 22px; height: 22px; overflow: visible; fill: currentColor; }
.das-player-controls .das-accent { fill: none; stroke: #25f4ee; stroke-width: 2.4; stroke-linecap: round; }
.das-player-controls .das-cut { fill: none; stroke: #161823; stroke-width: 2.2; stroke-linecap: round; }
.das-player-controls .das-light-cut { stroke: #fff; }
.das-player-controls.das-is-creating .das-control-button[data-action="end"] { color: #25f4ee; }
.das-player-controls.das-is-creating .das-control-button[data-action="cancel"] { color: #fe2c55; }

.das-player-controls .das-control-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 160px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, .86);
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}

.das-player-controls .das-control-button:hover::after { opacity: 1; transform: translate(-50%, 0); }

.das-preview-bar {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.das-preview-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 1px;
  background: #00d400;
  opacity: .82;
  pointer-events: auto;
}

.das-preview-segment.das-category-sponsor { background:#00d400; }
.das-preview-segment.das-category-selfpromo { background:#f4d03f; }
.das-preview-segment.das-category-interaction { background:#d15cff; }
.das-preview-segment.das-pending { opacity:.5; }
.das-preview-segment.das-candidate { opacity:.68; background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.28) 4px 8px); }

.das-submission-menu {
  position: absolute;
  right: clamp(16px, 5vw, 86px);
  bottom: 68px;
  z-index: 10020;
  width: min(440px, calc(100% - 32px));
  max-height: min(560px, calc(100% - 92px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  color: #fff;
  background: rgba(18,20,25,.97);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.das-submission-menu header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 11px; }
.das-submission-menu header div { display:flex; min-width:0; flex-direction:column; }
.das-submission-menu header strong { font-size:18px; }
.das-submission-menu header small { margin-top:2px; color:#858a95; font-size:11px; font-weight:500; }
.das-submission-menu header button { display:grid; flex:none; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; color:#aaa; background:transparent; font-size:25px; cursor:pointer; }
.das-submission-menu header button:hover { color:#fff; background:rgba(255,255,255,.08); }
.das-submission-menu > p { margin:0; padding:0 18px 13px; color:#aeb2bc; font-size:12px; }
.das-submission-menu ol { max-height:min(380px, calc(100vh - 286px)); margin:0; padding:0 10px; overflow:auto; list-style:none; scrollbar-width:thin; }
.das-submission-menu li { display:grid; grid-template-columns:minmax(112px,auto) minmax(0,1fr); gap:12px 14px; padding:15px 8px; border-top:1px solid rgba(255,255,255,.09); }
.das-segment-summary { display:flex; align-self:start; flex-direction:column; padding-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.das-segment-category { min-width:0; }
.das-submission-menu li small { margin-top:3px; color:#8f939d; font-size:11px; }
.das-submission-menu li button { min-height:32px; padding:5px 10px; border:1px solid rgba(37,244,238,.3); border-radius:7px; color:#25f4ee; background:rgba(37,244,238,.08); cursor:pointer; white-space:nowrap; }
.das-submission-menu li button:hover { background:rgba(37,244,238,.15); }
.das-submission-menu li button.das-active { color:#161823; background:#25f4ee; }
.das-submission-menu li select { min-width:0; width:100%; padding:6px 8px; border:1px solid rgba(255,255,255,.18); border-radius:7px; color:#fff; background:#292c33; }
.das-submission-menu li em { color: #9da0a9; font-style: normal; }
.das-segment-primary-actions { grid-column:1 / -1; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:7px; }
.das-segment-primary-actions button { display:flex; min-width:0; height:48px; align-items:center; justify-content:center; gap:7px; padding:6px 8px !important; color:#e7e9ee !important; border-color:rgba(255,255,255,.13) !important; background:rgba(255,255,255,.045) !important; }
.das-segment-primary-actions button:first-child { color:#25f4ee !important; border-color:rgba(37,244,238,.28) !important; background:rgba(37,244,238,.09) !important; }
.das-segment-primary-actions button:hover { border-color:rgba(37,244,238,.42) !important; background:rgba(37,244,238,.13) !important; }
.das-segment-primary-actions button b { flex:none; font-size:15px; font-weight:500; }
.das-segment-primary-actions button span { overflow:hidden; text-overflow:ellipsis; }
.das-segment-secondary-actions { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.das-segment-secondary-actions button { min-height:30px !important; padding:4px 2px !important; border:0 !important; color:#aeb2bc !important; background:transparent !important; }
.das-segment-secondary-actions button:hover { color:#25f4ee !important; background:transparent !important; }
.das-segment-secondary-actions button[data-menu-action="toggle-editor"] { display:flex; align-items:center; gap:7px; }
.das-segment-secondary-actions button[data-menu-action="toggle-editor"] b { transition:transform .16s ease; }
.das-segment-secondary-actions button[data-menu-action="toggle-editor"].das-active b { transform:rotate(180deg); }
.das-segment-secondary-actions button[data-menu-action="delete-segment"] { color:#ff718d !important; }
.das-segment-editor { grid-column:1 / -1; display:grid; grid-template-columns:36px 32px minmax(84px,1fr) 32px; gap:5px; align-items:center; }
.das-segment-editor[hidden] { display:none; }
.das-segment-editor > span { color:#8f939d; font-size:11px; }
.das-segment-editor button[data-menu-action="seek-boundary"] { color:#fff; border-color:rgba(255,255,255,.14); background:#292c33; font-variant-numeric:tabular-nums; }
.das-segment-editor button[data-menu-action="adjust"] { padding:0; font-size:17px; }
.das-frame-controls { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; padding-top:11px; border-top:1px solid rgba(255,255,255,.08); }
.das-frame-controls button { display:flex; height:42px; align-items:center; justify-content:center; gap:8px; color:#dfe2e8 !important; border-color:rgba(255,255,255,.14) !important; background:rgba(255,255,255,.045) !important; }
.das-frame-controls button:hover { color:#25f4ee !important; border-color:rgba(37,244,238,.4) !important; background:rgba(37,244,238,.1) !important; }
.das-frame-controls button b { color:#25f4ee; font-size:22px; font-weight:400; line-height:1; }
.das-frame-controls kbd { min-width:24px; padding:2px 6px; border:1px solid #4a4f5b; border-bottom-width:2px; border-radius:5px; color:#b9bdc6; background:#292c33; font:11px/1.4 inherit; text-align:center; }
.das-submission-actions { display:grid; grid-template-columns:1.15fr .85fr; gap:10px; padding:0 18px 18px; }
.das-submission-actions button { flex:1; min-width:0; padding:10px; border:0; border-radius:8px; overflow:hidden; color:#fff; background:#34363d; cursor:pointer; text-overflow:ellipsis; white-space:nowrap; }
.das-submission-actions button:first-child { color: #161823; background: #25f4ee; font-weight: 700; }
.das-submission-actions button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 520px) {
  .das-submission-menu { right:8px; bottom:56px; width:calc(100% - 16px); max-height:calc(100% - 68px); }
  .das-submission-menu li { grid-template-columns:1fr; }
  .das-segment-primary-actions { grid-template-columns:1fr 1fr; }
  .das-segment-primary-actions button:first-child { grid-column:1 / -1; }
  .das-submission-actions { grid-template-columns:1fr; }
}

.das-toast-actions { display:flex; flex:none; flex-wrap:wrap; gap:6px; pointer-events:auto; }
.das-toast-actions button { padding:4px 8px; border:1px solid rgba(255,255,255,.24); border-radius:6px; color:#fff; background:rgba(255,255,255,.1); cursor:pointer; }
.das-toast-actions button:hover { border-color:#25f4ee; color:#25f4ee; }
.das-toast-actions button:disabled { opacity:.55; cursor:default; }