/* Izycut Slate Pro theme.
   Loaded after the component styles so the editor can keep its existing layout and behavior while
   using a dark workspace with a single coral action color. */
:root {
  color-scheme: dark;
  --bg: #151719;
  --surface: #1e2124;
  --surface-2: #272b2f;
  --surface-3: #2d3338;
  --surface-hover: #30363b;
  --surface-active: #363d43;
  --line: #353a3f;
  --text: #f4f6f7;
  --muted: #9ca5ab;
  --ink: #f4f6f7;
  --purple: #e87357;
  --teal: #e87357;
  --accent: #e87357;
  --accent-rgb: 232, 115, 87;
  --accent-soft: #30211d;
  --accent-selected: #3b2924;
  --accent-border: #98513f;
  --accent-ring: rgb(232 115 87 / 28%);
  --exp-border: #353a3f;
  --exp-accent: #e87357;
  --exp-accent-hover: #f18468;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Scrollbar mảnh, track trong suốt (không còn dày 10px + track đặc màu như trước) — áp dụng UNIVERSAL
   qua `*` thay vì liệt kê từng container (.panel/.base-clips__scroller/...), để MỌI vùng cuộn trong
   app (Media Library list, timeline tracks, dialog, gradient/texture picker...) đều đồng bộ 1 kiểu,
   không sót chỗ nào. scrollbar-width/-color cho Firefox, ::-webkit-scrollbar* cho Chromium/Cốc Cốc. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--surface-hover);
}

.header,
.panel,
.preview-card,
.base-clips {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 28px rgb(0 0 0 / 20%) !important;
}

div.preview-card {
  border: 1px solid #353a3f !important;
  border-radius: 8px;
}

.header {
  height: 52px;
  min-height: 52px;
  margin-bottom: 8px;
  padding-inline: 14px;
  border-top: 0;
}

.brand {
  gap: 8px;
  font-size: 18px;
}

.brand img {
  width: 34px;
  height: 34px;
}

.brand__project-name {
  font-size: 13px;
}

.brand__tagline {
  font-size: 11px;
}

.header-actions .button,
.header-actions .settings {
  height: 34px;
  border-radius: 8px;
}

.header-actions .primary {
  padding-inline: 11px;
}

.header-actions .settings {
  width: 34px;
}

.brand__project-name,
.brand__project-dropdown,
.panel h2,
.tool,
.tool__label,
.panel-advanced__empty-title,
.control-section__title,
.control-num-input,
.control-group textarea,
.color-hex-input,
.media-library-item__name,
.sound-card__label,
.effect-card__label,
.base-clips__action,
.base-clips__ratio-select,
.base-clips__zoom-btn {
  color: var(--muted) !important;
}

.brand__tagline,
.panel-advanced__empty-hint,
.control-group label,
.control-unit,
.sound-card__duration,
.media-library-item__meta,
.base-clips__ruler-tick,
.controls span,
.ratio,
.privacy {
  color: var(--muted) !important;
}

.button,
.settings,
.player,
.ratio,
.tool,
.btn-ghost,
.media-upload-btn,
.transform-chip,
.tool-panel__close,
.sound-fav-toggle,
.sound-search,
.sound-tab,
.sound-source-tab,
.control-num-input,
.color-hex-input,
.control-group textarea,
.control-group--inline select,
.control-group--slider-row select,
.base-clips__ratio-select,
.base-clips__zoom-btn,
.base-clips__add {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

.control-group--inline select,
.control-group--slider-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c0' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
}

.button:hover,
.settings:hover,
.player:hover,
.ratio:hover,
.btn-ghost:hover,
.media-upload-btn:hover,
.transform-chip:hover,
.tool-panel__close:hover,
.sound-fav-toggle:hover,
.sound-tab:hover,
.sound-source-tab:hover,
.base-clips__zoom-btn:hover,
.base-clips__add:hover {
  background-color: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
}

.btn-ghost:disabled,
.transform-chip:disabled {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  opacity: .55;
}

.transform-chip--selected,
.transform-chip.tool--active {
  background: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

.button.primary,
.header-actions .primary,
.sound-card__add,
.sound-card__play--playing,
.base-clip__divider-btn--active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.button.primary:hover,
.sound-card__add:hover {
  background: var(--exp-accent-hover) !important;
}

.btn-primary:disabled {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
  opacity: .55;
}

.btn-primary:disabled:hover {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
}

.panel.basic .tool {
  background: transparent !important;
  border-color: var(--line) !important;
}

/* Slate sidebar: compact vertical tool rail with icon above the label. */
.panel.basic {
  /* background: var(--bg) !important; */
  border-right-color: var(--line) !important;
}

.panel-basic__scroll {
  gap: 3px;
  padding: 6px;
}

.panel.basic .tool,
.panel.basic .advanced-tool {
  width: 100%;
  height: 82px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 7px;
  background: transparent !important;
  color: var(--muted) !important;
}

.panel.basic .tool .material-symbols-outlined,
.panel.basic .advanced-tool .material-symbols-outlined {
  font-size: 28px;
  line-height: 1;
  color: #aab4c5 !important;
}

.panel.basic .tool__label,
.panel.basic .advanced-tool .tool__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  color: #b7bfcc !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.panel.basic .tool:hover,
.panel.basic .advanced-tool:hover {
  background: #24282d !important;
  border-left-color: #59616d !important;
  color: var(--text) !important;
  transform: none;
  box-shadow: none;
}

.panel.basic .tool:hover .material-symbols-outlined,
.panel.basic .advanced-tool:hover .material-symbols-outlined {
  color: #d7dee8 !important;
}

.panel.basic .tool--active {
  background: var(--accent-selected) !important;
  border-left-color: var(--accent) !important;
  color: var(--accent) !important;
}

.panel.basic .tool--active .material-symbols-outlined,
.panel.basic .tool--active .tool__label small {
  color: var(--accent) !important;
}

.panel.basic .tool--active .tool__label {
  color: var(--text) !important;
}

.panel.basic .tool--active:focus,
.panel.basic .tool--active:focus-visible {
  background: var(--accent-selected) !important;
  border-left-color: var(--accent) !important;
}

.tool:focus,
.tool:focus-visible {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  color: var(--text) !important;
  outline: none;
}

.toast {
  background: var(--surface-3) !important;
  border: 1px solid var(--line);
  color: var(--text) !important;
  box-shadow: 0 10px 28px rgb(0 0 0 / 34%);
}

.preview-card {
  background-image: none !important;
}

.stage {
  background: #0a0b0c !important;
}

.empty button {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 18px rgb(0 0 0 / 24%);
}

/* Flat upload state: no gradient, with one clear coral action. */
.empty__panel {
  width: min(360px, calc(100% - 32px));
  padding: 22px 22px 20px;
  border: 1px solid #4b6273;
  border-radius: 10px;
  background: #20252a;
  box-shadow: 0 10px 24px rgb(0 0 0 / 28%);
}

.empty__hint {
  margin-top: 8px;
  max-width: 320px;
  color: var(--muted) !important;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}

.empty button,
.empty button:hover {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 2px 8px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 19px;
  font-weight: 600;
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.empty button:hover {
  background: rgb(255 255 255 / 5%) !important;
  transform: none;
}

.empty button .upload-label {
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor;
}

.empty button .upload-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #16b8c8 !important;
  color: #fff !important;
  font-size: 19px;
  line-height: 1;
  -webkit-text-fill-color: #fff;
}

#mediaLibraryUploadBtn {
  height: 40px;
  gap: 8px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 600;
}

#mediaLibraryUploadBtn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
}

#mediaLibraryUploadBtn .material-symbols-outlined {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #16b8c8;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.workspace,
.advanced-params,
.advanced-grids,
.tool-panel,
.panel-advanced__empty {
  background: transparent !important;
  color: var(--text);
}

.tool-panel__header,
.sound-source-tabs,
.base-clips__toolbar {
  border-color: var(--line) !important;
}

.sound-source-tab--active,
.sound-tab--active,
.bg-picker-mode--active {
  background: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

.sound-search:focus,
.sound-tab:focus-visible,
.sound-source-tab:focus-visible,
.control-num-input:focus,
.color-hex-input:focus,
.control-group textarea:focus,
.control-group--inline select:focus,
.control-group--slider-row select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  outline: none;
}

.sound-card,
.effect-card__thumb,
.effect-card__thumb--emoji,
.media-library-item,
.media-library-item__thumb,
.base-clips__group,
.control-section--card,
.stage-bg-picker,
.timeline-edit-item {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

/* Grid view (Media Library): item không nền, chỉ thumb có nền — override rule gộp ở trên. */
.media-library-item--grid {
  background: transparent !important;
  border-color: transparent !important;
}

.sound-card--selected,
.effect-card--selected .effect-card__thumb,
.media-library-item--selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-ring) !important;
}

.sound-card__play {
  background: var(--surface-3) !important;
  color: var(--accent) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 30%) !important;
}

.sound-card__fav,
.sound-card__fav--active {
  color: var(--muted) !important;
}

.sound-card__fav:hover,
.sound-card__fav--active {
  color: #f5b85d !important;
}

.media-library-empty,
.media-library-list,
.media-library-item__info {
  color: var(--muted);
}

.control-section--card {
  background: var(--surface-2) !important;
}

.color-hex-input:disabled,
.control-num-input:disabled {
  background: var(--surface) !important;
  color: var(--muted) !important;
}

.control-toggle input[type="checkbox"] {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
}

.control-toggle input[type="checkbox"]:checked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

#seek::-webkit-slider-runnable-track,
.control-group input[type="range"]::-webkit-slider-runnable-track,
.control-section__title input[type="range"]::-webkit-slider-runnable-track,
#seek::-moz-range-track,
.control-group input[type="range"]::-moz-range-track,
.control-section__title input[type="range"]::-moz-range-track,
.base-clips__zoom input[type="range"]::-webkit-slider-runnable-track,
.base-clips__zoom input[type="range"]::-moz-range-track {
  background: var(--line) !important;
}

#seek::-webkit-slider-thumb,
#seek::-moz-range-thumb,
.control-group input[type="range"]::-webkit-slider-thumb,
.control-group input[type="range"]::-moz-range-thumb,
.control-section__title input[type="range"]::-webkit-slider-thumb,
.control-section__title input[type="range"]::-moz-range-thumb,
.base-clips__zoom input[type="range"]::-webkit-slider-thumb,
.base-clips__zoom input[type="range"]::-moz-range-thumb {
  border-color: var(--surface) !important;
}

.base-clips__group,
.base-clips__controls .player,
.base-clips__action {
  background-color: transparent !important;
}

.base-clips__action:hover:not(:disabled),
.base-clips__controls .player:hover {
  background: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
}

.base-clips__divider,
.base-clips__ruler-tick::before {
  background: var(--line) !important;
}

.base-clip {
  border-color: var(--line) !important;
}

.base-clip--focused {
  border-color: var(--accent) !important;
}

.base-clips__add:hover {
  background: var(--accent-selected) !important;
}

.dialog-overlay {
  background: rgb(0 0 0 / 68%) !important;
}

.dialog,
.dialog__body,
.dialog__header,
.dialog__footer,
.result-info,
.result-actions {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text);
}

.dialog__close:hover,
.result-btn--close:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

.dialog-btn--apply,
.result-btn--download {
  background: var(--accent) !important;
  color: #fff !important;
}

.dialog-btn--apply:hover,
.result-btn--download:hover {
  background: var(--exp-accent-hover) !important;
}

/* #animationFullscreen: cùng bảng màu với #advancedGrids. */
.animation-fullscreen__dialog,
.animation-fullscreen__body {
  background: var(--surface);
  border-color: var(--line);
}

.animation-fullscreen__header {
  background: var(--surface);
  border-bottom-color: var(--line);
}

.animation-fullscreen__back:hover {
  background: var(--surface-hover);
}

.animation-fullscreen .textfx-speed,
.animation-fullscreen .textfx-anim-card {
  background: var(--surface-2);
  border-color: var(--line);
}

.animation-fullscreen #addTextAnimGroup {
  background: var(--surface-2);
}

.animation-fullscreen #addTextAnimGroup .transform-chip {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.animation-fullscreen #addTextAnimGroup .transform-chip:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.animation-fullscreen #addTextAnimGroup .transform-chip.tool--active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.animation-fullscreen .textfx-anim-card:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
}

.animation-fullscreen .textfx-anim-card--selected {
  background: var(--accent-selected);
  border-color: var(--accent);
  color: var(--accent);
}

.animation-fullscreen .textfx-speed {
  color: var(--muted);
}

.animation-fullscreen .textfx-anim-label {
  color: var(--muted);
}

.animation-fullscreen .textfx-anim-card--selected .textfx-anim-label {
  color: var(--text);
}

.result-video {
  background: #0a0b0c !important;
}

.format-chip {
  background: var(--surface-2) !important;
  border-color: var(--exp-border) !important;
  color: var(--text) !important;
}

.format-chip--selected {
  background: rgba(232, 115, 87, .2) !important;
  border-color: var(--exp-accent) !important;
  color: var(--exp-accent) !important;
}

.form-group input[type="number"] {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.form-group input[type="number"]:focus {
  background: var(--surface-3) !important;
  border-color: var(--accent) !important;
}

.setting-item__select {
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c0' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.result-info {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.result-actions {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

.project-item__rename:hover {
  background: var(--surface-hover) !important;
}

.text-fx-item--none {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

#stageBgPicker {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text);
}

#stageBgPicker .bg-picker-mode,
#stageBgPicker .bg-picker-custom-btn {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

#stageBgPicker .bg-picker-mode:hover,
#stageBgPicker .bg-picker-custom-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

#stageBgPicker .bg-picker-mode--active {
  background: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

/* Sticker/emoji artwork stays transparent inside the Slate tile. */
#elementsGrid .effect-card__thumb {
  padding: 8px;
}

#elementsGrid .effect-card__thumb img {
  background: transparent !important;
}

/* Text animation picker: keep the controls compact, then give each preset a clear dark tile. */
#texteffectsGrid .textfx-anim-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#addTextAnimGroup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#addTextAnimGroup .transform-chip {
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--surface-2) !important;
  /* color: var(--text) !important; */
  font-size: 12px;
  font-weight: 600;
}

#addTextAnimGroup .transform-chip:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
}

#addTextAnimGroup .transform-chip.tool--active,
#addTextAnimGroup .transform-chip--selected {
  background: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

#textfxSpeedRow {
  min-width: 124px;
  justify-content: space-between;
  margin: 0 !important;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2) !important;
  color: var(--muted);
  white-space: nowrap;
}

#textfxSpeedRow select {
  /* color: var(--text) !important; */
}

#texteffectsGridIn,
#texteffectsGridOut,
#texteffectsGridAttention {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 2px 1px 8px;
}

#texteffectsGridIn .textfx-anim-card,
#texteffectsGridOut .textfx-anim-card,
#texteffectsGridAttention .textfx-anim-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  aspect-ratio: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  /* visible (không clip) để box có không gian di chuyển thật sự khi animation In/Out chạy,
     thay vì bị cắt mất đoạn đầu/cuối bởi overflow:hidden của card. */
  overflow: visible;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease,
    transform .16s ease;
}

#texteffectsGridIn .textfx-anim-stage,
#texteffectsGridOut .textfx-anim-stage,
#texteffectsGridAttention .textfx-anim-stage {
  min-height: 64px;
}

#texteffectsGridIn .textfx-anim-card:hover,
#texteffectsGridOut .textfx-anim-card:hover,
#texteffectsGridAttention .textfx-anim-card:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
  transform: translateY(-1px);
}

#texteffectsGridIn .textfx-anim-card--selected,
#texteffectsGridOut .textfx-anim-card--selected,
#texteffectsGridAttention .textfx-anim-card--selected {
  background: var(--accent-selected);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

#texteffectsGridIn .textfx-anim-box,
#texteffectsGridOut .textfx-anim-box,
#texteffectsGridAttention .textfx-anim-box {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #0f8f83;
  flex-shrink: 0;
  /* keyframes.css dùng đơn vị em cho translate -> tăng font-size vừa đủ để quãng đường di
     chuyển rõ trong .textfx-anim-stage (64px), không cần phóng to chính cái box. */
  font-size: 24px;
}

#texteffectsGridIn .textfx-anim-label,
#texteffectsGridOut .textfx-anim-label,
#texteffectsGridAttention .textfx-anim-label {
  /* dính hẳn xuống đáy card (flex column + margin-top:auto), bất kể hộp preview to nhỏ thế nào */
  margin-top: auto;
  padding-top: 8px;
  min-height: 0;
  max-width: 100%;
  padding-inline: 1px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--muted);
}

/* Draw controls use the same tab/chip language as the Animation panel. */
#panelDraw .transform-group__label {
  color: var(--muted) !important;
  font-weight: 600;
}

#drawActionsRow .draw-action-btn,
#drawActionsRow #drawTransformToggle {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

#drawActionsRow .draw-action-btn:hover:not(:disabled),
#drawActionsRow #drawTransformToggle:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
}

#drawActionsRow .draw-action-btn:disabled {
  background: var(--surface-3) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
  opacity: .55;
}

#drawActionsRow #drawClear {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

#drawShapeOptions .transform-chip,
#drawLineDashOptions .transform-chip {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
}

#drawShapeOptions .transform-chip:hover,
#drawLineDashOptions .transform-chip:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
}

#drawShapeOptions .transform-chip--selected,
#drawLineDashOptions .transform-chip--selected {
  background: var(--accent-selected) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

#panelDraw .control-value {
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums;
}

/* Keep the exported video and real media thumbnails untouched; this only styles editor chrome. */
img,
video,
canvas {
  color-scheme: normal;
}

/* Timeline toolbar: use spacing and slim separators instead of nested button cards. */
.base-clips__toolbar {
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line) !important;
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  color: var(--muted);
}

.base-clips__toolbar button,
.base-clips__toolbar select,
.base-clips__toolbar input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.base-clips__group {
  min-height: 36px;
  height: auto;
  padding: 0;
  /* gap: 4px; */
  border: 0 !important;
  background: transparent !important;
}

.base-clips__action,
.base-clips__zoom-btn,
.base-clips__controls .player {
  min-height: 40px;
  height: 40px;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.base-clips__controls .player {
  width: 40px;
  min-width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.base-clips__action,
.base-clips__zoom-btn {
  border-radius: 6px;
}

.base-clips__action .material-symbols-outlined,
.base-clips__zoom .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.base-clips__zoom-btn {
  width: 36px;
  min-width: 36px;
}

.base-clips__ratio-select,
#stageBgSwatch {
  height: 30px;
}

.base-clips__ratio-select {
  font-size: 14px;
}

.base-clips__group--right {
  /* font-size: 14px; */
}

.base-clips__controls {
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  color: inherit;
}

.base-clips__controls #currentTime,
.base-clips__controls #duration,
.base-clips__controls .seek-labels__sep {
  font-size: inherit;
  line-height: inherit;
}

.base-clips__controls .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

#baseZoomFit {
  padding: 0;
}

.base-clips__action:hover:not(:disabled),
.base-clips__zoom-btn:hover,
.base-clips__controls .player:hover {
  border: 0 !important;
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}

/* The ratio and canvas swatch are the two intentional bordered controls. */
.base-clips__ratio-select,
#stageBgSwatch {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  margin-right: 8px;
}

.base-clips__divider {
  display: block !important;
  flex: 0 0 1px !important;
  width: 1px;
  min-width: 1px;
  height: 20px;
  background: #68747e !important;
  opacity: 1 !important;
}

.base-clips__controls #play {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

.base-clips__controls #play:hover {
  background: var(--surface-hover) !important;
}

@media (max-width: 900px) {
  .header {
    padding-inline: 14px;
  }
}

input[type="text"],
textarea {
  background-color: #0a0b0c;
}

/* Draw panel: flat, compact treatment approved in the UI mockup. */
#panelDraw {
  padding: 10px 12px;
}

#panelDraw .transform-group {
  margin: 0;
  padding: 14px 0 0;
  border: 0;
}

#panelDraw .transform-group + .transform-group {
  margin-top: 12px;
  border-top: 0;
}

#panelDraw .transform-group__label {
  display: block;
  margin: 0 0 9px;
  color: var(--text) !important;
  font-size: 12px;
  letter-spacing: .01em;
}

#panelDraw .draw-style-group {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Fill shape is optional; when shown it must remain a compact full-width row above the grid. */
#panelDraw #drawFilledRow {
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin: 0 0 10px;
  padding: 14px;
  border-radius: 9px;
  background: var(--surface-2);
}

#panelDraw #drawFilledRow > label:first-child {
  margin: 0;
}

#drawActionsRow {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 7px;
}

#drawActionsRow:has(#drawTransformRow[style*="display: flex"]),
#drawActionsRow:has(#drawTransformRow[style*="display:flex"]) {
  grid-template-columns: none;
}

#drawActionsRow #drawEraser.transform-chip--selected {
  background: var(--accent-selected) !important;
  color: var(--accent) !important;
}

.draw-shape-thumb {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

#drawActionsRow .draw-action-btn,
#drawActionsRow #drawTransformToggle {
  min-height: 48px;
  height: 48px;
  border: 0 !important;
  border-radius: 8px;
  background: var(--surface-2) !important;
}

#drawActionsRow .draw-action-btn:hover:not(:disabled),
#drawActionsRow #drawTransformToggle:hover {
  background: var(--surface-hover) !important;
}

#drawShapeOptions.transform-options {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#drawShapeOptions::-webkit-scrollbar { display: none; }

#drawShapeOptions .draw-shape-page {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 54px;
  align-content: start;
  gap: 7px;
}

.draw-shape-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.draw-shape-nav {
  display: flex;
  gap: 4px;
}

.draw-shape-nav button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: inherit;
  cursor: pointer;
}

.draw-shape-nav button:hover { background: var(--surface-hover); }

.draw-shape-nav .material-symbols-outlined { font-size: 18px; }

.draw-shape-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.draw-shape-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-hover);
  cursor: pointer;
}

.draw-shape-dots button.active { background: var(--accent); }

#drawShapeOptions .transform-chip {
  width: 100%;
  height: 54px;
  min-height: 54px;
  flex-direction: column;
  gap: 3px;
  border: 0 !important;
  border-radius: 8px;
  background: var(--surface-2) !important;
}

#drawShapeOptions .transform-chip:hover {
  background: var(--surface-hover) !important;
}

#drawShapeOptions .transform-chip--selected {
  background: var(--accent-selected) !important;
  color: var(--accent) !important;
}

#drawShapeOptions .draw-chip-label {
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* Keep the original single color picker instead of introducing a palette. */
#panelDraw .draw-color-row input[type="color"] {
  width: 38px;
  height: 28px;
  padding: 2px;
  border-radius: 7px;
}

/* Style controls: give the width slider most of the row and keep the color picker compact. */
#panelDraw .draw-style-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(88px, 3fr);
  gap: 10px;
  align-items: stretch;
  padding: 0;
}

#panelDraw .draw-shape-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(88px, 3fr);
  gap: 10px;
  margin-top: 10px;
}

#panelDraw .draw-shape-grid:has(#drawBorderRadiusRow[style*="display:none"]):has(#drawFilledRow[style*="display:none"]),
#panelDraw .draw-shape-grid:has(#drawBorderRadiusRow[style*="display: none"]):has(#drawFilledRow[style*="display: none"]) {
  display: none;
}

#panelDraw .draw-shape-grid .draw-style-card {
  min-width: 0;
  margin: 0;
}

#panelDraw .draw-shape-grid #drawFilledRow {
  min-height: 0;
  margin: 0;
}

#panelDraw .draw-style-grid .control-group {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border-radius: 9px;
  background: var(--surface-2);
}

#panelDraw .draw-style-grid .control-group label {
  min-height: 18px;
  margin-bottom: 6px;
}

#panelDraw .draw-style-grid .draw-color-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

#panelDraw .draw-style-grid .draw-color-row input[type="color"] {
  margin-top: 1px;
}

#panelDraw .draw-style-card {
  padding: 14px;
  border-radius: 9px;
  background: var(--surface-2);
}

#panelDraw .draw-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(88px, 3fr);
  gap: 10px;
  margin-top: 10px;
}

#panelDraw .draw-alpha-card .control-group {
  margin: 0;
}

#panelDraw .draw-animation-group {
  min-width: 0;
  display: flex;
  align-items: center;
}

#panelDraw .draw-animation-group .btn-animation-trigger {
  position: relative;
  width: 100%;
  max-width: none;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0 10px;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

#panelDraw .draw-animation-group .btn-animation-trigger__arrow {
  margin-left: auto;
}

#panelDraw .draw-animation-group .btn-animation-trigger--active {
  background: transparent !important;
  color: var(--accent);
}

#panelDraw #drawLineDashRow {
  margin-top: 12px;
}

/* One compact row for Solid / Dashed / Dotted. */
#drawLineDashOptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#drawLineDashOptions .transform-chip {
  width: 100%;
  height: 32px;
  padding: 0 6px;
  border: 0 !important;
  border-radius: 7px;
}