:root{
  --bg:#0b0d10; --card:#12161c; --muted:#9aa4b2; --text:#e8eef7; --line:#232a33;
  --pill:#1b2330; --blue:#39f; --red:#f44; --ok:#2a5; --warn:#d94;
  --green:#3cb371; --yellow:#f5c400; --sand:#d6c3a3; --cyan:#39c6d6; --orange:#f90; --purple:#a66cff; --pink:#ff6fae;
  --accent:var(--ok); --bg-elevated:#0f1318; --line-soft:#2b3440; --drop-border:#3b4654;
  --bg-app:var(--bg); --bg-panel:var(--card); --bg-table-row:var(--card); --bg-timeline:var(--card);
  --text-primary:var(--text); --text-secondary:var(--muted);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
  /* Transitions douces */
  --transition: 200ms ease;
}

/* Animations simples */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-view {
  animation: fadeIn 0.3s ease;
}
:root[data-theme="blackmagic"]{
  --bg:#0c0f12; --bg-elevated:#12161a; --card:#141a20; --muted:#a7b0bb; --text:#f2f4f6; --line:#27313a;
  --pill:#1b242d; --blue:#4aa3ff; --red:#ff5c5c; --ok:#3fb86d; --warn:#ff9b42;
  --green:#42c27a; --yellow:#f3c24d; --sand:#d7c7ad; --cyan:#35c6d6; --orange:#ff9f3c; --purple:#b38cff; --pink:#ff7db9;
  --accent:#35c6d6; --line-soft:#323c46; --drop-border:#3c4752;
}
:root[data-theme="darkmodern"]{
  --bg:#0d0f14; --bg-elevated:#141822; --card:#161b24; --muted:#a6afbd; --text:#f2f4f8; --line:#2a313d;
  --pill:#1d2430; --blue:#6aa1ff; --red:#ff6161; --ok:#4cc38a; --warn:#ffb04f;
  --green:#53d18f; --yellow:#f7ce5f; --sand:#d8c7a6; --cyan:#4ecdd9; --orange:#ff9f4f; --purple:#8d7bff; --pink:#ff86c1;
  --accent:#7a6cff; --line-soft:#353d4b; --drop-border:#404a5a;
}
:root[data-theme="studio"]{
  --bg:#1a1f26; --bg-elevated:#222833; --card:#252c37; --muted:#a7b0bc; --text:#eef2f7; --line:#313947;
  --pill:#2b3340; --blue:#7ba6ff; --red:#ff6b6b; --ok:#4db888; --warn:#f0b15a;
  --green:#4fc08a; --yellow:#e9c369; --sand:#c9b99a; --cyan:#56c7d6; --orange:#f3a25f; --purple:#9b8bff; --pink:#f08bbd;
  --accent:#8ea2c4; --line-soft:#3b4556; --drop-border:#4a5768;
  --bg-app:#1a1f26; --bg-panel:#252c37; --bg-table-row:#202733; --bg-timeline:#181d24;
  --text-primary:#eef2f7; --text-secondary:#a7b0bc;
}
html{
  scrollbar-gutter: stable;
  height:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  height:100%;
  display:flex;
  flex-direction:column;
}
header{ padding:16px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--bg-elevated),var(--bg)); }
h1{ margin:0 0 6px 0; font-size:16px; font-weight:700; }
.sub{ color:var(--muted); font-size:12px; line-height:1.35; }
.wrap{ padding:14px 18px 22px; max-width:1600px; margin:0 auto; }
.page-content{ flex:1 0 auto; width:100%; }
.header-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.header-main{
  min-width:260px;
}
.theme-switcher{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.theme-switcher label{
  font-size:12px;
  color:var(--muted);
}
.theme-switcher select{
  min-width:160px;
}

.controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 14px; }
input, select, button{
  background:var(--card); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font-size:13px;
}
button{ 
  cursor:pointer; 
  transition: all var(--transition);
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
button:active:not(:disabled) {
  transform: translateY(0);
}
button.primary{ border-color:var(--accent); }
button.primary:hover:not(:disabled) {
  background: rgba(42,170,85,0.15);
  box-shadow: 0 0 12px rgba(42,170,85,0.3);
}
button.danger{ border-color:var(--red); }
button.warn{ border-color:var(--warn); }
input:focus-visible,
select:focus-visible,
button:focus-visible,
.presetDropzone:focus-visible,
.switchToggle input:focus-visible + .switchTrack{
  outline:2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset:1px;
}
.badge{
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  background:var(--pill);
  color:var(--muted);
}
.mediaTimer{
  padding:6px 14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.4px;
  color:var(--text);
  background:color-mix(in srgb, var(--pill) 90%, transparent);
  border-color:var(--line-soft);
}

.drop{
  border:1px dashed var(--drop-border); border-radius:14px; background:color-mix(in srgb, var(--card) 70%, transparent);
  padding:14px; display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.drop strong{ font-size:13px; }
.drop .hint{ color:var(--muted); font-size:12px; }
.warnText{ color:var(--warn); }
.drop.drag{ border-color:var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) inset; }
.mediaDrop{ margin-bottom:12px; }
.mediaDrop.empty{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) inset;
}
.mediaSourceControls{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
.mediaUrlRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.mediaUrlInput{
  flex:1 1 160px;
  min-width:140px;
}
.mediaReloadRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.panel{
  border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--card) 70%, transparent);
  padding:12px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
}
.panel .row{ display:flex; flex-direction:column; gap:6px; }
.panel label{ font-size:12px; color:var(--muted); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; }
.mediaControlCard{
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 70%, transparent);
  padding:10px;
}
.controlPanel{
  position:relative;
  padding:10px;
  padding-top:28px;
}
#tcBadge{
  position:absolute;
  top:8px;
  right:10px;
  z-index:2;
  padding:2px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
  pointer-events:none;
  white-space:nowrap;
}
.hintLine{
  font-size:12px;
  opacity:0.85;
  margin-bottom:6px;
}

.admin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  margin:14px 0;
}
.admin-row{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-color{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.admin-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}

.tabs{ display:flex; gap:10px; align-items:center; margin:12px 0 8px; }
.tab{
  padding:8px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--pill); color:var(--muted); font-size:12px; cursor:pointer;
}
.tab.active{ color:var(--text); border-color:var(--accent); }

table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; }
thead th{ text-align:left; font-size:12px; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); }
tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--bg-table-row, var(--card)) 92%, transparent); }
tbody tr.sel td{ background: color-mix(in srgb, var(--ok) 8%, transparent); }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  border-radius:8px;
  font-size:14px;
  line-height:1;
}
.cell-delete{ text-align:center; }
.cell-offset{ text-align:center; }

.pill{ display:inline-flex; gap:6px; align-items:center; padding:4px 10px; border-radius:999px; background:var(--pill); border:1px solid var(--line); font-size:12px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.dot.red{ background:var(--red); }
.dot.green{ background:var(--green); }
.dot.yellow{ background:var(--yellow); }
.dot.sand{ background:var(--sand); }
.dot.cyan{ background:var(--cyan); }
.dot.blue{ background:var(--blue); }
.dot.purple{ background:var(--purple); }
.dot.pink{ background:var(--pink); }

.cell-edit input{ width:100%; padding:8px 10px; border-radius:10px; }
.slider{ width: 260px; padding:0; height:28px; }
.slider::-webkit-slider-thumb{ width:22px; height:22px; border-radius:50%; cursor:grab; }
.slider:active::-webkit-slider-thumb{ cursor:grabbing; }
.slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; cursor:grab; }
.slider:active::-moz-range-thumb{ cursor:grabbing; }

.tcbox{ display:flex; flex-direction:column; gap:4px; }
.tcnew{ color:var(--ok); font-weight:700; }
.small{ font-size:12px; color:var(--muted); }
hr{ border:0; border-top:1px solid var(--line); margin:14px 0; }

footer{
  border-top:1px solid var(--line);
  background:linear-gradient(0deg,var(--bg-elevated),var(--bg));
  margin-top:auto;
  flex-shrink:0;
}
.footer-wrap{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* Timeline */
.timelineBar{
  border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--card) 70%, transparent);
  padding:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.timelineWrap{
  border:1px solid var(--line); border-radius:14px; background:var(--bg-timeline, var(--card));
  overflow:auto; height:430px; position:relative;
  resize: both; min-width: 520px; min-height: 260px; max-width: 100%;
}
.timelineCanvas{ position:relative; min-height:330px; }
.ruler{
  position:sticky; top:0; height:28px; background:color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom:1px solid var(--line); z-index:10;
}
.tick{ position:absolute; top:0; height:28px; border-left:1px solid var(--line-soft); }
.tickLabel{ position:absolute; top:6px; font-size:11px; color:var(--muted); transform:translateX(4px); }

.lane{ position:absolute; left:0; right:0; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.laneTitle{
  position:absolute; left:10px; font-size:11px; color:var(--muted);
  background:color-mix(in srgb, var(--card) 85%, transparent); border:1px solid var(--line); padding:2px 8px; border-radius:999px;
  transform:translateY(calc(-100% - 6px));
  z-index:8;
}
.laneLine{ position:absolute; left:0; right:0; height:2px; background:var(--line-soft); }

.marker{
  position:absolute; width:12px; height:50px; border-radius:10px;
  background:var(--line-soft); border:1px solid var(--line);
  cursor:grab; box-shadow:0 0 0 2px rgb(0 0 0 / 0.2); z-index:5;
}
.marker:active{ cursor:grabbing; }
.marker::after{
  content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--muted);
}
.marker.red::after{ background:var(--red); }
.marker.green::after{ background:var(--green); }
.marker.yellow::after{ background:var(--yellow); }
.marker.sand::after{ background:var(--sand); }
.marker.cyan::after{ background:var(--cyan); }
.marker.blue::after{ background:var(--blue); }
.marker.purple::after{ background:var(--purple); }
.marker.pink::after{ background:var(--pink); }
.marker.selected{ outline:2px solid var(--accent); }

.mediaTimelinePanel.marker-fill-on .marker{
  background:var(--line-soft);
  border-color:transparent;
}
.mediaTimelinePanel.marker-fill-on .marker::after{ opacity:0; }
.mediaTimelinePanel.marker-fill-on .marker.red{ background:var(--red); }
.mediaTimelinePanel.marker-fill-on .marker.green{ background:var(--green); }
.mediaTimelinePanel.marker-fill-on .marker.yellow{ background:var(--yellow); }
.mediaTimelinePanel.marker-fill-on .marker.sand{ background:var(--sand); }
.mediaTimelinePanel.marker-fill-on .marker.cyan{ background:var(--cyan); }
.mediaTimelinePanel.marker-fill-on .marker.blue{ background:var(--blue); }
.mediaTimelinePanel.marker-fill-on .marker.purple{ background:var(--purple); }
.mediaTimelinePanel.marker-fill-on .marker.pink{ background:var(--pink); }

.markerLabel{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  padding:2px 6px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 95%, transparent); color:var(--text); font-size:11px; white-space:nowrap;
}
.markerInfo{
  position:absolute; top:54px; left:50%; transform:translateX(-50%);
  width:240px; padding:6px 8px; border-radius:12px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--card) 95%, transparent); color:var(--muted); font-size:11px; text-align:center;
  pointer-events:none;
}
.audioDragDebug{
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:30;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:11px;
  padding:4px 6px;
  border-radius:6px;
  pointer-events:none;
  white-space:nowrap;
}
.addDialog{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  padding:14px;
  width:min(520px, 92vw);
}
.addDialogLabel{
  font-size:12px;
  color:var(--muted);
}
.hidden{ display:none !important; }

/* Presets */
.presetPanel{
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 70%, transparent);
  padding:10px 12px;
  margin:12px 0;
}
.presetHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.mediaPresetControls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:8px 0 4px;
}
.presetToggle{
  display:flex;
  align-items:center;
  gap:6px;
}
.presetToggle input{
  margin:0;
}
.switchToggle{
  gap:8px;
  position:relative;
}
.switchToggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.switchToggle .switchTrack{
  width:42px;
  height:22px;
  border-radius:999px;
  background:color-mix(in srgb, var(--text) 12%, transparent);
  border:1px solid var(--line);
  position:relative;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.switchToggle .switchTrack::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--text);
  transition:transform 0.2s ease, background 0.2s ease;
}
.switchToggle input:checked + .switchTrack{
  background:color-mix(in srgb, var(--ok) 35%, transparent);
  border-color:color-mix(in srgb, var(--ok) 70%, transparent);
}
.switchToggle input:checked + .switchTrack::after{
  transform:translateX(20px);
  background:var(--ok);
}
.presetPanel.externalized{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(420px, 92vw);
  max-height:70vh;
  overflow:auto;
  z-index:950;
  box-shadow:0 12px 28px rgba(0,0,0,0.45);
}
.mediaTimelinePanel{
  flex:1;
  min-width:520px;
}
.mediaTimelineHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mediaTimelineTitle{
  font-weight:700;
}
.mediaTimelinePanel.externalized{
  min-width:0;
  display:none;
}
.mediaTimelineWrap{
  height:430px;
}
.mediaPresetWindowBody{
  margin:0;
  min-height:100vh;
  background:var(--bg-elevated);
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex;
  flex-direction:column;
  padding:16px;
  box-sizing:border-box;
}
.mediaPresetWindowHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.mediaPresetWindowTitle{
  font-weight:700;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.mediaPresetWindowContent{
  flex:1;
  overflow:auto;
}
.mediaPresetWindowBody .presetPanel.externalized{
  position:static;
  width:auto;
  max-height:none;
  margin:0;
  box-shadow:none;
}
.mediaTimelineWindowBody{
  margin:0;
  min-height:100vh;
  background:var(--bg-elevated);
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex;
  flex-direction:column;
  padding:16px;
  box-sizing:border-box;
}
.mediaTimelineWindowHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.mediaTimelineWindowTitle{
  font-weight:700;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.mediaTimelineWindowContent{
  flex:1;
  min-height:0;
}
.mediaTimelineWindowBody .mediaTimelinePanel.externalized{
  flex:1;
  min-width:0;
  display:block;
}
.mediaTimelineWindowBody .mediaTimelineWrap{
  height:calc(100vh - 140px);
}
.presetTitle{ font-weight:700; font-size:12px; letter-spacing:0.06em; }
.presetGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
  margin-top:10px;
}
.presetButton{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  min-height:64px;
}
.presetButton .presetLabel{
  font-size:13px;
  font-weight:600;
}
.presetButton .presetHotkey{
  font-size:11px;
  color:var(--muted);
}
.presetRowHeader{
  display:flex;
  align-items:center;
  gap:8px;
}
.presetTable th, .presetTable td{ font-size:12px; }
.presetTable input[type="text"]{ width:100%; padding:8px 10px; }
.presetTable select{ width:100%; }
.presetTable button{ padding:6px 8px; font-size:12px; }
.presetMessage{ 
  min-height:18px;
  margin:8px 0 10px;
  font-size:12px;
  color:var(--muted);
}
.presetMessage.error{ color:var(--red); }
.presetMessage.ok{ color:var(--ok); }
.presetImport{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:6px 0 12px;
  flex-wrap:wrap;
}
.presetDropzone{
  margin-top:6px;
  padding:12px 14px;
  border-radius:12px;
  border:1px dashed var(--line);
  background:color-mix(in srgb, var(--card) 45%, transparent);
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.presetDropzone.dragover{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--card) 80%, transparent);
  color:var(--text);
}

.mediaOverlay{
  position:fixed;
  inset:0;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
}
.mediaOverlayBar{
  display:flex;
  justify-content:flex-end;
}
.mediaOverlayBody{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mediaOverlayBody video{
  max-width:96vw;
  max-height:86vh;
  width:auto;
  height:auto;
  border-radius:12px;
  background:#000;
}
.mediaPresetPopup{
  position:fixed;
  z-index:1100;
  min-width:240px;
  max-width:min(420px, 92vw);
  background:color-mix(in srgb, var(--card) 98%, transparent);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:0 12px 28px rgba(0,0,0,0.45);
}
.mediaPresetPopupHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.mediaPresetPopupTitle{
  font-weight:700;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Playhead */
.playhead{ position:absolute; top:0; bottom:0; width:2px; background:#ff2b2b; z-index:20; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.playheadHandle{ position:absolute; top:2px; left:50%; transform:translateX(-50%); width:10px; height:24px; border-radius:8px; background:#ff2b2b; cursor: ew-resize; }
.mediaTimelinePanel .playhead{ pointer-events:none; }

/* Audio: spectre fond (lane 1) */
.spectreCanvas{ position:absolute; left:0; pointer-events:none; }

#toastHost{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

#toastHost .toast{
  pointer-events:auto;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:10px;
  padding:10px 14px;
  box-shadow:0 8px 16px rgba(0,0,0,0.25);
  max-width:min(420px, calc(100vw - 32px));
  transition:opacity 0.2s ease, transform 0.2s ease;
}

#toastHost .toast.toast-success{ border-left-color:var(--ok); }
#toastHost .toast.toast-warning{ border-left-color:var(--warn); }
#toastHost .toast.toast-error{ border-left-color:var(--red); }
#toastHost .toast.toast-out{ opacity:0; transform:translateY(-6px); }