@import url("https://fonts.googleapis.com/css2?family=Inter:wght@420;500;600;700&display=swap");

html.dt-skin {
  --dt-bg: #07090f;
  --dt-bg-2: #0c1018;
  --dt-card: #10151e;
  --dt-card-2: #151b27;
  --dt-line: rgba(255, 255, 255, 0.08);
  --dt-line-strong: rgba(255, 255, 255, 0.14);
  --dt-text: #e7edf6;
  --dt-muted: #8b95a8;
  --dt-dim: #667084;
  --dt-white: #f4f7fb;
  --dt-ink: #0c1016;
  --dt-green: #1f9d57;
  --dt-green-bg: rgba(31, 157, 87, 0.16);
  --dt-red: #e11d48;
  --dt-red-bg: rgba(225, 29, 72, 0.14);
  --dt-amber: #e2b340;
  --dt-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html.dt-skin[data-color-scheme="light"] {
  --dt-bg: #f3f5f8;
  --dt-bg-2: #ffffff;
  --dt-card: #ffffff;
  --dt-card-2: #f7f8fb;
  --dt-line: rgba(16, 24, 40, 0.08);
  --dt-line-strong: rgba(16, 24, 40, 0.14);
  --dt-text: #121722;
  --dt-muted: #5c677a;
  --dt-dim: #7b8699;
  --dt-white: #121722;
  --dt-ink: #ffffff;
  --dt-shadow: 0 16px 40px rgba(16, 24, 40, 0.08);
  color-scheme: light;
}

html.dt-skin body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--dt-bg);
  color: var(--dt-text);
  font-family: Inter, var(--font-body, "Outfit"), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
html.dt-skin body > .app,
html.dt-skin body > .dt-page { flex: 1; }

.dt-header,
.dt-footer,
.dt-toast,
.dt-modal,
.dt-dropveil {
  --dt-bg: #07090f;
  --dt-bg-2: #0c1018;
  --dt-card: #121826;
  --dt-line: rgba(255, 255, 255, 0.08);
  --dt-line-strong: rgba(255, 255, 255, 0.16);
  --dt-text: #e7edf6;
  --dt-muted: #8b95a8;
  --dt-white: #f4f7fb;
  --dt-ink: #0c1016;
  font-family: Inter, system-ui, sans-serif;
}

html[data-color-scheme="light"] .dt-header,
html[data-color-scheme="light"] .dt-footer {
  --dt-bg: #f7f8fb;
  --dt-bg-2: #ffffff;
  --dt-card: #ffffff;
  --dt-line: rgba(16, 24, 40, 0.08);
  --dt-line-strong: rgba(16, 24, 40, 0.14);
  --dt-text: #121722;
  --dt-muted: #5c677a;
  --dt-white: #121722;
  --dt-ink: #ffffff;
}

.dt-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 64px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--dt-bg) 88%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--dt-line);
  color: var(--dt-text);
}

.dt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.dt-mark {
  width: 22px;
  height: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  flex: none;
}

.dt-mark span {
  background: var(--dt-text);
  border-radius: 2px;
}

.dt-mark span:nth-child(2),
.dt-mark span:nth-child(3) {
  opacity: 0.45;
}

.dt-logo-text {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 16px;
}

.dt-ver {
  font-size: 11px;
  color: var(--dt-muted);
  border: 1px solid var(--dt-line-strong);
  border-radius: 999px;
  padding: 1px 6px;
}

.dt-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(420px, 42vw);
  height: 38px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  background: var(--dt-bg-2);
  border: 1px solid var(--dt-line);
  color: var(--dt-muted);
}

.dt-search svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.dt-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  font-size: 13px;
}

.dt-search kbd {
  font: inherit;
  font-size: 11px;
  color: var(--dt-dim, var(--dt-muted));
  border: 1px solid var(--dt-line);
  border-radius: 6px;
  padding: 1px 6px;
}

.dt-session-btn,
.dt-bug,
.dt-icon-btn,
.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--dt-line-strong);
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  padding: 0 12px;
}

.dt-session-btn svg,
.dt-bug svg,
.dt-icon-btn svg {
  width: 16px;
  height: 16px;
}

.dt-icon-btn {
  width: 36px;
  padding: 0;
}

.dt-icon-sun { display: none; }
html[data-color-scheme="light"] .dt-icon-moon { display: none; }
html[data-color-scheme="light"] .dt-icon-sun { display: block; }

.dt-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dt-card);
  border: 1px solid var(--dt-line);
  font-size: 11px;
  line-height: 16px;
}

.dt-bug {
  background: var(--dt-white);
  color: var(--dt-ink);
  border-color: transparent;
}

.dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  margin-top: 28px;
  border-top: 1px solid var(--dt-line);
  color: var(--dt-muted);
  font-size: 12px;
  background: var(--dt-bg);
}

.dt-footer p { margin: 0; }
.dt-logo--sm .dt-logo-text { font-size: 14px; }
.dt-footer-links { display: flex; gap: 16px; }
.dt-footer-links a { color: var(--dt-muted); text-decoration: none; }
.dt-footer-links a:hover { color: var(--dt-text); }

html.dt-skin .app,
html.dt-skin .dt-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 22px 8px;
}

.dt-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--dt-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.dt-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.dt-hero h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.dt-hero p { margin: 8px 0 0; color: var(--dt-muted); max-width: 62ch; }

.dt-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-pill {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--dt-line);
  background: var(--dt-card);
  color: var(--dt-muted);
  font-size: 12px;
  font-weight: 600;
}

.dt-drop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed var(--dt-line-strong);
  background: var(--dt-card);
  margin-bottom: 18px;
}

.dt-drop strong { display: block; font-size: 14px; }
.dt-drop span, .dt-drop small { color: var(--dt-muted); font-size: 12px; }
.dt-drop-main { display: flex; gap: 12px; align-items: center; }
.dt-drop-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--dt-bg); border: 1px solid var(--dt-line);
}
.dt-badge {
  display: inline-flex; margin-left: 8px; padding: 1px 6px;
  border-radius: 999px; background: #243044; color: #9eb6ff;
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700;
}

.dt-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.dt-chips, .dt-sorts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
html.dt-skin .chip {
  height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--dt-line); background: transparent;
  color: var(--dt-muted); font-weight: 600; font-size: 13px; cursor: pointer;
}
html.dt-skin .chip.active {
  background: var(--dt-white); color: var(--dt-ink); border-color: transparent;
}
.dt-sort {
  height: 32px; padding: 0 10px; border: 0; background: transparent;
  color: var(--dt-muted); font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
}
.dt-sort.active { color: var(--dt-text); background: var(--dt-card); }

html.dt-skin .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
html.dt-skin .tool-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 168px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--dt-card);
  border: 1px solid var(--dt-line);
  color: inherit; text-decoration: none;
  box-shadow: none;
}
html.dt-skin .tool-card:hover { border-color: var(--dt-line-strong); transform: none; }
html.dt-skin .tool-card .preview,
html.dt-skin .tool-card .accent-line,
html.dt-skin .hub-search-wrap,
html.dt-skin .hub-top,
html.dt-skin .hub-footer { display: none !important; }
html.dt-skin .tool-card .meta { display: contents; }
html.dt-skin .dt-card-top {
  display: flex; align-items: center; gap: 8px; color: var(--dt-dim); font-size: 11px; font-weight: 700;
}
html.dt-skin .category {
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--dt-muted);
}
html.dt-skin .path { margin-right: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
html.dt-skin .tool-title { margin: 4px 0 0; font-size: 16px; letter-spacing: -0.03em; }
html.dt-skin .tool-text {
  margin: 0; color: var(--dt-muted); font-size: 12.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.dt-skin .dt-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
html.dt-skin .dt-tags span {
  font-size: 11px; color: var(--dt-dim); background: var(--dt-bg); border-radius: 999px; padding: 2px 7px;
}
html.dt-skin .tool-footer { margin-top: 4px; }
html.dt-skin .launch {
  height: auto; padding: 0; background: transparent; color: var(--dt-text);
  border-radius: 0; font-size: 13px; font-weight: 600;
}
html.dt-skin .fav-btn {
  position: static; width: 22px; height: 22px; border: 0; background: transparent;
  color: var(--dt-dim); cursor: pointer;
}
html.dt-skin .fav-btn.is-active { color: var(--dt-amber); }
html.dt-skin .filters { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
html.dt-skin .filter-row, html.dt-skin .filter-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html.dt-skin .result-count, html.dt-skin .filter-label { color: var(--dt-muted); font-size: 12px; }
html.dt-skin .show-more-wrap { display: none; }

.dt-toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 24px));
}
.dt-toast {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px 10px;
  align-items: center; padding: 10px 10px 10px 12px;
  background: #141a24; color: #e7edf6; border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); cursor: pointer;
}
.dt-toast b { display: block; font-size: 13px; font-weight: 600; }
.dt-toast small { color: #9aa3b5; font-size: 11px; }
.dt-toast .bar { grid-column: 1 / -1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.dt-toast .bar i { display: block; height: 100%; background: #fff; width: 0; }
.dt-toast.done { cursor: pointer; }
.dt-toast.done .mark { color: #3dce7a; }
.dt-toast .x, .dt-toast .trash {
  width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
  color: #c5ccd8; cursor: pointer;
}
.dt-toast .actions { display: flex; }

.dt-modal[hidden] { display: none !important; }
.dt-modal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
}
.dt-modal-back { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.72); }
.dt-modal-card, .dt-library {
  position: relative; width: min(920px, 100%); max-height: min(86vh, 820px); overflow: auto;
  background: #10151e; color: #e7edf6; border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 18px; box-shadow: var(--dt-shadow, 0 20px 60px rgba(0,0,0,.4));
}
.dt-library { width: min(1100px, 100%); }
.dt-modal.full { padding: 0; }
.dt-modal.full .dt-library { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
.dt-modal h2 { margin: 0 0 8px; font-size: 18px; }
.dt-modal-head, .dt-lib-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.dt-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dt-media {
  text-align: left; border: 1px solid rgba(255,255,255,.08); background: #0c1018; color: inherit;
  border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; font: inherit;
}
.dt-media img, .dt-media .ph { width: 100%; height: 110px; object-fit: cover; background: #1b2433; display: grid; place-items: center; }
.dt-media div { padding: 8px 10px 10px; }
.dt-media strong { display: block; font-size: 13px; }
.dt-media span { color: #8b95a8; font-size: 11px; }
.dt-form { display: grid; gap: 10px; }
.dt-form input, .dt-form textarea, .dt-field input, .dt-field select {
  width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: #0c1018; color: #e7edf6; padding: 8px 10px; font: inherit;
}
.dt-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dt-btn.primary { background: #fff; color: #111; border-color: transparent; }
.dt-preview-media { width: 100%; max-height: 420px; background: #000; border-radius: 12px; }
.dt-dropveil {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(6, 8, 12, 0.72); color: white; font-size: 22px; font-weight: 700;
}
.dt-dropveil[hidden] { display: none !important; }
.dt-session-pick {
  display: inline-flex; align-items: center; height: 28px; margin-left: 8px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--border-strong, #ccc); background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* File Studio */
html.dt-skin .studio { display: grid; gap: 14px; }
.studio-top, .studio-tabs, .studio-work, .studio-history { 
  background: var(--dt-card); border: 1px solid var(--dt-line); border-radius: 16px;
}
.studio-top { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; align-items: center; flex-wrap: wrap; }
.crumbs { display: flex; gap: 8px; align-items: center; color: var(--dt-muted); font-size: 13px; margin-bottom: 10px; }
.crumbs a { color: var(--dt-muted); text-decoration: none; }
.crumbs a:hover { color: var(--dt-text); }
.file-select { display: flex; gap: 10px; align-items: center; }
.file-select select { min-width: 220px; }
.meta-line { color: var(--dt-muted); font-size: 12px; margin-top: 4px; }
.studio-tabs { display: flex; gap: 4px; padding: 6px; overflow: auto; }
.studio-tabs button {
  border: 0; background: transparent; color: var(--dt-muted); font: inherit; font-weight: 600;
  font-size: 13px; height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
}
.studio-tabs button.active { background: var(--dt-white); color: var(--dt-ink); }
.studio-tabs button:disabled { opacity: 0.35; cursor: not-allowed; }
.studio-work { display: grid; grid-template-columns: 1.4fr 0.8fr; min-height: 420px; overflow: hidden; }
.stage { padding: 12px; background: #07090f; }
html[data-color-scheme="light"].dt-skin .stage { background: #e9edf3; }
.stage-bar { display: flex; justify-content: space-between; color: var(--dt-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-bottom: 8px; }
.stage video, .stage img, .stage audio { width: 100%; max-height: 460px; border-radius: 12px; background: #000; }
.crop-wrap { position: relative; display: inline-block; max-width: 100%; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 999px rgba(0,0,0,.45); cursor: move; }
.panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-size: 13px; letter-spacing: .08em; }
.res-row, .check, .pair { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.res-row button, .rotate-row button {
  height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--dt-line);
  background: var(--dt-bg); color: var(--dt-text); font: inherit; font-weight: 600; cursor: pointer;
}
.res-row button.active { background: var(--dt-white); color: var(--dt-ink); }
.dt-field { display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--dt-muted); text-transform: uppercase; }
.dt-field input, .dt-field select { text-transform: none; letter-spacing: 0; font-weight: 500; height: 36px; }
.check { font-size: 13px; color: var(--dt-text); font-weight: 500; }
.run {
  margin-top: auto; height: 46px; border: 0; border-radius: 12px; background: #fff; color: #111;
  font: inherit; font-weight: 700; cursor: pointer;
}
.run:disabled { opacity: 0.55; cursor: progress; }
.steps { display: flex; gap: 8px; margin: 0 0 12px; }
.steps span {
  height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--dt-line);
  color: var(--dt-dim); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
}
.steps span.on { color: var(--dt-text); border-color: var(--dt-line-strong); background: var(--dt-card); }
.studio-history { padding: 14px; }
.studio-history h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; color: var(--dt-muted); }
.rev-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rev-card {
  display: flex; gap: 10px; text-align: left; padding: 8px; border-radius: 12px;
  border: 1px solid var(--dt-line); background: var(--dt-bg); color: inherit; cursor: pointer; font: inherit;
}
.rev-card.active { border-color: var(--dt-text); }
.rev-card img, .rev-card .ph { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; background: #1b2433; }
.empty-studio {
  min-height: 360px; display: grid; place-items: center; text-align: center; padding: 32px;
  border: 1px dashed var(--dt-line-strong); border-radius: 16px; background: var(--dt-card);
}

@media (max-width: 1100px) {
  html.dt-skin .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-work { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dt-header { height: auto; flex-wrap: wrap; padding: 10px 12px; }
  .dt-search { width: 100%; order: 3; }
  .dt-header-right { width: 100%; }
  .dt-search kbd, .dt-bug span, .dt-ver { display: none; }
  html.dt-skin .grid { grid-template-columns: 1fr; }
  .dt-footer { flex-direction: column; align-items: flex-start; }
  .dt-hero { flex-direction: column; align-items: flex-start; }
}