/* =====================================================
   DualTicker Rebuild: Viewport-fit layout (NO PAGE SCROLL)
   Strategy A Top Bar
   ===================================================== */

:root{
  /* Core palette */
  --dt-bg: #0b0f16;
  --dt-surface: #0f1724;
  --dt-surface-2: #121b28;
  --dt-text: #e8edf6;
  --dt-muted: #9fb1c9;
  --dt-accent: #7cc4ff;
  --dt-source: color-mix(in srgb, var(--dt-accent) 68%, var(--dt-text) 32%);
  --dt-border: rgba(255,255,255,0.10);
  --dt-divider: rgba(255,255,255,0.08);
  --dt-shadow-color: rgba(0,0,0,0.55);
  --dt-shadow: 0 18px 38px var(--dt-shadow-color);
  --dt-shadow-menu-color: rgba(0,0,0,0.40);
  --dt-glow-color: color-mix(in srgb, var(--dt-accent) 45%, transparent 55%);
  --dt-glow: 0 0 0 1px var(--dt-glow-color);
  --dt-hover: color-mix(in srgb, var(--dt-surface) 86%, #ffffff 14%);
  --dt-active: color-mix(in srgb, var(--dt-surface) 74%, #000000 26%);
  --dt-focus: #8fb0ff;
  --dt-utility-border: color-mix(in srgb, var(--dt-border) 65%, var(--dt-text) 12%);
  --dt-utility-border-hover: color-mix(in srgb, var(--dt-border) 45%, var(--dt-text) 20%);
  --dt-utility-hover-bg: color-mix(in srgb, var(--dt-surface) 82%, var(--dt-text) 18%);
  --dt-utility-active-bg: color-mix(in srgb, var(--dt-surface) 72%, #000000 28%);
  --dtShareGlow: var(--dt-accent, #7aa7ff);
  --dtShareGlowA: 0.34;
  --dtShareGlowHoverA: 0.5;

  /* Legacy mappings (preserve existing selectors) */
  --dt-panel: var(--dt-surface);
  --dt-panelBorder: var(--dt-border);
  --dt-dim: var(--dt-muted);

  --dt-support-bg: var(--dt-panel);
  --dt-support-border: var(--dt-panelBorder);
  --dt-support-text: var(--dt-text);
  --dt-support-divider: rgba(255,255,255,0.12);
  --dt-support-focus: #8fb0ff;

  /* Slightly tighter radius for a more “terminal / modern” feel */
  --dt-radius: 5px;

  /* Density controls */
  --dt-gap-panel: 2px;
  --dt-panel-header-pad-y: 6px;
  --dt-panel-header-pad-x: 12px;
  --dt-panel-header-bottom-pad-y: 5px;
  --dt-panel-header-bottom-pad-x: 10px;
  --dtHeaderH: 28px;
  --dtHeaderTitleMax: 14px;
  --dtHeaderTitleMin: 10.5px;
  --dtHeaderTitleMinMobile: 9px;
  --dt-panel-body-pad-y: 6px;
  --dt-panel-body-pad-x: 10px;
  --dt-panel-body-bottom-pad-y: 6px;
  --dt-panel-body-bottom-pad-x: 8px;
  --dt-headline-gap: 4px;
  --dt-headline-pad: 4px;
  --dt-utility-gap: 10px;
  --rail-gap: var(--dt-utility-gap);
  --rail-pad: 8px;
  --rail-icon: 14px;
  --dt-utility-group-gap: 4px;
  --dt-utility-pad-y: 2px;
  --dt-utility-pad-x: var(--rail-pad);
  --dt-utility-rail-gap: var(--rail-gap);
  --dt-utility-rail-pad-x: var(--rail-pad);
  --dt-utility-rail-pad-y: var(--dt-utility-pad-y);
  --dt-utility-rail-icon: var(--rail-icon);
  --dt-utility-rail-font: 11px;
  --dt-utility-rail-btn-w: 26px;
  --dt-utility-rail-btn-h: 34px;
  --dt-utility-rail-btn-pad: 4px;
  --dt-utility-rail-time-min: 40px;
  --dt-utility-rail-time-pad-x: 7px;
  --dt-utility-rail-time-gap: 2px;
  --dt-search-pad-y: 6px;
  --dt-search-pad-x: 9px;
  --dt-search-gap: 5px;
  --dt-search-icon-size: 13px;
  --dt-search-icon-gap: 6px;
  --dt-search-icon-offset: calc(var(--dt-search-pad-x) + 1px);
  --dt-menu-pad: 10px;
  --dt-menu-item-pad-y: 8px;
  --dt-menu-item-pad-x: 10px;
  --dt-menu-title-pad-y: 4px;
  --dt-menu-title-pad-x: 6px;
  --dt-menu-section-gap: 8px;
  --dt-menu-sep-y: 8px;
  --dt-menu-sep-x: 4px;
  --dt-mode-row-gap: 6px;
  --dt-mode-row-pad-y: 1px;
  --dt-mode-row-pad-x: 6px;
  --dtBtnFont: 12px;
  --dtBtnPadY: 6px;
  --dtBtnPadX: 12px;
  --dtBtnMinH: 32px;
  --dtBtnGap: 8px;
  --dt-system-rail-gap: 10px;
  --dt-system-rail-pad-y: 4px;
  --dt-system-rail-pad-x: 12px;
  --dt-rail-font-size: 12px;

  /* ✅ Guaranteed sizes (never disappear) */
  --dt-bottomH: 130px;   /* bottom Breaking panels */
  --dt-resize-handle-h: 12px;
  --dt-railH: 30px;      /* system rail height (desktop) */
  --dt-dd-top: 72px;     /* dropdown anchor from viewport top */

  /* Pill (category/preset) colors — theme-dependent via --dt-accent/--dt-panel */
  --dt-pill-cat-bg: color-mix(in srgb, var(--dt-panel) 92%, rgba(255,255,255,0.02) 8%);
  --dt-pill-cat-border: color-mix(in srgb, var(--dt-panelBorder) 70%, var(--dt-accent, #7cc4ff) 30%);
  --dt-pill-cat-text: var(--dt-text);
  --dt-pill-cat-bg-active: color-mix(in srgb, var(--dt-accent, #7cc4ff) 22%, var(--dt-panel) 78%);
  --dt-pill-cat-border-active: color-mix(in srgb, var(--dt-accent, #7cc4ff) 55%, var(--dt-panelBorder) 45%);
  --dt-pill-cat-text-active: var(--dt-text);

  --dt-pill-preset-bg: color-mix(in srgb, var(--dt-panel) 88%, rgba(255,255,255,0.02) 12%);
  --dt-pill-preset-border: color-mix(in srgb, var(--dt-panelBorder) 78%, var(--dt-accent, #7cc4ff) 22%);
  --dt-pill-preset-text: var(--dt-text);
  --dt-pill-preset-bg-active: color-mix(in srgb, var(--dt-accent, #7cc4ff) 28%, var(--dt-panel) 72%);
  --dt-pill-preset-border-active: color-mix(in srgb, var(--dt-accent, #7cc4ff) 62%, var(--dt-panelBorder) 38%);
  --dt-pill-preset-text-active: var(--dt-text);

  /* Unified pill + menu tokens (theme-specific overrides downstream) */
  --dt-pill-bg: var(--dt-pill-cat-bg);
  --dt-pill-border: var(--dt-pill-cat-border);
  --dt-pill-text: var(--dt-pill-cat-text);
  --dt-pill-active-bg: var(--dt-pill-cat-bg-active);
  --dt-pill-active-border: var(--dt-pill-cat-border-active);
  --dt-pill-active-text: var(--dt-pill-cat-text-active);

  --dt-surface-menu: color-mix(in srgb, var(--dt-surface, #0f1724) 92%, #ffffff 8%);
  --dt-surface-popover: color-mix(in srgb, var(--dt-surface-2, var(--dt-surface, #0f1724)) 90%, #ffffff 10%);
  --dt-border-menu: color-mix(in srgb, var(--dt-border, rgba(255,255,255,0.1)) 70%, rgba(255,255,255,0.18) 30%);
  --dt-text-menu: var(--dt-text);
  --dt-hover-menu: color-mix(in srgb, var(--dt-hover, var(--dt-surface-menu)) 80%, var(--dt-surface-menu) 20%);
  --dt-active-menu: color-mix(in srgb, var(--dt-active, var(--dt-surface-menu)) 80%, var(--dt-surface-menu) 20%);
  --dt-shadow-menu: 0 14px 34px var(--dt-shadow-menu-color, rgba(0,0,0,0.4));
  --dt-text-shadow: none;

  /* Search input (terminal vibe) */
  --dt-search-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dt-search-bg: color-mix(in srgb, var(--dt-surface) 84%, #05070c 16%);
  --dt-search-border: color-mix(in srgb, var(--dt-border) 70%, var(--dt-text) 14%);
  --dt-search-text: var(--dt-text);
  --dt-search-placeholder: color-mix(in srgb, var(--dt-muted) 70%, var(--dt-text) 30%);
  --dt-search-focus-border: color-mix(in srgb, var(--dt-accent) 58%, var(--dt-border) 42%);
  --dt-search-focus-ring: color-mix(in srgb, var(--dt-focus) 38%, transparent 62%);

  /* Builder light-theme visual fix */
  --dt-builder-bg: var(--dt-bg);
  --dt-builder-surface: var(--dt-panel);
  --dt-builder-surface-strong: var(--dt-surface-2, var(--dt-panel));
  --dt-builder-border: var(--dt-border);
  --dt-builder-text: var(--dt-text);
  --dt-builder-muted: var(--dt-muted);
  --dt-builder-accent: var(--dt-accent);

  /* Headline-specific tokens (theme overrides allowed) */
  --dt-headline-strong: var(--dt-text);
  --dt-headline-soft: var(--dt-headline-strong);
  --dt-headline-glow: var(--dt-text-shadow);
  --dt-headline-soft-glow: var(--dt-headline-glow);

  /* Dropdown/control buttons */
  --dt-control-bg: var(--dt-surface-2);
  --dt-control-border: var(--dt-border);
  --dt-control-text: var(--dt-text);
  --dt-control-shadow: 0 6px 16px rgba(0,0,0,0.18);
  --dt-control-hover-bg: var(--dt-hover);
  --dt-control-active-bg: var(--dt-active);
  --dt-control-focus: var(--dt-focus);
  --dt-control-radius: var(--dt-radius);
}

@media (max-width: 520px) {
  :root {
    /* OPS_CHANGE_V__ — Mobile panel title size (dt-panel__title) */
    --dtHeaderTitleMax: 12px;
    --dtHeaderTitleMinMobile: 7.5px;
  }
}

/* PowerShare enhancements */
body.dt-ps-resizing {
  touch-action: none;
  user-select: none;
}

.dt-ps .dt-ps-pane.is-active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.dt-ps .dt-ps-pane.is-live {
  box-shadow: inset 0 0 0 1px rgba(255, 80, 80, 0.95), 0 0 12px rgba(255, 80, 80, 0.3);
}

.dt-ps .dt-ps-pane.is-live::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(90deg, rgba(255, 80, 80, 0.2), rgba(16, 16, 24, 0.55));
  z-index: 3;
  pointer-events: none;
}

.dt-ps .dt-ps-pane.is-live::after {
  content: "LIVE";
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.7);
  background: rgba(10, 10, 16, 0.75);
  z-index: 4;
}

.dt-ps .dt-ps-pane-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(10, 10, 16, 0.7);
  color: rgba(245, 245, 247, 0.85);
  z-index: 7;
  display: none;
}

.dt-ps .dt-ps-pane-status.is-live {
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.7);
}

.dt-ps .dt-ps-pane-status.is-recorded {
  color: rgba(245, 245, 247, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dt-ps .dt-ps-pane-status.is-vod {
  color: rgba(148, 163, 184, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.dt-ps .dt-ps-pane-volume {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 7;
  display: none;
}

.dt-ps .dt-ps-pane-volume__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(12, 12, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  min-width: 140px;
}

.dt-ps .dt-ps-pane-volume.is-open .dt-ps-pane-volume__panel {
  display: flex;
}

.dt-ps .dt-ps-pane-volume__slider {
  padding: 0;
}

.dt-ps .dt-ps-divider {
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.dt-ps .dt-ps-divider::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.dt-ps .dt-ps-divider.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.dt-ps .dt-ps-scene-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-ps .dt-ps-scene-bar-row--controls {
  flex: 1;
  justify-content: flex-end;
  order: 2;
}

.dt-ps .dt-ps-scene-bar-row--brand {
  justify-content: flex-start;
  order: 1;
}

.dt-ps .dt-ps-scene-pane-manage {
  display: inline-flex;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 720px) {
  .dt-ps .dt-ps-scene-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .dt-ps .dt-ps-scene-bar-row--controls {
    justify-content: space-between;
    width: 100%;
    order: 1;
  }

  .dt-ps .dt-ps-scene-bar-row--brand {
    justify-content: center;
    font-size: 10px;
    padding-top: 2px;
    opacity: 0.8;
    order: 2;
  }
}

@media (max-height: 520px) {
  .dt-ps .dt-ps-scene-bar-row--brand {
    display: none;
  }
}

body.dt-ps .dt-ps-scene.is-hud-hidden-mobile .dt-ps-scene-bar-row--brand {
  display: none;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }

html{
  overflow:hidden;
  background: var(--dt-bg);
}
body{
  overflow:hidden;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--dt-bg);
  color: var(--dt-text);
}


.dt-page, .dt-page *{
  text-shadow: none !important;
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

/* =====================================================
   PAGE WRAPPER
   ===================================================== */

.dt-page{
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:0px;

  /* V2: remove the chunky "picture frame" feel */
  padding:0;
overflow:hidden;
  max-width:none;
margin:0;}

@media (max-width: 700px){
  .dt-page{
    /* Mobile: remove most outer frame while keeping safe-area padding */
    padding:
      calc(2px + env(safe-area-inset-top))
      calc(2px + env(safe-area-inset-right))
      calc(2px + env(safe-area-inset-bottom))
      calc(2px + env(safe-area-inset-left));
    max-width: none;
  }
}

/* =====================================================
   TOP BAR – STRATEGY A
   ===================================================== */

.dt-topbar{
  flex:0 0 auto;
  padding:3px 6px;
  border-radius: 10px;
  background: var(--dt-surface-2);
  border:1px solid var(--dt-border);
  position:relative;
  /* DTRP: ensure dropdown overlays Doc footer/socials (Chrome stacking-context quirk) */
  z-index:8000;
  padding-bottom:2px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  transition: box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;}

.dt-topbar__controls{
  display:flex;
  align-items:center;
  gap:6px;
}

.dt-search-wrap{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--dt-search-gap);
  position:relative;
}

.dt-search-wrap.has-warning{
  padding-bottom:16px;
}

.dt-search-hint{
  position:absolute;
  left:8px;
  top:100%;
  margin-top:2px;
  font-size:11px;
  font-weight:700;
  color:color-mix(in srgb, var(--dt-accent) 70%, var(--dt-text) 30%);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
}

/* DT_CLEAN_SITE_FIX_FEB10_START: search hint/icon cleanup */
.dt-search-wrap.has-warning .dt-search-hint{
  opacity:1;
}

/* BRAND */
.dt-topbar__brand{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.dt-topbar__brand:hover{
  text-decoration:none;
}
.dt-logo{
  width:20px;
  height:20px;
  border-radius: var(--dt-radius);
}
.dt-brand-title{
  font-weight:800;
  font-size:15px;
}

/* SEARCH */
.dt-search{
  flex:1 1 auto;
  padding:var(--dt-search-pad-y) var(--dt-search-pad-x);
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-search-border);
  background: var(--dt-search-bg);
  color:var(--dt-search-text);
  outline:none;
  position:relative;
  z-index:1;
  font-size:13px;
  font-family: var(--dt-search-font);
  letter-spacing:0.2px;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.dt-search::placeholder{
  color: var(--dt-search-placeholder);
  opacity: 0.8;
}

.dt-search:focus-visible{
  border-color: var(--dt-search-focus-border);
  box-shadow: 0 0 0 2px var(--dt-search-focus-ring);
}

/* DT_CLEAN_SITE_FIX_FEB10_END: search hint/icon cleanup */


.dt-build-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 7px;
  min-height:28px;
  border-radius:8px;
  border:1px solid var(--dt-border);
  background:linear-gradient(145deg, color-mix(in srgb, var(--dt-surface) 80%, #ffffff 20%), color-mix(in srgb, var(--dt-surface-2) 85%, #ffffff 15%));
  color:var(--dt-text);
  font-weight:700;
  cursor:pointer;
  transition:background 140ms ease, transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease;
  flex:0 0 auto;
}

.dt-build-btn:hover{
  background:linear-gradient(145deg, color-mix(in srgb, var(--dt-hover) 70%, #ffffff 30%), color-mix(in srgb, var(--dt-hover) 75%, #ffffff 25%));
  border-color: color-mix(in srgb, var(--dt-accent) 45%, var(--dt-border) 55%);
  box-shadow: var(--dt-shadow);
}

.dt-build-btn:active{
  transform: translateY(1px);
  background: var(--dt-active);
}

body.dt-chrome-hidden .dt-utility-strip,
body.dt-chrome-hidden .dt-mode-row,
body.dt-chrome-hidden .dt-search-wrap,
body.dt-chrome-hidden .dt-theme-dd,
body.dt-chrome-hidden .dt-founder-btn{
  display:none;
}

body.dt-chrome-hide-search .dt-search-wrap{
  display:none;
}

body.dt-chrome-hidden .dt-chrome-restore{
  display:flex;
}

body.dt-bottom-hidden .dt-bottom-restore{
  display:flex;
}

.dt-chrome-restore,
.dt-bottom-restore{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:9001;
  display:none;
  align-items:center;
  justify-content:center;
  width:32px;
  height:18px;
  border:1px solid var(--dt-utility-border);
  background: color-mix(in srgb, var(--dt-surface) 75%, transparent 25%);
  color:var(--dt-text);
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.dt-chrome-restore{
  top:0;
  border-radius:0 0 10px 10px;
  border-top:none;
}

.dt-bottom-restore{
  top:auto;
  bottom:env(safe-area-inset-bottom, 0px);
  border-radius:10px 10px 0 0;
  border-bottom:none;
}

.dt-chrome-restore svg,
.dt-bottom-restore svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dt-chrome-restore:hover,
.dt-bottom-restore:hover{
  background: color-mix(in srgb, var(--dt-hover) 80%, transparent 20%);
}

.dt-chrome-restore:focus-visible,
.dt-bottom-restore:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 70%, transparent 30%);
  outline-offset:2px;
}

.dt-build-btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 65%, transparent 35%);
  outline-offset:2px;
}

.dt-build-btn__icon{
  font-size:13px;
  opacity:0.85;
}

.dt-build-btn__text--short{
  display:none;
}

/* =====================================================
   HUD – DISABLED (SAFE)
   ===================================================== */

.dt-hud{
  display:none !important;
}

/* =====================================================
   DROPDOWNS (THEME + HAMBURGER)
   ===================================================== */

.dt-dropdown{
  position:relative;
  flex:0 0 auto;
}

#dt-overlay-root{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
}

#dt-overlay-root .dt-overlay-panel{
  position: fixed;
  pointer-events: auto;
  z-index: 2147483000;
}

.dt-dd-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 8px;
  min-height:32px;
  border-radius: var(--dt-control-radius);
  border:1px solid var(--dt-control-border);
  background: var(--dt-control-bg);
  color: var(--dt-control-text);
  cursor:pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 120ms ease, color 140ms ease;
  box-shadow: var(--dt-control-shadow);
}

.dt-dd-btn:hover{
  background: var(--dt-control-hover-bg);
  border-color: var(--dt-utility-border-hover);
}

.dt-dd-btn:focus-visible{
  outline:2px solid var(--dt-control-focus);
  outline-offset:2px;
}

.dt-dd-btn:active,
.dt-dd-btn[aria-expanded="true"]{
  background: var(--dt-control-active-bg);
  border-color: var(--dt-utility-border-hover);
  box-shadow: none;
}

.dt-dd-caret{
  font-size:11px;
  opacity:0.7;
}

.dt-hamburger-btn{
  width:32px;
  height:32px;
  padding:0;
  font-size:18px;
  line-height:1;
}

.dt-hamburger-dd{
  display:flex;
  align-items:center;
  gap:6px;
}

.dt-mm-svg{
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  display:block;
}

.dt-mm-btn--fancy:hover .dt-mm-svg{
  filter: drop-shadow(0 0 10px rgba(255,0,200,.10)) drop-shadow(0 0 10px rgba(0,255,240,.12));
}

@media (prefers-reduced-motion: reduce){
  .dt-mm-svg animate,
  .dt-mm-svg animateTransform{ display:none; }
}

@media (min-width:901px){
  .dt-hamburger-dd{
    margin-left:auto;
  }
}

/* =====================================================
   MODE + PRESETS ROW (COMPACT, SINGLE LINE)
   ===================================================== */
.dt-mode-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--dtBtnGap);
  margin-top:2px;
  padding:var(--dt-mode-row-pad-y) var(--dt-mode-row-pad-x);
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-border);
  background: var(--dt-surface-2);
  min-width:0;
  width:100%;
  box-sizing:border-box;}

/* CONFIG_FORMULA_V1 : formula bar */
.dt-formula-row{
  flex:1 1 auto;
  order:3;
  min-width:160px;
}

.dt-formula-bar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:4px 8px;
  border-radius: calc(var(--dt-radius) + 2px);
  border:1px solid var(--dt-border);
  background: var(--dt-surface-1);
  color: var(--dt-text);
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor:pointer;
  min-width:0;
}

.dt-formula-bar__text{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dt-formula-bar__caret{
  opacity:0.65;
  flex:0 0 auto;
}

.dt-formula-input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  outline:none;
}

.dt-formula-bar.is-error{
  border-color:#ff6b6b;
  box-shadow:0 0 0 1px rgba(255,107,107,0.25);
}

.dt-formula-hide{
  display:none !important;
}

@media (max-width: 720px){
  .dt-formula-row{ min-width:140px; }
  .dt-formula-bar{ font-size:10px; padding:4px 6px; }
}
/* CONFIG_FORMULA_V1 : end formula bar */

/* =====================================================
   UTILITY STRIP (FOCUS / BOOKMARK / SHARE)
   ===================================================== */
.dt-utility-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  overflow:hidden;
  gap:var(--dt-utility-rail-gap);
  padding:var(--dt-utility-rail-pad-y) var(--dt-utility-rail-pad-x);
  padding-left: calc(var(--dt-utility-rail-pad-x) + env(safe-area-inset-left));
  padding-right: calc(var(--dt-utility-rail-pad-x) + env(safe-area-inset-right));
  height:auto;
  min-height:22px;
  border-top:1px solid var(--dt-border);
  width:100%;
  box-sizing:border-box;
}

.dt-utility-group{
  display:inline-flex;
  align-items:center;
  gap:var(--dt-utility-group-gap);
  flex:0 1 auto;
  min-width:0;
}

.dt-utility-btn{
  width:var(--dt-utility-rail-btn-w);
  height:var(--dt-utility-rail-btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;  border-radius:6px;
  background:transparent;
  color:var(--dt-muted);
  cursor:pointer;
  padding:var(--dt-utility-rail-btn-pad);
  min-width:0;
  min-height:34px;
  flex:0 1 auto;
  box-sizing:border-box;
  opacity:0.65;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease;
  position:relative;
}

.dt-utility-btn:hover{
  opacity:0.65;
  color:var(--dt-text);
  border-color: var(--dt-utility-border-hover);
  background: var(--dt-utility-hover-bg);
}

.dt-utility-btn:active{
  opacity:1;
  background: var(--dt-utility-active-bg);
}

.dt-utility-btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 60%, transparent 40%);
  outline-offset:2px;
}

#dt-snapshot-link .dt-utility-icon{
  stroke-width: 1.9;
}


.dt-utility-group--time{ position:relative; }

.dt-time-pop{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  display:none;
  min-width:58px;
  padding:4px;
  border:1px solid var(--dt-border);
  border-radius:8px;
  background:var(--dt-bg-elev, var(--dt-bg));
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  z-index:40;
}

.dt-time-pop.is-open{ display:grid; gap:4px; }

.dt-time-pop-item{
  width:100%;
  border:1px solid var(--dt-utility-border);
  border-radius:6px;
  background:transparent;
  color:var(--dt-muted);
  padding:4px 6px;
  font-size:11px;
  line-height:1.1;
  text-align:left;
  cursor:pointer;
}

.dt-time-pop-item:hover,
.dt-time-pop-item:focus-visible{
  color:var(--dt-text);
  border-color:var(--dt-utility-border-hover);
  background:var(--dt-utility-hover-bg);
  outline:none;
}

.dt-time-pop-item.is-active{
  color:var(--dt-text);
  border-color:var(--dt-focus);
}

#dt-timeframe-btn{
  width:auto;
  min-width:var(--dt-utility-rail-time-min);
  padding:var(--dt-utility-rail-btn-pad) var(--dt-utility-rail-time-pad-x);
  gap:var(--dt-utility-rail-time-gap);
  font-size:var(--dt-utility-rail-font);
  font-weight:600;
}
#dt-timeframe-btn .dt-tf-loading{ opacity:.8; }
#dt-timeframe-btn .dt-tf-mismatch{ color:var(--dt-focus); font-weight:700; }
#dt-timeframe-btn .dt-tf-debug{ color:var(--dt-focus); font-size:10px; }
body.dt-debug-on .dt-search-wrap::after{
  content:"DEBUG";
  position:absolute;
  right:6px;
  top:-10px;
  font-size:9px;
  letter-spacing:.6px;
  color:var(--dt-focus);
}
.dt-utility-icon{
  width:var(--dt-utility-rail-icon);
  height:var(--dt-utility-rail-icon);
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (hover:hover) and (pointer:fine){
  .dt-utility-btn::after{
    content: attr(data-hint);
    position:absolute;
    left:50%;
    bottom:100%;
    transform: translate(-50%, -6px);
    font-size:9px;
    line-height:1;
    letter-spacing:0.2px;
    color:var(--dt-muted);
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    transition: opacity 180ms ease;
  }

  .dt-utility-btn:hover::after{
    opacity:0.9;
    transition-delay: 400ms;
  }
}

.dt-focus-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  font-weight:600;
  letter-spacing:0.6px;
  color:currentColor;
}

.dt-focus-glyph::before{
  content:"AB";
}

.dt-utility-btn--focus[data-cols="dual"] .dt-focus-glyph::before{
  content:"A·B";
  font-size:9px;
  letter-spacing:0.3px;
}

.dt-utility-btn--focus[data-cols="a"] .dt-focus-glyph::before{
  content:"A";
}

.dt-utility-btn--focus[data-cols="b"] .dt-focus-glyph::before{
  content:"B";
}

.dt-flow-icon{
  fill:currentColor;
  stroke:none;
}

.dt-flow-icon__pause{
  opacity:0;
}

.dt-utility-btn--flow[data-flow-state="paused"] .dt-flow-icon__play{
  opacity:0;
}

.dt-utility-btn--flow[data-flow-state="paused"] .dt-flow-icon__pause{
  opacity:1;
}

.dt-flow-mode-icon__step{
  opacity:0;
}

.dt-utility-btn--flow-mode[data-flow-mode="step"] .dt-flow-mode-icon__smooth{
  opacity:0;
}

.dt-utility-btn--flow-mode[data-flow-mode="step"] .dt-flow-mode-icon__step{
  opacity:1;
}

@media (max-width: 720px){
  .dt-utility-strip{
    padding:var(--dt-utility-rail-pad-y) var(--dt-utility-rail-pad-x);
    gap:var(--dt-utility-rail-gap);
    height:22px;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .dt-utility-group{
    gap:var(--dt-utility-group-gap);
    flex:0 1 auto;
    min-width:0;
  }
}

@media (max-width: 520px){
  :root{
    --rail-gap: 6px;
    --rail-pad: 6px;
    --rail-icon: 13px;
    --dt-utility-group-gap: 3px;
    --dt-utility-rail-font: 10px;
    --dt-utility-rail-btn-w: 24px;
    --dt-utility-rail-btn-h: 34px;
    --dt-utility-rail-time-min: 37px;
    --dt-utility-rail-time-pad-x: 6px;
  }
}

@media (max-width: 430px){
  :root{
    --rail-gap: 4px;
    --rail-pad: 4px;
    --rail-icon: 12px;
    --dt-utility-group-gap: 2px;
    --dt-utility-rail-pad-y: 1px;
    --dt-utility-rail-font: 9px;
    --dt-utility-rail-btn-w: 22px;
    --dt-utility-rail-btn-h: 34px;
    --dt-utility-rail-btn-pad: 3px;
    --dt-utility-rail-time-min: 34px;
    --dt-utility-rail-time-pad-x: 4px;
    --dt-utility-rail-time-gap: 1px;
  }
}

@media (max-width: 380px){
  :root{
    --rail-gap: 2px;
    --rail-pad: 2px;
    --rail-icon: 11px;
    --dt-utility-group-gap: 1px;
    --dt-utility-rail-btn-w: 20px;
    --dt-utility-rail-btn-h: 34px;
    --dt-utility-rail-btn-pad: 2px;
    --dt-utility-rail-time-min: 32px;
    --dt-utility-rail-time-pad-x: 3px;
  }
}

@media (max-width: 720px){
  .dt-utility-btn--flow-mode,
  #dt-menu-flow-mode{
    display:none;
  }
}

.dt-mode-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--dtBtnGap);
  flex:1 1 auto;
  order:1;
  width:100%;
  padding-left: calc(var(--dt-mode-row-pad-x) + env(safe-area-inset-left));
  padding-right: calc(var(--dt-mode-row-pad-x) + env(safe-area-inset-right));
  box-sizing:border-box;
}

/* CONFIG_FORMULA_V2 : hide category row when formula bar active */
.dt-formula-on .dt-mode-buttons{
  display:none;
}
/* CONFIG_FORMULA_V2 : end hide category row when formula bar active */

.dt-mode-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--dtBtnPadY) var(--dtBtnPadX);
  min-height:var(--dtBtnMinH);
  border-radius: calc(var(--dt-radius) + 2px);
  border:1px solid var(--dt-pill-cat-border);
  background: var(--dt-pill-cat-bg);
  color: var(--dt-text);
  font-weight:700;
  font-size:var(--dtBtnFont);
  cursor:pointer;
  line-height:1.1;
  flex:0 0 auto;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;}

.dt-mode-btn.is-active{
  background: rgba(255,255,255,0.10);
  border-color: color-mix(in srgb, var(--dt-panelBorder) 70%, rgba(255,255,255,0.18) 30%);
}

.dt-mode-btn:not(.is-active):hover{
  background: var(--dt-hover);
  border-color: color-mix(in srgb, var(--dt-accent) 32%, var(--dt-panelBorder) 68%);
  box-shadow: var(--dt-shadow);
}

.dt-mode-btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 60%, transparent 40%);
  outline-offset:2px;
}

@media (max-width: 520px){
  :root{
    --dtBtnFont: 12px;
    --dtBtnPadY: 10px;
    --dtBtnPadX: 12px;
    --dtBtnMinH: 44px;
    --dtBtnGap: 10px;
  }
  .dt-mode-row{
    padding:6px 10px;
  }
}

/* Preset Builder button lives in the Mode row (polish-only, no logic changes) */
.dt-mode-row .dt-build-btn{
  padding:5px 8px;
  min-height:24px;
  font-size:11px;
  border-radius: calc(var(--dt-radius) + 4px);
  margin-left:auto;
  order:2;
}

/* =====================================================
   DROPDOWN MENUS – OVERLAY, GLASS, SAFE
   ===================================================== */

.dt-dd-menu,
.dt-menu-surface{
  padding:var(--dt-menu-pad);
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
  color: var(--dt-text-menu);
  box-shadow: var(--dt-shadow-menu);
}

.dt-dd-menu{
  position:fixed;
  top: var(--dt-dd-top);
  right: var(--dt-dd-right, 14px);
  min-width:220px;
  max-width:calc(100vw - 28px);
  max-height:calc(100vh - 90px);
  display:none;
  z-index: 2147483647;
  overflow-y:auto;
}

.dt-dd-menu.dt-dd-has-close{
  padding-right:32px;
}

.dt-dd-close{
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid transparent;
  background: color-mix(in srgb, var(--dt-surface-menu) 70%, transparent 30%);
  color:var(--dt-text-menu);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  opacity:0.75;
  transition: opacity 120ms ease, border-color 120ms ease, background 120ms ease;
}

.dt-dd-close:hover,
.dt-dd-close:focus-visible{
  opacity:1;
  border-color: color-mix(in srgb, var(--dt-border-menu) 60%, var(--dt-text-menu) 40%);
  background: color-mix(in srgb, var(--dt-hover-menu) 70%, transparent 30%);
}

.dt-dd-close:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 60%, transparent 40%);
  outline-offset:2px;
}

.dt-dd-menu.is-open{ display:block; }

.dt-mode-preset-menu{
  min-width:200px;
  --dt-menu-pad: 4px;
  --dt-menu-item-pad-y: 3px;
  --dt-menu-item-pad-x: 6px;
  --dt-menu-title-pad-y: 1px;
  --dt-menu-title-pad-x: 4px;
  --dt-menu-section-gap: 3px;
  --dt-menu-sep-y: 3px;
  --dt-menu-sep-x: 2px;
  font-size:11px;
}

.dt-mode-preset-menu .dt-dd-item{
  line-height:1.15;
  min-height:20px;
  gap:8px;
}

/* DT_CLEAN_SITE_V1_START */
body:not(.dt-dev) #dt-ops-toggle,
body:not(.dt-dev) #dt-menu-ptest{
  display:none !important;
}
/* DT_CLEAN_SITE_V1_END */

.dt-mode-preset-menu .dt-dd-title{
  font-size:9px;
  line-height:1.2;
}

.dt-mode-preset-menu .dt-mode-preset-item.is-active{
  background:var(--dt-hover-menu);
  font-weight:700;
}

.dt-savedviews{
  --dtSavedViewRowH: 28px;
}

.dt-savedviews .dt-dd-sep.dt-saved-views-sep{
  margin:1px 2px;
}

.dt-savedviews .dt-dd-title.dt-saved-views-title{
  padding:0 4px 1px;
}

.dt-savedviews-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.dt-savedviews .dt-savedview-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  height:var(--dtSavedViewRowH);
  min-height:var(--dtSavedViewRowH);
  padding:0 6px;
  border-radius: var(--dt-radius);
}

.dt-savedviews .dt-savedview-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1;
}

.dt-savedviews .dt-savedview-del{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  padding:0;
  background:transparent;
  color: color-mix(in srgb, var(--dt-text-menu) 78%, transparent 22%);
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  transition:opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.dt-savedviews .dt-savedview-del svg{
  width:14px;
  height:14px;
  pointer-events:none;
}

.dt-savedviews .dt-savedview-del svg *{
  pointer-events:none;
}

.dt-savedviews .dt-savedview-row:hover .dt-savedview-del,
.dt-savedviews .dt-savedview-row:focus-within .dt-savedview-del,
.dt-savedviews .dt-savedview-del.is-armed{
  opacity:0.95;
  pointer-events:auto;
}

.dt-savedviews .dt-savedview-del:hover,
.dt-savedviews .dt-savedview-del:focus-visible,
.dt-savedviews .dt-savedview-del.is-armed{
  color:var(--dt-text-menu);
  background: color-mix(in srgb, var(--dt-hover-menu) 74%, transparent 26%);
}

.dt-savedviews .dt-savedview-del:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 60%, var(--dt-text-menu) 40%);
  outline-offset:1px;
}

@media (hover: none), (pointer: coarse){
  .dt-savedviews{
    --dtSavedViewRowH: 36px;
  }

  .dt-savedviews .dt-savedview-del{
    width:32px;
    height:32px;
    opacity:0.85;
    pointer-events:auto;
  }
}

/* CONFIG_FORMULA_V1 : formula menu */
.dt-formula-menu{
  min-width:220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dt-formula-menu .dt-formula-item.is-active{
  background:var(--dt-hover-menu);
  font-weight:700;
}
/* CONFIG_FORMULA_V1 : end formula menu */

/* Hamburger menu: stack sections and pin legal links to bottom */
#dt-hamburger-menu.is-open{
  display:flex;
  flex-direction:column;
}
#dt-hamburger-menu .dt-dd-legal{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--dt-border-menu);
  opacity:0.75;
  font-size:0.92em;
}
#dt-hamburger-menu .dt-dd-legal .dt-dd-item{
  padding:6px 8px;
}
#dt-hamburger-menu .dt-dd-legal .dt-dd-item:hover{
  opacity:1;
}


.dt-dd-section{ display:flex; flex-direction:column; gap:var(--dt-menu-section-gap); }
.dt-dd-title{ font-size:11px; opacity:0.6; padding:var(--dt-menu-title-pad-y) var(--dt-menu-title-pad-x); }
.dt-dd-title.dt-saved-views-title{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.02em;
  opacity:0.55;
}

.dt-dd-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:var(--dt-menu-item-pad-y) var(--dt-menu-item-pad-x);
  border-radius: var(--dt-radius);
  background:transparent;
  border:0;
  color:var(--dt-text-menu);
  font:inherit;
  cursor:pointer;
}
.dt-dd-item:hover{ background:var(--dt-hover-menu); }
.dt-dd-item:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dt-focus) 60%, var(--dt-text-menu) 40%);
  outline-offset:2px;
}

.dt-dd-soon{ font-size:11px; opacity:0.6; }
.dt-dd-sep{ height:1px; background:var(--dt-divider); margin:var(--dt-menu-sep-y) var(--dt-menu-sep-x); }
.dt-dd-sep.dt-saved-views-sep{ opacity:0.5; }

.dt-dd-zoom{ display:flex; align-items:center; gap:10px; }
.dt-dd-zoom input{ flex:1; }

.dt-native-select{ display:none !important; }

@media (max-width: 900px){
  .dt-dd-menu,
  .dt-menu-surface{
    padding: var(--dt-menu-pad);
  }

  .dt-dd-section{
    gap: var(--dt-menu-section-gap);
  }

  .dt-dd-title{
    padding: var(--dt-menu-title-pad-y) var(--dt-menu-title-pad-x);
  }

  .dt-dd-item{
    padding: var(--dt-menu-item-pad-y) var(--dt-menu-item-pad-x);
  }

  .dt-dd-zoom{
    gap: 8px;
  }

  .dt-dd-sep{
    margin: var(--dt-menu-sep-y) var(--dt-menu-sep-x);
  }

  .dt-mode-preset-menu{
    --dt-menu-pad: 4px;
    --dt-menu-item-pad-y: 3px;
    --dt-menu-item-pad-x: 6px;
    --dt-menu-title-pad-y: 1px;
    --dt-menu-title-pad-x: 4px;
    --dt-menu-section-gap: 3px;
    --dt-menu-sep-y: 3px;
    font-size:11px;
  }

  #dt-hamburger-menu .dt-dd-legal{
    padding-top: 8px;
  }

  /* Ensure dropdown panels scroll safely on mobile (legal links reachable) */
  .dt-dd-menu{
    max-height: calc(100vh - var(--dt-dd-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
    width: min(95vw, 420px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .dt-dd-menu.dt-overlay-panel{
    left: auto;
    right: auto;
    transform: none;
  }
}

/* =====================================================
   CUSTOM PRESET PANEL (SHARED MENU SURFACE)
   ===================================================== */

#dt-custom-preset-panel,
.dt-custom-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background: color-mix(in srgb, var(--dt-bg) 72%, var(--dt-surface-popover) 28%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px;
}

.dt-custom-panel{
  width:420px;
  max-width:calc(100vw - 28px);
  max-height:calc(100vh - 28px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  line-height:1.45;
  background: var(--dt-surface-popover);
  border:1px solid var(--dt-border-menu);
  border-radius: 10px;
  box-shadow: var(--dt-shadow-menu);
  color:var(--dt-text-menu);
}

.dt-custom-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.dt-custom-panel__title{
  font-weight:700;
  font-size:15px;
}

.dt-custom-panel__subtitle{
  font-size:12px;
  color: var(--dt-dim);
}

.dt-custom-labels{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.dt-custom-label-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color: var(--dt-dim);
}

.dt-custom-label{
  width:100%;
  padding:8px 10px;
  border-radius: calc(var(--dt-radius) + 2px);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
  color: var(--dt-text-menu);
  font-size:13px;
}

.dt-custom-panel input:focus-visible,
.dt-custom-panel button:focus-visible{
  outline:2px solid var(--dt-support-focus, #8fb0ff);
  outline-offset:1px;
}

.dt-custom-panel__close{
  font-size:18px;
  line-height:1;
  padding:0;
}

.dt-custom-panel__search{
  width:100%;
  padding:9px 10px;
  border-radius: calc(var(--dt-radius) + 2px);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
  color: var(--dt-text-menu);
  font-size:14px;
}

.dt-custom-counts{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  color: var(--dt-dim);
}

.dt-category-row{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin:4px 0;
}

.dt-category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.dt-language-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0;
}

.dt-language-label{
  font-size:12px;
  color: var(--dt-dim);
  min-width:68px;
}

.dt-language-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.dt-language-tab{
  padding:4px 8px;
  font-size:12px;
}

.dt-category-tab{
  padding:6px 10px;
  border-radius: calc(var(--dt-radius) + 4px);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
  color: var(--dt-text-menu);
  cursor:pointer;
  font: inherit;
}

.dt-category-tab.is-active{
  background: var(--dt-active-menu);
  border-color: var(--dt-border-menu);
}

.dt-custom-buckets{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.dt-custom-bucket{
  border:1px solid var(--dt-border-menu);
  border-radius: calc(var(--dt-radius) + 4px);
  padding:8px;
  background: var(--dt-surface-menu);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:88px;
}

.dt-custom-bucket__title{
  font-size:12px;
  font-weight:700;
}

.dt-custom-bucket__list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dt-custom-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border-radius: calc(var(--dt-radius) + 4px);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
  font-size:12px;
}

.dt-custom-chip__remove{
  border:0;
  background:transparent;
  color: inherit;
  cursor:pointer;
  font-size:16px;
  line-height:16px;
}

.dt-custom-results-title{
  font-weight:700;
  font-size:12px;
  color: var(--dt-dim);
  margin:2px 0;
}

.dt-custom-results{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dt-custom-result{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius: calc(var(--dt-radius) + 4px);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
}

.dt-custom-result__label{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.dt-custom-result__name{
  font-size:12px;
  font-weight:700;
}

.dt-custom-result__meta{
  font-size:11px;
  color: var(--dt-dim);
}

.dt-custom-btn{
  padding:7px 10px;
  border-radius: calc(var(--dt-radius) + 4px);
  border:1px solid var(--dt-border-menu);
  background: var(--dt-surface-menu);
  color: var(--dt-text-menu);
  cursor:pointer;
  font: inherit;
}

.dt-custom-btn:hover{
  background: var(--dt-hover-menu);
}

.dt-custom-btn--primary{
  background: var(--dt-active-menu);
}

.dt-custom-btn--icon{
  width:34px;
  height:34px;
  padding:0;
}

.dt-custom-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}

.dt-custom-actions__left{
  display:flex;
  align-items:center;
  gap:8px;
}

/* =====================================================
   ADVANCED BUILDER (FULL-SCREEN OVERLAY)
   ===================================================== */

.dt-body-locked{
  overflow:hidden;
}

#dt-advanced-builder{
  position:fixed;
  inset:0;
  z-index:99998;
  background: color-mix(in srgb, var(--dt-builder-bg, var(--dt-bg)) 88%, color-mix(in srgb, var(--dt-builder-text, var(--dt-text)) 18%, transparent 82%) 12%);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:12px;
  color: var(--dt-builder-text, var(--dt-text));
  --ab-bg: var(--dt-builder-bg, var(--dt-bg));
  --ab-surface: var(--dt-builder-surface, var(--dt-panel));
  --ab-surface-strong: var(--dt-builder-surface-strong, var(--dt-surface-2, var(--dt-panel)));
  --ab-border: var(--dt-builder-border, var(--dt-border));
  --ab-text: var(--dt-builder-text, var(--dt-text));
  --ab-muted: var(--dt-builder-muted, var(--dt-muted));
  --ab-accent: var(--dt-builder-accent, var(--dt-accent));
  --ab-danger: color-mix(in srgb, var(--dt-accent, var(--dt-text)) 70%, var(--dt-text, currentColor) 30%);
  --ab-radius: calc(var(--dt-radius) + 8px);
  --ab-hover: var(--dt-hover, color-mix(in srgb, var(--dt-surface, var(--dt-panel)) 86%, color-mix(in srgb, var(--dt-text, currentColor) 70%, transparent 30%) 14%));
  --ab-active: var(--dt-active, color-mix(in srgb, var(--dt-surface, var(--dt-panel)) 76%, color-mix(in srgb, var(--dt-text, currentColor) 60%, var(--dt-bg, transparent) 40%) 24%));
  --ab-focus: var(--dt-focus, var(--ab-accent));
  --ab-btn-bg: color-mix(in srgb, var(--ab-surface) 92%, var(--ab-bg) 8%);
  --ab-btn-border: color-mix(in srgb, var(--ab-border) 92%, var(--ab-bg) 8%);
  --ab-btn-hover: color-mix(in srgb, var(--ab-hover) 90%, var(--ab-bg) 10%);
  --ab-btn-active: color-mix(in srgb, var(--ab-active) 88%, var(--ab-bg) 12%);
  --ab-btn-primary-bg: color-mix(in srgb, var(--ab-accent) 22%, var(--ab-surface) 78%);
  --ab-btn-primary-border: color-mix(in srgb, var(--ab-accent) 45%, var(--ab-border) 55%);
  --ab-btn-ghost-bg: color-mix(in srgb, var(--ab-surface-strong) 86%, var(--ab-surface) 14%);
  --ab-pill-bg: var(--dt-pill-bg, color-mix(in srgb, var(--ab-surface) 88%, var(--ab-bg) 12%));
  --ab-pill-border: var(--dt-pill-border, var(--ab-border));
  --ab-pill-text: var(--dt-pill-text, var(--ab-text));
  --ab-pill-active-bg: var(--dt-pill-active-bg, color-mix(in srgb, var(--ab-accent) 20%, var(--ab-surface) 80%));
  --ab-pill-active-border: var(--dt-pill-active-border, color-mix(in srgb, var(--ab-accent) 38%, var(--ab-border) 62%));
  --ab-pill-active-text: var(--dt-pill-active-text, var(--ab-text));
  --ab-scrim: color-mix(in srgb, var(--dt-text) 65%, transparent 35%);
}

.dt-advanced-shell{
  width: min(1160px, 100%);
  max-width: 1160px;
  height:100%;
  max-height:100%;
  background: var(--ab-surface);
  border:1px solid var(--ab-border);
  border-radius: calc(var(--dt-radius) + 6px);
  box-shadow: var(--dt-shadow, 0 18px 40px color-mix(in srgb, var(--dt-text) 16%, transparent 84%));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color: var(--ab-text);
}

.dt-advanced-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  background: color-mix(in srgb, var(--ab-surface-strong) 88%, var(--ab-bg) 12%);
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 85%, var(--ab-bg) 15%);
}

.dt-advanced-title-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}

.dt-advanced-title{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:var(--ab-text);
  letter-spacing:-0.01em;
}

.dt-advanced-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

.dt-advanced-swap{
  min-width:62px;
}

.dt-advanced-btn{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--ab-btn-border);
  background: var(--ab-btn-bg);
  color:var(--ab-text);
  font-weight:700;
  cursor:pointer;
  transition:background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
  min-height:36px;
  font-size:13px;
}

.dt-advanced-btn:hover{
  background: var(--ab-btn-hover);
  border-color: color-mix(in srgb, var(--ab-border) 82%, var(--ab-accent) 18%);
}

.dt-advanced-btn:active{
  transform:translateY(1px);
  background: var(--ab-btn-active);
}

.dt-advanced-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ab-focus) 35%, transparent 65%);
  border-color: color-mix(in srgb, var(--ab-focus) 45%, var(--ab-border) 55%);
}

.dt-advanced-btn--primary{
  background: var(--ab-btn-primary-bg);
  border-color: var(--ab-btn-primary-border);
  color:var(--ab-text);
}

.dt-advanced-btn--ghost{
  background: var(--ab-btn-ghost-bg);
  border-color: var(--ab-btn-border);
}

.dt-advanced-btn.is-active{
  background: var(--ab-pill-active-bg);
  color:var(--ab-pill-active-text);
  border-color: var(--ab-pill-active-border);
}

.dt-advanced-btn.is-danger{
  background:color-mix(in srgb, var(--ab-danger) 20%, var(--ab-surface) 80%);
  color:color-mix(in srgb, var(--ab-danger) 70%, var(--ab-text) 30%);
  border-color:color-mix(in srgb, var(--ab-danger) 40%, var(--ab-border) 60%);
}

.dt-advanced-start{
  padding:10px 16px 12px;
  display:flex;
  align-items:center;
  gap:10px 12px;
  flex-wrap:wrap;
  background: color-mix(in srgb, var(--ab-surface-strong) 85%, var(--ab-bg) 15%);
  border-bottom:1px solid var(--ab-border);
}

.dt-advanced-start__label{
  font-size:12px;
  color:var(--ab-muted);
  font-weight:800;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.dt-advanced-start__options{
  display:flex;
  gap:8px;
}

.dt-advanced-start__btn{
  min-height:32px;
  padding:7px 12px;
  border-radius:10px;
}

.dt-advanced-start__btn.is-active{
  background: var(--ab-pill-active-bg);
  border-color: var(--ab-pill-active-border);
  color:var(--ab-pill-active-text);
}

.dt-advanced-panel-grid{
  flex:1 1 auto;
  padding:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  overflow-y:auto;
  background: color-mix(in srgb, var(--ab-surface-strong) 86%, var(--ab-bg) 14%);
}

.dt-advanced-card{
  background:var(--ab-surface);
  border:1px solid var(--ab-border);
  border-radius:16px;
  box-shadow:var(--dt-shadow, 0 16px 32px rgba(0,0,0,0.12));
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:210px;
}

.dt-advanced-card__eyebrow{
  font-size:12px;
  color:var(--ab-muted);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:800;
}

.dt-advanced-card__title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.dt-advanced-card__title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ab-text);
}

.dt-advanced-title-input{
  flex:1 1 auto;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--ab-border) 90%, var(--ab-bg) 10%);
  background:color-mix(in srgb, var(--ab-surface-strong) 92%, var(--ab-bg) 8%);
  color:var(--ab-text);
  font-size:16px;
  font-weight:700;
}

.dt-advanced-title-edit{
  border:0;
  background:transparent;
  color:var(--ab-muted);
  cursor:pointer;
  font-size:15px;
  padding:4px 6px;
  border-radius:8px;
}

.dt-advanced-title-edit:hover{
  background:color-mix(in srgb, var(--ab-surface-strong) 90%, var(--ab-bg) 10%);
  color:var(--ab-text);
}

.dt-advanced-summary{
  font-size:13px;
  color:var(--ab-muted);
  padding:6px 8px;
  border-radius:10px;
  background:color-mix(in srgb, var(--ab-surface-strong) 88%, var(--ab-bg) 12%);
  border:1px solid color-mix(in srgb, var(--ab-border) 88%, var(--ab-bg) 12%);
}

.dt-advanced-card__actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dt-advanced-warning{
  color:color-mix(in srgb, var(--ab-accent) 70%, var(--ab-text) 30%);
  background:color-mix(in srgb, var(--ab-accent) 16%, var(--ab-surface) 84%);
  border:1px solid color-mix(in srgb, var(--ab-accent) 26%, var(--ab-border) 74%);
  padding:10px 12px;
  border-radius:12px;
  margin:0 16px 12px;
  font-weight:700;
}

.dt-advanced-footer{
  padding:12px 16px;
  border-top:1px solid color-mix(in srgb, var(--ab-border) 80%, var(--ab-bg) 20%);
  background:color-mix(in srgb, var(--ab-surface-strong) 88%, var(--ab-bg) 12%);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.dt-advanced-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:99999;
  background: transparent;
  isolation: isolate;
}

.dt-advanced-modal::before{
  content:"";
  position:absolute;
  inset:0;
  background:color-mix(in srgb, var(--ab-scrim) 82%, color-mix(in srgb, var(--ab-bg) 30%, transparent 70%) 18%);
  z-index:0;
  pointer-events:none;
}

.dt-advanced-modal__dialog{
  width:min(880px, 100%);
  max-height:calc(100vh - 32px);
  height:calc(100vh - 32px);
  background:color-mix(in srgb, var(--ab-surface-strong) 96%, var(--ab-bg) 4%);
  border:1px solid color-mix(in srgb, var(--ab-border) 82%, var(--ab-bg) 18%);
  border-radius:16px;
  box-shadow:0 28px 70px color-mix(in srgb, var(--dt-text) 22%, transparent 78%);
  display:flex;
  flex-direction:column;
  min-height:0;
  position:relative;
  z-index:1;
  filter:none;
  opacity:1;
}

.dt-advanced-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px 10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ab-surface-strong) 94%, var(--ab-bg) 6%), color-mix(in srgb, var(--ab-surface) 94%, var(--ab-bg) 6%));
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 82%, var(--ab-bg) 18%);
}

.dt-advanced-modal__title{
  font-size:15px;
  font-weight:800;
}

.dt-advanced-modal__count{
  font-size:13px;
  color:var(--ab-muted);
}

.dt-advanced-modal__body{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0;
}

.dt-advanced-modal__search{
  position:sticky;
  top:0;
  z-index:2;
  padding:8px 16px;
  background:color-mix(in srgb, var(--ab-surface) 94%, var(--ab-bg) 6%);
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 80%, var(--ab-bg) 20%);
}

.dt-advanced-modal__search input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--ab-border) 75%, var(--ab-bg) 25%);
  background:color-mix(in srgb, var(--ab-surface) 86%, var(--ab-bg) 14%);
  color:var(--ab-text);
  font-size:14px;
}

.dt-advanced-modal__quick{
  padding:10px 16px 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dt-advanced-modal__filters{
  padding:0 16px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dt-advanced-filter-chips{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dt-advanced-filter-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dt-advanced-filter-title{
  font-size:12px;
  color:var(--ab-muted);
  font-weight:700;
}

.dt-advanced-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dt-advanced-chip{
  padding:7px 10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--ab-border) 70%, var(--ab-bg) 30%);
  background:color-mix(in srgb, var(--ab-surface) 82%, var(--ab-bg) 18%);
  color:var(--ab-text);
  cursor:pointer;
  font-size:13px;
}

.dt-advanced-chip.is-active{
  background:color-mix(in srgb, var(--ab-accent) 30%, var(--ab-surface) 70%);
  border-color:color-mix(in srgb, var(--ab-accent) 45%, var(--ab-border) 55%);
}

.dt-advanced-chip--token{
  padding:7px 10px;
  border-radius:10px;
  border:1px dashed color-mix(in srgb, var(--ab-border) 70%, var(--ab-bg) 30%);
  background:color-mix(in srgb, var(--ab-surface) 85%, var(--ab-bg) 15%);
}

.dt-advanced-modal__list{
  flex:1 1 0;
  min-height:0;
  padding:0 16px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dt-advanced-modal__row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--ab-border) 74%, var(--ab-bg) 26%);
  background:color-mix(in srgb, var(--ab-surface) 85%, var(--ab-bg) 15%);
  cursor:pointer;
}

.dt-advanced-modal__row.is-excluded{
  border-style:dashed;
  opacity:0.8;
}

.dt-advanced-modal__row input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--ab-accent);
}

.dt-advanced-modal__row-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dt-advanced-modal__name{
  font-weight:800;
}

.dt-advanced-modal__meta{
  font-size:12px;
  color:var(--ab-muted);
}

.dt-advanced-modal__footer{
  padding:12px 16px;
  border-top:1px solid color-mix(in srgb, var(--ab-border) 80%, var(--ab-bg) 20%);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:color-mix(in srgb, var(--ab-surface-strong) 90%, var(--ab-bg) 10%);
}

.dt-advanced-empty{
  padding:12px;
  border-radius:12px;
  background:color-mix(in srgb, var(--ab-surface) 82%, var(--ab-bg) 18%);
  border:1px dashed color-mix(in srgb, var(--ab-border) 72%, var(--ab-bg) 28%);
  color:var(--ab-muted);
}

@media (max-width: 900px){
  .dt-advanced-shell{
    border-radius:0;
  }
  .dt-advanced-panel-grid{
    grid-template-columns:1fr;
    padding:14px;
  }
  .dt-advanced-card{
    min-height:0;
  }
  .dt-advanced-modal{
    padding:0;
  }
  .dt-advanced-modal__dialog{
    width:100%;
    height:100%;
    max-height:100%;
    border-radius:0;
  }
}
/* =====================================================
   MAIN GRID — BOTTOM PANELS ARE HARD-RESERVED
   ===================================================== */

.dt-main{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--dt-gap-panel);
  overflow:hidden;
  position:relative;
}

/* DTRP SAFE: focus columns via URL param (layout-only) */
body.dt-cols-a .dt-main > section.dt-column:nth-child(2){
  display:none !important;
}

body.dt-cols-b .dt-main > section.dt-column:nth-child(1){
  display:none !important;
}

body.dt-cols-a .dt-main,
body.dt-cols-b .dt-main{
  grid-template-columns:1fr !important;
}

.dt-main.dt-flow-paused{
  cursor: pause;
}

.dt-main.dt-flow-paused .dt-flow-track{
  animation-play-state: paused !important;
}

.dt-column{
  display:grid;

  /* ✅ This guarantees the Breaking panels row exists */
  grid-template-rows: minmax(0, 1fr) var(--dt-bottomH);

  gap:var(--dt-gap-panel);
  min-height:0;
  overflow:hidden;
}

.dt-panel-resize-handle{
  position:absolute;
  left:0;
  right:0;
  height:var(--dt-resize-handle-h);
  top: calc(100% - var(--dt-bottomH) - (var(--dt-gap-panel) / 2) - (var(--dt-resize-handle-h) / 2));
  cursor:row-resize;
  z-index:5;
  touch-action:none;
  background:transparent;
}

.dt-panel-resize-handle::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:var(--dt-divider);
  border-radius:999px;
  opacity:0.9;
}

.dt-panel-resize-handle:hover::before,
.dt-panel-resize-handle.is-dragging::before{
  background:color-mix(in srgb, var(--dt-divider) 70%, var(--dt-accent, #7cc4ff) 30%);
  opacity:1;
}

.dt-bottom-toggle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-100%);
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:18px;
  border:1px solid var(--dt-utility-border);
  border-radius:10px 10px 0 0;
  border-bottom:none;
  background: color-mix(in srgb, var(--dt-surface) 75%, transparent 25%);
  color:var(--dt-text);
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

body.dt-bottom-hidden .dt-bottom-toggle{
  display:none !important;
}

.dt-bottom-toggle svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.dt-bottom-hidden{
  --dt-bottomH: 0px !important;
}

body.dt-bottom-hidden .dt-panel-bottom{
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}

body.dt-resizing-panels{
  cursor:row-resize;
  user-select:none;
}

.dt-panel{
  background:var(--dt-surface);
  border:1px solid var(--dt-border);
  border-radius:var(--dt-radius);
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
  box-shadow: var(--dt-shadow);
}

.dt-panel-top.is-asym-strong{
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-accent) 45%, var(--dt-border) 55%);
}

.dt-panel-top.is-asym-weak{
  opacity: 0.98;
}

.dt-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:var(--dtHeaderH);
  min-height:var(--dtHeaderH);
  padding:0 10px;
  font-size:13px;
  line-height:1.2;
  color: var(--dt-muted);
  background: var(--dt-surface-2);
  border-bottom:1px solid var(--dt-divider);
  position:relative;
  z-index:2;
  min-width:0;
}

/* UI_TIGHTEN_V1: tighten top panel title bars without changing type scale */
.dt-panel-top .dt-panel__header{
  line-height: 1.1;
}

.dt-panel-top .dt-panel__title{
  line-height: 1.05;
}

.dt-panel__title{
  margin:0;
  font-size: var(--dtHeaderTitleMax);
  line-height: 1;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: var(--dt-text);
  font-weight: 800;
}

.dt-panel__meta{
  margin:0;
  flex:0 0 auto;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--dt-muted);
}

.dt-panel__meta--controls{
  gap:8px;
}

.dt-feed-config-btn{
  border:1px solid var(--dt-border);
  background: color-mix(in srgb, var(--dt-surface-2) 80%, transparent 20%);
  color: var(--dt-text);
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  padding:0;
  cursor:pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dt-feed-config-btn:hover{
  background: color-mix(in srgb, var(--dt-surface-2) 62%, transparent 38%);
  border-color: color-mix(in srgb, var(--dt-border) 70%, var(--dt-accent) 30%);
}

.dt-feed-config-btn:focus-visible{
  outline: none;
  box-shadow: var(--dt-glow);
}

.dt-feed-config-btn:active{
  transform: translateY(1px);
}

.dt-feed-config-panel{
  position: fixed;
  z-index: 400;
  display: none;
  width: min(340px, 92vw);
  max-width: min(340px, 92vw);
  max-height: min(92dvh, 680px); /* OPS_CHANGE_V70 : config panel uses flex column and scrollable body for small viewports */
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 14px;
  box-shadow: var(--dt-shadow);
  color: var(--dt-text);
  overflow: hidden;
}

.dt-feed-config-panel.is-open{
  display: flex; /* OPS_CHANGE_V70 : config panel uses flex column and scrollable body for small viewports */
  flex-direction: column; /* OPS_CHANGE_V70 : config panel uses flex column and scrollable body for small viewports */
}

.dt-feed-config-panel.is-sheet{
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0;
  transform: translateX(-50%);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-height: min(92dvh, calc(100dvh - 12px)); /* OPS_CHANGE_V70 : config panel uses flex column and scrollable body for small viewports */
  padding-bottom: env(safe-area-inset-bottom, 0px); /* OPS_CHANGE_V70 : config panel uses flex column and scrollable body for small viewports */
}

.dt-feed-config-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  background: var(--dt-surface);
  border-bottom:1px solid var(--dt-divider);
}

.dt-feed-config-panel__title{
  font-size:13px;
  font-weight:700;
  color: var(--dt-text);
}

.dt-feed-config-panel__switch{
  margin-left:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--dt-muted);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  opacity:0.7;
}

.dt-feed-config-panel__switch:hover,
.dt-feed-config-panel__switch:focus-visible{
  opacity:1;
  color:var(--dt-text);
}

.dt-feed-config-panel__close{
  border:1px solid var(--dt-border);
  background: transparent;
  color: var(--dt-muted);
  width:24px;
  height:24px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.dt-feed-config-panel__close:hover{
  color: var(--dt-text);
  border-color: color-mix(in srgb, var(--dt-border) 70%, var(--dt-accent) 30%);
}

.dt-feed-config-panel__body{
  padding:10px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1 1 auto; /* OPS_CHANGE_V71 : body scroll + footer pinned */
  overflow: auto; /* OPS_CHANGE_V71 : body scroll + footer pinned */
  -webkit-overflow-scrolling: touch; /* OPS_CHANGE_V71 : body scroll + footer pinned */
}

.dt-feed-config-section{
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid var(--dt-divider);
  border-radius:10px;
  padding:8px;
  background: color-mix(in srgb, var(--dt-surface) 85%, transparent 15%);
} /* OPS_CHANGE_V2 : gear panel supports save/load/delete per-feed + title mode */

.dt-feed-config-section__label{
  font-size:11px;
  font-weight:600;
  color: var(--dt-muted);
}

.dt-feed-config-saved__row{
  display:flex;
  align-items:center;
  gap:8px;
}

.dt-feed-config-saved-select{
  flex:1 1 auto;
  min-width:0;
  padding:5px 8px;
  border:1px solid var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text);
  border-radius:8px;
  font: inherit;
}

.dt-feed-config-saved-actions{
  display:flex;
  gap:6px;
}

.dt-feed-config-saved-views .dt-feed-config-saved-actions{
  flex-wrap:wrap;
}

.dt-feed-config-saved-actions button{
  border:1px solid var(--dt-border);
  background: transparent;
  color: var(--dt-text);
  padding:4px 7px;
  border-radius:8px;
  font-size:11px;
  cursor:pointer;
}

.dt-feed-config-saved-actions button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.dt-feed-config-saved-views__note{
  font-size:11px;
  color: var(--dt-muted);
  min-height:14px;
}

@media (max-width: 720px){
  .dt-feed-config-saved-views .dt-feed-config-saved__row{
    flex-direction:column;
    align-items:stretch;
  }

  .dt-feed-config-saved-views .dt-feed-config-saved-actions{
    width:100%;
  }

  .dt-feed-config-saved-views .dt-feed-config-saved-actions button{
    flex:1 1 auto;
    min-width:92px;
  }
}

.dt-feed-config-title__toggle{
  display:flex;
  gap:6px;
}

.dt-feed-config-title-btn{
  border:1px solid var(--dt-border);
  background: transparent;
  color: var(--dt-text);
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  cursor:pointer;
}

.dt-feed-config-title-btn.is-active{
  border-color: color-mix(in srgb, var(--dt-accent) 65%, var(--dt-border) 35%);
  background: color-mix(in srgb, var(--dt-accent) 20%, transparent 80%);
}

.dt-feed-config-title-input{
  padding:5px 8px;
  border:1px solid var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text);
  border-radius:8px;
  font: inherit;
}

.dt-feed-config-title__actions{
  display:flex;
  justify-content:flex-end;
}

.dt-feed-config-title-reset{
  border:1px solid var(--dt-border);
  background: transparent;
  color: var(--dt-text);
  padding:4px 8px;
  border-radius:8px;
  font-size:11px;
  cursor:pointer;
}

.dt-feed-config-title-reset:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.dt-feed-config-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.dt-feed-config-field span{
  color: var(--dt-muted);
  flex:0 0 auto;
}

.dt-feed-config-field select{
  flex:1 1 auto;
  min-width:0;
  padding:5px 8px;
  border:1px solid var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text);
  border-radius:8px;
  font: inherit;
}

.dt-feed-config-advanced{
  border:1px solid var(--dt-divider);
  border-radius:10px;
  padding:6px 8px;
  background: color-mix(in srgb, var(--dt-surface) 80%, transparent 20%);
}

.dt-feed-config-advanced summary{
  cursor:pointer;
  color: var(--dt-muted);
  font-size:12px;
  font-weight:600;
  list-style: none;
}

.dt-feed-config-advanced summary::-webkit-details-marker{
  display:none;
}

.dt-feed-config-pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.dt-feed-config-pill{
  border:1px solid var(--dt-border);
  background: transparent;
  color: var(--dt-text);
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  cursor:pointer;
}

.dt-feed-config-pill.is-active{
  border-color: color-mix(in srgb, var(--dt-accent) 65%, var(--dt-border) 35%);
  background: color-mix(in srgb, var(--dt-accent) 20%, transparent 80%);
}

.dt-feed-config-pill:disabled{
  opacity:.45;
  cursor:not-allowed;
}


.dt-feed-config-my-sources-lock-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid color-mix(in srgb, var(--dt-accent) 35%, var(--dt-border) 65%);
  border-radius:8px;
  padding:7px 8px;
  background: color-mix(in srgb, var(--dt-accent) 14%, transparent 86%);
  font-size:11px;
}

.dt-feed-config-my-sources-lock-note__text{
  color: var(--dt-text);
}

.dt-feed-config-my-sources-lock-note__actions{
  display:inline-flex;
  gap:6px;
}

.dt-feed-config-my-sources-lock-note__actions button{
  border:1px solid var(--dt-border);
  border-radius:8px;
  padding:4px 8px;
  font-size:11px;
  cursor:pointer;
}

.dt-feed-config-my-sources-lock-note__actions .dt-feed-config-my-sources-unlock{
  background: color-mix(in srgb, var(--dt-accent) 24%, transparent 76%);
  border-color: color-mix(in srgb, var(--dt-accent) 62%, var(--dt-border) 38%);
  color: var(--dt-text);
}

.dt-feed-config-my-sources-lock-note__actions .dt-feed-config-my-sources-learn{
  background: transparent;
  color: var(--dt-muted);
}

.dt-feed-config-my-sources-explainer{
  font-size:11px;
  line-height:1.35;
  color: var(--dt-muted);
}

.dt-mysources--locked .dt-feed-config-field select,
.dt-mysources--locked .dt-feed-config-my-sources-input,
.dt-mysources--locked .dt-feed-config-saved-actions button,
.dt-mysources--locked .dt-feed-config-my-sources-list button{
  opacity:.6;
  cursor:not-allowed;
}
.dt-feed-config-panel__note{
  font-size:11px;
  color: var(--dt-muted);
  margin-top:6px;
}

.dt-feed-config-panel__notice{
  font-size:11px;
  color: var(--dt-muted);
  padding:0 12px 8px;
  flex: 0 0 auto; /* OPS_CHANGE_V71 : body scroll + footer pinned */
}

.dt-feed-config-panel__notice.is-warn{
  color: #e9c77a;
}

.dt-feed-config-panel__footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:8px 12px 12px;
  flex: 0 0 auto; /* OPS_CHANGE_V71 : body scroll + footer pinned */
}

.dt-feed-config-action{
  border:1px solid var(--dt-border);
  background: transparent;
  color: var(--dt-text);
  padding:6px 10px;
  border-radius:9px;
  font-size:12px;
  cursor:pointer;
}

.dt-feed-config-action--primary{
  border-color: color-mix(in srgb, var(--dt-accent) 60%, var(--dt-border) 40%);
  background: color-mix(in srgb, var(--dt-accent) 22%, transparent 78%);
}

.dt-feed-config-action:focus-visible{
  outline: none;
  box-shadow: var(--dt-glow);
}

.dt-panel-bottom .dt-panel__header{
  height:var(--dtHeaderH);
  min-height:var(--dtHeaderH);
  padding:0 10px;
  font-size:12px;
  line-height:1.1;
  position:relative;
  z-index:2;
}

.dt-panel__body{
  flex:1 1 auto;
  min-height:0;
  padding:var(--dt-panel-body-pad-y) var(--dt-panel-body-pad-x);
  background: var(--dt-surface);
  color: var(--dt-text);
}

/* top panel scrolls inside */
.dt-panel-top .dt-panel__body{
  overflow:auto;
}

/* bottom panel is fully contained */
.dt-panel-bottom .dt-panel__body{
  height:100%;
  overflow:hidden;
  padding:var(--dt-panel-body-bottom-pad-y) var(--dt-panel-body-bottom-pad-x);
}

.dt-feed-skeleton{
  height: 14px;
  margin: 6px 0;
  border-radius: 4px;
  background: var(--dt-muted, rgba(255,255,255,0.08));
}

.dt-feed-skeleton--bottom{
  height: 18px;
  margin: 4px 0;
}

/* =====================================================
   SYSTEM RAIL — LIVE MODE ONLY
   ===================================================== */

.dt-system-rail{
  display:none;
  width:100%;
  min-height: calc(var(--dt-railH) + env(safe-area-inset-bottom));
  flex:0 0 auto;
  justify-content:center;
  align-items:stretch;
  padding-bottom: env(safe-area-inset-bottom);
}

body.live-mode .dt-system-rail{
  display:flex;
}

.dt-system-rail__inner{
  display:flex;
  align-items:center;
  gap:var(--dt-system-rail-gap);
  width:100%;
  max-width:none;
  min-height: var(--dt-railH);
  padding: var(--dt-system-rail-pad-y) var(--dt-system-rail-pad-x);
  background: var(--dt-support-bg, var(--dt-panel));
  color: var(--dt-support-text, var(--dt-text));
  border-top: 1px solid var(--dt-support-divider, rgba(255,255,255,0.08));
  font-size: var(--dt-rail-font-size, 13px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-system-rail__link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height: var(--dt-railH);
  text-decoration: none;
  color: inherit;
}

.dt-system-rail__link:focus-visible{
  outline: 2px solid var(--dt-support-focus, #8fb0ff);
  outline-offset: 2px;
}

.dt-system-rail__icon{
  flex:0 0 auto;
  font-size:12px;
  opacity:0.8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.dt-system-rail__text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =====================================================
   ZOOM SCALE (CSS)
   ===================================================== */

:root{
  --dt-src-size: 12px;
  --dt-title-size: 15px;
  --dt-title-line: 1.1;
  --dt-ago-size: 12px;
  --dt-hl-color: var(--dt-accent, currentColor);
}

.dt-headline-source{ font-size: var(--dt-src-size); }
.dt-headline-ago{ font-size: var(--dt-ago-size); }
.dt-headline-title{ font-size: var(--dt-title-size); line-height: var(--dt-title-line); }

.dt-headline-title{
  color: var(--dt-headline-strong, var(--dt-text));
  font-weight: 780;
  letter-spacing: -0.01em;
  text-shadow: var(--dt-headline-glow, none);
}

.dt-headline-match{
  font-weight: inherit;
}

.dt-headline-match--bold{
  font-weight: 860;
}

.dt-headline-match--underline{
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}

.dt-headline-match--highlight{
  background-color: color-mix(in srgb, var(--dt-hl-color) 28%, transparent);
  box-decoration-break: clone;
}

.dt-headline-match--accent{
  color: var(--dt-accent, currentColor);
}

.dt-headline-match--box{
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 4px;
  padding: 0 2px;
  margin: 0 1px;
}

.dt-headline-match--pulse{
  animation: dt-match-pulse 1.4s ease-in-out infinite;
}

@keyframes dt-match-pulse{
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dt-accent) 25%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dt-accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dt-accent) 25%, transparent); }
}

@media (prefers-reduced-motion: reduce){
  .dt-headline-match--pulse{
    animation: none;
  }
}

.dt-headline-dim,
.dt-headline-nonmatch--dim{
  opacity: 0.68;
}

.dt-headline-nonmatch--fade{
  opacity: 0.45;
}

.dt-headline-nonmatch--mono{
  filter: grayscale(1) brightness(0.95);
}

.dt-headline-nonmatch--ghost{
  opacity: 0.35;
  font-style: italic;
}

.dt-headline-source{
  color: var(--dt-source, color-mix(in srgb, var(--dt-accent) 68%, var(--dt-text) 32%));
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}

.dt-favicon{
  width: var(--dt-src-size);
  height: var(--dt-src-size);
  border-radius: 2px;
  vertical-align: text-bottom;
  margin-right: 6px;
  flex: 0 0 auto;
}

.dt-headline-ago,
.dt-headline-meta{
  color: var(--dt-muted);
  letter-spacing: 0.01em;
}

/* DTRP Change #5: headline meta uses horizontal space better (keeps time on same line)
   - Source can shrink with ellipsis
   - Time stays visible
   NOTE: does not affect flow/motion; pure typography/layout inside headline rows.
*/
.dt-headline > a > div:first-child{
  display:flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}
.dt-headline-source{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dt-headline-ago{
  flex:0 0 auto;
  white-space:nowrap;
}

.dt-headline{ /* OPS_CHANGE_V4 : restore subtle per-headline separators */
  border-bottom: 1px solid var(--dt-divider);
  padding-bottom: var(--dt-headline-pad);
  margin-bottom: var(--dt-headline-gap);
}
.dt-headline:last-child{ /* OPS_CHANGE_V4 : restore subtle per-headline separators */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.zoom-xs{ --dt-src-size:10px; --dt-ago-size:10px; --dt-title-size:13px; --dt-title-line:1.10; }
body.zoom-sm{ --dt-src-size:11px; --dt-ago-size:11px; --dt-title-size:14px; --dt-title-line:1.12; }
body.zoom-md{ --dt-src-size:12px; --dt-ago-size:12px; --dt-title-size:16px; --dt-title-line:1.15; }
body.zoom-lg1{ --dt-src-size:13px; --dt-ago-size:13px; --dt-title-size:18px; --dt-title-line:1.15; }
body.zoom-lg2{ --dt-src-size:14px; --dt-ago-size:14px; --dt-title-size:20px; --dt-title-line:1.16; }
body.zoom-lg{ --dt-src-size:15px; --dt-ago-size:15px; --dt-title-size:22px; --dt-title-line:1.16; }

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width:900px){

  :root{
    --dt-bottomH: 96px;
    --dt-railH: 22px;
    --dt-rail-font-size: 11px;
    --dt-system-rail-pad-y: 3px;
    --dt-panel-header-pad-y: 6px;
    --dt-panel-header-pad-x: 10px;
    --dt-panel-body-pad-y: 6px;
    --dt-panel-body-pad-x: 10px;
    --dt-panel-header-bottom-pad-y: 4px;
    --dt-panel-header-bottom-pad-x: 8px;
    --dt-panel-body-bottom-pad-y: 6px;
    --dt-panel-body-bottom-pad-x: 8px;
    --dt-menu-pad: 8px;
    --dt-menu-section-gap: 6px;
    --dt-menu-title-pad-y: 3px;
    --dt-menu-title-pad-x: 5px;
    --dt-menu-item-pad-y: 7px;
    --dt-menu-item-pad-x: 9px;
    --dt-menu-sep-y: 6px;
    --dt-menu-sep-x: 4px;
  }

  .dt-page{
    padding:10px;
    gap:2px;
  }

  .dt-topbar{
    padding:8px 10px;
    border-radius: var(--dt-radius);
  }

  .dt-topbar__controls{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "brand brand ham"
      "search search search";
    align-items:center;
    gap:8px;
  }

  .dt-topbar__brand{ grid-area:brand; min-width:0; }
  .dt-search-wrap{ grid-area:search; width:100%; min-width:0; }
  .dt-search{ width:100%; min-width:0; }
  .dt-topbar__controls .dt-dropdown:last-child{ grid-area:ham; justify-self:end; }

  .dt-build-btn{
    min-height:40px;
    padding:8px 10px;
  }
  .dt-build-btn__text--full{ display:none; }
  .dt-build-btn__text--short{ display:inline; }

  .dt-theme-dd{ display:none !important; }

  .dt-main{
    grid-template-columns:1fr 1fr;
    grid-template-rows: minmax(0, 1fr) var(--dt-bottomH);
    gap:2px;
  }

  /* =====================================================
     MOBILE — PANEL DENSITY (SAFE)
     Goal: reclaim vertical space so bottom panels are readable
     ===================================================== */

  .dt-panel__header{
    height:var(--dtHeaderH);
    min-height:var(--dtHeaderH);
    padding:0 6px;
    font-size:12px;
    gap:6px;
  }

  /* Keep top/bottom panel titles matched and compact on mobile. */
  .dt-panel-top .dt-panel__title,
  .dt-panel-bottom .dt-panel__title{
    font-size: clamp(8.5px, 2.1vw, 11px);
    letter-spacing: clamp(-0.25px, 0.08vw, 0.25px);
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
  }

  .dt-panel__meta{
    gap:4px;
    flex:0 1 auto;
    min-width:0;
  }

  .dt-panel__body{ padding:var(--dt-panel-body-pad-y) var(--dt-panel-body-pad-x); }

  .dt-panel-bottom .dt-panel__header{
    height:var(--dtHeaderH);
    min-height:var(--dtHeaderH);
    padding:0 6px;
    font-size:11px;
  }
  .dt-panel-bottom .dt-panel__body{ padding:var(--dt-panel-body-bottom-pad-y) var(--dt-panel-body-bottom-pad-x); }
  /* DTRP Change #3: pull first headline up in bottom panels (mobile) */
  .dt-panel-bottom .dt-panel__body{ padding-top:2px; }

  .dt-column{ display:contents; }

  .dt-column:nth-child(1) .dt-panel-top{ grid-column:1; grid-row:1; }
  .dt-column:nth-child(1) .dt-panel-bottom{ grid-column:1; grid-row:2; }
  .dt-column:nth-child(2) .dt-panel-top{ grid-column:2; grid-row:1; }
  .dt-column:nth-child(2) .dt-panel-bottom{ grid-column:2; grid-row:2; }

  .dt-panel-resize-handle{ z-index:7; }
  .dt-bottom-toggle{ touch-action:manipulation; }

  /* DTRP Change #8 — Mobile headline density (line-height only) */
  .dt-headline-title{ line-height: 1.08; }

  .dt-system-rail{
    margin-top:-1px;
  }
  .dt-system-rail__inner{
    min-height: var(--dt-railH);
    padding: 3px 10px;
    font-size: 12px;
  }
  .dt-system-rail__link{
    min-height: var(--dt-railH);
  }
}

/* =====================================================
   HT MODE: Horizontal Ticker Belt
   ===================================================== */
:root{
  --dt-ht-belt-height: 52px;
}

body.dt-mode-ht #dt-ht-belt{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dt-ht-belt-height);
  min-height: var(--dt-ht-belt-height);
  line-height: var(--dt-ht-belt-height);
  background: var(--dt-bg);
  color: var(--dt-text);
  border-top: 1px solid var(--dt-border);
  z-index: 50;
}

body:not(.dt-mode-ht) #dt-ht-belt{
  display: none;
}

body.dt-mode-ht .dt-ht-only{
  display: inline-flex;
}

body:not(.dt-mode-ht) .dt-ht-only{
  display: none !important;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-belt__inner{
  height: 100%;
  overflow: hidden;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-belt__track{
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-belt__content{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  white-space: nowrap;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-headline{
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-headline > a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-headline .dt-headline-title,
body.dt-mode-ht #dt-ht-belt .dt-ht-headline .dt-headline-source,
body.dt-mode-ht #dt-ht-belt .dt-ht-headline .dt-headline-ago,
body.dt-mode-ht #dt-ht-belt .dt-ht-headline .dt-headline-meta{
  white-space: nowrap;
}

body.dt-mode-ht #dt-ht-belt .dt-ht-sep{
  color: var(--dt-muted);
  margin: 0 8px;
  white-space: nowrap;
}

body.dt-mode-ht .dt-panel-top,
body.dt-mode-ht .dt-panel-bottom{
  display: none;
}

body.dt-mode-ht .dt-main{
  padding-bottom: calc(var(--dt-ht-belt-height) + 8px);
}

body.dt-mode-ht.dt-ht-hideLatest .dt-panel-bottom{
  display: none;
}

body.dt-mode-ht .dt-utility-btn--ht.is-off{
  opacity: 0.6;
}

@media (max-height:420px){
  body.dt-mode-ht .dt-topbar,
  body.dt-mode-ht .dt-mode-row,
  body.dt-mode-ht .dt-utility-strip,
  body.dt-mode-ht .dt-system-rail,
  body.dt-mode-ht .dt-footer,
  body.dt-mode-ht .dt-chrome-restore{
    display: none !important;
  }

  body.dt-mode-ht .dt-main{
    padding-bottom: var(--dt-ht-belt-height);
  }
}

@media (max-height:300px){
  body.dt-mode-ht{
    overflow: hidden;
  }

  body.dt-mode-ht .dt-main,
  body.dt-mode-ht .dt-panel-resize-handle{
    display: none !important;
  }

  body.dt-mode-ht{
    padding: 0;
  }
}

@media (max-width:520px){
  .dt-build-btn{
    padding:8px;
    min-width:42px;
    gap:6px;
  }
  .dt-build-btn__text--short{ display:none; }
}


/* =====================================================
   DTRP Change #7 — Translucent / Transparent Scrollbars
   Safe: visual only, no layout/flow changes
   ===================================================== */

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track{
  background: transparent;
}
::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,0.25);
  border-radius: var(--dt-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,0.4);
}


/* DTRP Change #9 — Mobile meta-line density (font-size only) */
@media (max-width:900px){
  .dt-headline-meta{ font-size: 0.9em; }
}


/* Top inset removed — tight instrument alignment */
.dt-page{
  padding-top: env(safe-area-inset-top);
}

@media (max-width:900px){
  .dt-page{
    padding-top: env(safe-area-inset-top);
  }
}



/* =====================================================
   DTRP Change #11 — Desktop headline parity guard
   Locks comfortable desktop density
   ===================================================== */
.dt-headline-title{
  line-height: 1.18;
}


/* =====================================================
   DTRP Change #12 — Slogan restore (desktop-only)
   Slogan: "Beyond the Headline"
   Non-intrusive, cosmetic only
   ===================================================== */

.dt-slogan{
  font-size: 0.75em;
  opacity: 0.6;
  margin-left: 10px;
  white-space: nowrap;
}

/* Hide slogan on mobile explicitly */
@media (max-width:900px){
  .dt-slogan{
    display: none;
  }
}


/* =====================================================
   DTRP Change #14 — Ghost slogan anchored under title (no overlap)
   - Nest slogan under .dt-brand-title (HTML)
   - Absolute under title, reserve topbar padding on desktop
   ===================================================== */

/* Reserve a little vertical room for the slogan line (desktop only) */
.dt-topbar{
  padding-bottom: 4px;
}

/* Anchor context */
.dt-brand-title{
  position: relative;
  display: inline-block;
}

/* Ghost slogan: stuck to bottom of the word "DualTicker" */
.dt-brand-title > .dt-slogan{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 3px;
  font-size: 0.7em;
  opacity: 0.45;
  letter-spacing: 0.02em;
  font-style: italic;
  white-space: nowrap;
  pointer-events: none;
}

/* Desktop-only; keep hidden on mobile */
@media (max-width:900px){
  .dt-topbar{ padding-bottom: 4px; } /* restore original feel on mobile */
  .dt-brand-title > .dt-slogan{ display:none; }
}


/* =====================================================
   DTRP Change #15 — Slogan micro-alignment (tight + aligned)
   ===================================================== */

/* Pixel-tight alignment under DualTicker */
.dt-brand-title > .dt-slogan{
  left: 0;              /* exact left edge alignment */
  top: calc(100% - 2px);/* tuck it closer to the glyph baseline */
  margin-top: 0;        /* remove extra air */
  line-height: 1;       /* prevent extra vertical space */
}


/* =====================================================
   DTRP Change #16 — Slogan horizontal offset (avoid search overlap)
   ===================================================== */

/* Nudge slogan slightly left so it never collides with search */
.dt-brand-title > .dt-slogan{
  transform: translateX(-6px);
}


/* =====================================================
   DTRP Change #17 — Reserve brand space (no slogan/search collision)
   Strategy: give the search area a left margin on desktop only.
   Safe: no width/height math changes, just spacing between components.
   ===================================================== */

/* Desktop only: create a consistent gap between brand block and search */
@media (min-width:901px){
  /* Try common wrappers without assuming exact markup */
  .dt-search,
  .dt-searchbar,
  .dt-topbar .search,
  .dt-topbar .search-wrap,
  .dt-topbar .dt-search-wrap,
  .dt-topbar .dt-search-container{
    margin-left: 16px;
  }
}


/* =====================================================
   DTRP Change #18 — Prevent slogan/search overlap (desktop)
   Strategy: reserve brand width so search never intrudes into slogan lane.
   Safe: flex sizing only in topbar; no flow/layout below topbar.
   ===================================================== */

@media (min-width:901px){
  /* Reserve enough horizontal room for logo + title + slogan */
  .dt-topbar__brand{
    flex: 0 0 auto;
    min-width: 260px;
  }

  /* Keep search flexible but allow it to yield */
  .dt-search{
    flex: 1 1 auto;
    min-width: 220px;
  }

  /* Remove any prior horizontal nudges */
  .dt-brand-title > .dt-slogan{
    transform: none !important;
  }
}

/* =====================================================
   Founder button (desktop)
   ===================================================== */

.dt-founder-btn{
  position: relative;
  width:32px;
  height:32px;
  padding:0;
  gap:0;
  overflow:hidden;
  color: var(--dt-accent);
  border-color: color-mix(in srgb, var(--dt-accent) 26%, var(--dt-border) 74%);
}

.dt-founder-btn .dt-founder-icon{
  width:18px;
  height:18px;
  display:block;
  position:relative;
  z-index:2;
}

.dt-founder-btn .dt-founder-key-outline{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dt-founder-btn .dt-founder-key-fill{ display:none; }

.dt-founder-btn .dt-founder-bezel,
.dt-founder-btn .dt-founder-scan{
  position:absolute;
  inset:2px;
  border-radius: calc(var(--dt-control-radius) - 2px);
  pointer-events:none;
}

.dt-founder-btn .dt-founder-bezel{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-accent) 18%, transparent);
  z-index:0;
}

.dt-founder-btn .dt-founder-scan{
  inset: 1px;
  opacity:0;
  z-index:1;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--dt-accent) 30%, transparent) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: dtFounderScanIdle 14s linear infinite;
}

.dt-founder-btn:hover .dt-founder-scan,
.dt-founder-btn:focus-visible .dt-founder-scan,
.dt-founder-btn:active .dt-founder-scan{
  opacity:1;
  animation: dtFounderScanPass 650ms ease-out 1;
}

.dt-founder-btn[data-founder="true"]{
  border-color: color-mix(in srgb, var(--dt-accent) 40%, var(--dt-border) 60%);
  box-shadow: var(--dt-control-shadow), inset 0 0 0 1px color-mix(in srgb, var(--dt-accent) 20%, transparent);
}

.dt-founder-btn[data-founder="true"] .dt-founder-key-outline{ display:none; }
.dt-founder-btn[data-founder="true"] .dt-founder-key-fill{ display:block; fill:currentColor; }
.dt-founder-btn[data-founder="true"] .dt-founder-scan{ display:none; }
.dt-founder-btn[data-founder="true"] .dt-founder-bezel{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-accent) 26%, transparent); }

.dt-founder-access__subtitle{ margin:0 0 14px; color:var(--dt-muted, var(--dt-text)); font-size:14px; }
.dt-founder-access__section{ margin: 0 0 10px; }
.dt-founder-access__section h3{ margin:0 0 6px; font-size:13px; color:var(--dt-text); }
.dt-founder-access__section ul{ margin:0; padding-left:18px; color:var(--dt-muted, var(--dt-text)); font-size:13px; line-height:1.35; }
.dt-founder-access__section li{ margin:0 0 5px; }

@keyframes dtFounderScanPass{
  from{ transform: translateX(-120%); opacity:0; }
  30%{ opacity:0.85; }
  to{ transform: translateX(125%); opacity:0; }
}

@keyframes dtFounderScanIdle{
  0%, 92%{ transform: translateX(-130%); opacity:0; }
  95%{ opacity:0.25; }
  100%{ transform: translateX(125%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .dt-founder-btn .dt-founder-scan,
  .dt-founder-btn:hover .dt-founder-scan,
  .dt-founder-btn:focus-visible .dt-founder-scan,
  .dt-founder-btn:active .dt-founder-scan{
    animation:none !important;
    opacity:0 !important;
  }
}

/* =====================================================
   DOC_MODE Landing (theme-aware, topbar preserved)
   ===================================================== */
body.doc-mode .dt-main{ display:none; }

/* =====================================================
   EMBED MODE (scoped, embed=1)
   ===================================================== */

body.dt-embed .dt-topbar,
body.dt-embed .dt-mode-row,
body.dt-embed .dt-utility-strip,
body.dt-embed .dt-chrome-restore,
body.dt-embed .dt-system-rail,
body.dt-embed .dt-footer,
body.dt-embed .dt-seo-text{
  display:none !important;
}

body.dt-embed .dt-ad,
body.dt-embed .dt-ads,
body.dt-embed .dt-ad-slot,
body.dt-embed [data-ad],
body.dt-embed [data-ads]{
  display:none !important;
}

body.dt-embed .dt-page{
  padding:0;
}
body.live-mode #dt-doc{ display:none; }

#dt-doc{
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
}

.dt-doc__monitor{
  height: 100%;
  border-radius: var(--dt-radius);
  background: var(--dt-panel);
  border: 1px solid var(--dt-panelBorder);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}

.dt-doc__monitor::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.05;
  pointer-events:none;
}

.dt-doc__top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--dt-dim);
  margin-bottom: 24px;
}

.dt-doc__kvs{ display:flex; gap: 14px; flex-wrap: wrap; }
.dt-doc__kvs--right{ justify-content:flex-end; text-align:right; }
.dt-doc__label{ color: var(--dt-dim); }
.dt-doc__value{ color: var(--dt-text); opacity: 0.9; }

.dt-doc__headline{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.4px;
}

.dt-doc__lead{
  margin: 0 0 18px;
  max-width: 70ch;
  color: var(--dt-dim);
  font-size: 16px;
  line-height: 1.55;
}

.dt-doc__bullets{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--dt-dim);
}

.dt-doc__tag{
  color: var(--dt-text);
  opacity: 0.92;
  margin-right: 8px;
}

.dt-doc__actions{
  margin-top: 22px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dt-doc__btn{
  border-radius: var(--dt-radius);
  border: 1px solid var(--dt-panelBorder);
  background: rgba(255,255,255,0.03);
  color: var(--dt-text);
  padding: 10px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  cursor: pointer;
}

.dt-doc__btn:hover{
  background: rgba(255,255,255,0.06);
}

.dt-doc__btn--primary{
  border-color: rgba(255,255,255,0.22);
}


/* Doc footer: show ONLY in Doc Mode and never compete with the reserved support slot */
.dt-doc__footer{
  position: fixed;
  left: 0;
  right: 0;
  /* Lift above the initial ad-reserve "settling" window so it never collides with Doc content */
  bottom: calc(var(--dt-railH) + 24px);
  z-index: 5200;

  display: none; /* enabled only in doc-mode */
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  padding: 6px 12px;
  color: var(--dt-dim);
  font-size: 12px;
  opacity: 0.75;
  pointer-events: auto;
}

.dt-doc__footer-inner{
  width: min(980px, calc(100% - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dt-doc__footer-legal{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.dt-doc__footer-social{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dt-social{
  width: 30px;
  height: 30px;
  border-radius: var(--dt-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.68;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease;
}

.dt-social svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.dt-social:hover{
  opacity: 1;
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.dt-social:focus-visible{
  outline: 2px solid rgba(255,255,255,0.28);
  outline-offset: 2px;
}

/* Live footer */
.dt-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--dt-railH) + 12px);
  z-index: 5200;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  color: #5c6370;
  font-size: 12px;
  pointer-events: auto;
}

.dt-footer__inner{
  width: min(980px, calc(100% - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dt-footer__legal{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.dt-footer__social{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dt-footer a{
  color: inherit;
  text-decoration: none;
  opacity: 0.95;
}
.dt-footer a:hover{
  text-decoration: underline;
  opacity: 1;
  color: #0f1115;
}

.dt-doc__sep{ opacity: 0.6; }

@media (max-width: 700px){
  .dt-footer__inner{
    width: min(100%, calc(100% - 16px));
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }
  .dt-footer__social{
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.dt-methodology-item{
  text-align: left;
}

body.doc-mode .dt-methodology-item{
  display: none;
}

@media (max-width: 520px){
  .dt-doc__footer-inner{
    justify-content: center;
    flex-direction: column;
  }
}


@media (max-width: 520px){
  /* Doc Mode: ensure fixed footer (legal + socials) never overlays the doc buttons/content */
  body.doc-mode #dt-doc .dt-doc__monitor{
    padding-bottom: calc(18px + 96px); /* base bottom padding + footer clearance */
  }
  body.doc-mode #dt-doc .dt-doc__actions{
    flex-direction: column;
    align-items: stretch;
  }
  body.doc-mode #dt-doc .dt-doc__btn{
    width: 100%;
  }
  .dt-doc__footer-social{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .dt-social{
    width: 34px;
    height: 34px;
    border-radius: var(--dt-radius);
  }
}

body.doc-mode .dt-doc__footer{ display:flex; }
body.live-mode .dt-doc__footer{ display:none; }

.dt-doc__footer a{
  color: inherit;
  text-decoration: none;
  opacity: 0.95;
}

.dt-doc__footer a:hover{
  text-decoration: underline;
  opacity: 1;
}

.dt-doc__sep{ opacity: 0.6; }



@media (max-width: 520px){
  /* TEMP: hide Doc Mode footer on mobile to prevent overlap */
  body.doc-mode .dt-doc__footer{
    display: none !important;
  }
  body.doc-mode #dt-doc .dt-doc__monitor{
    padding-bottom: 4px !important;
  }
}

/* =====================================================
   MOBILE DOC MODE FIX: Hide footer to prevent overlap
   Add this to the END of style.css
   ===================================================== */

@media (max-width: 900px) {
  /* Hide Doc Mode footer entirely on mobile to prevent button overlap */
  body.doc-mode .dt-doc__footer {
    display: none !important;
  }
  
  /* Restore original bottom padding */
  body.doc-mode #dt-doc .dt-doc__monitor {
    padding-bottom: 4px !important;
  }
}


.dt-bottom-panel .dt-headline{
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.dt-panel-bottom{
  position: relative;
}

.dt-panel-bottom::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      112deg,
      transparent 16%,
      color-mix(in srgb, var(--dt-accent) 14%, transparent 86%) 47%,
      transparent 76%
    );
}

.dt-panel-bottom.dt-breaking-pulse{
  animation: dt-breaking-border-pulse 520ms ease-out;
}

.dt-panel-bottom.dt-breaking-pulse::after{
  animation: dt-breaking-glass-sheen 520ms ease-out;
}

.dt-panel-bottom .dt-bottom-headline.dt-breaking-text-pulse{
  animation: dt-breaking-text-pulse 520ms ease-out;
}

@keyframes dt-breaking-border-pulse{
  0%{
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--dt-accent) 10%, transparent 90%),
      0 0 0 0 color-mix(in srgb, var(--dt-accent) 0%, transparent 100%);
    border-color: var(--dt-panelBorder);
  }
  45%{
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--dt-accent) 22%, transparent 78%),
      0 0 18px 1px color-mix(in srgb, var(--dt-accent) 16%, transparent 84%);
    border-color: color-mix(in srgb, var(--dt-panelBorder) 76%, var(--dt-accent) 24%);
  }
  100%{
    box-shadow: 0 0 0 0 transparent;
    border-color: var(--dt-panelBorder);
  }
}

@keyframes dt-breaking-glass-sheen{
  0%{
    opacity: 0;
    background-position: -36px 0;
  }
  40%{
    opacity: 0.78;
    background-position: 0 0;
  }
  100%{
    opacity: 0;
    background-position: 28px 0;
  }
}

@keyframes dt-breaking-text-pulse{
  0%{ text-shadow: none; }
  45%{ text-shadow: 0 0 7px color-mix(in srgb, var(--dt-accent) 30%, transparent 70%); }
  100%{ text-shadow: none; }
}



@media (max-width: 768px) and (orientation: portrait){
  /* Mobile portrait: make bottom panels ~1.5x taller (96px -> 144px+) for full headline visibility. */
  :root{
    --dt-bottomH: 160px;
  }
}

/* =====================================================
   SYSTEM RAIL SAFETY
   ===================================================== */
.dt-system-rail{
  min-height: calc(var(--dt-railH) + env(safe-area-inset-bottom));
}
.dt-system-rail__inner{
  overflow:hidden;
}


/* V2_SLEEK_SAFE */
.dt-page{ box-sizing:border-box; }
.dt-topbar__controls{ gap:8px; }
.dt-search-wrap{ gap:var(--dt-search-gap); }
.dt-topbar__brand{ gap:8px; }
.dt-logo{ width:18px; height:18px; }
.dt-brand-title{ font-size:18px; }
.dt-slogan{ margin-left:8px; font-size:12px; opacity:0.75; }
.dt-main{ flex:1 1 auto; min-height:0; }
.dt-grid{ gap:2px; }
.dt-panel{ border-radius:10px; }
/* Keep everything visible; no layout restructuring here. */
/* END V2_SLEEK_SAFE */


/* V2_SLEEK_SAFE_MOBILE */
@media (max-width: 720px){
  /* Kill mobile frame vibes */
  body{ margin:0; }
  .dt-page{ padding:0 !important; }
  /* Tighten strips but keep touch targets */
  .dt-topbar{ padding:4px 6px !important; border-radius:0; }
  .dt-modes{ padding:4px 6px !important; border-radius:0; }
  .dt-topbar__brand{ gap:6px !important; }
  .dt-search-wrap{ gap:var(--dt-search-gap) !important; }
  .dt-topbar__controls{ gap:6px !important; }
  .dt-search{ height:32px !important; } /* a bit taller for mobile UX */
  /* Reduce inter-panel gutters */
  .dt-grid{ gap:1px !important; }
  .dt-panel{ border-radius:8px !important; }
}
/* END V2_SLEEK_SAFE_MOBILE */


/* MODE_PRESET_ACTIVE */
.dt-mode-btn.is-active{
  /* Category selected: PRIMARY highlight (theme-dependent pill fill) */
  background: var(--dt-pill-cat-bg-active);
  border-color: var(--dt-pill-cat-border-active);
  color: var(--dt-pill-cat-text-active);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dt-accent) 55%, transparent 45%) inset,
    0 0 0 2px color-mix(in srgb, var(--dt-accent) 22%, transparent 78%),
    0 10px 18px rgba(0,0,0,0.18);
}

/* Slightly tighter chips on mobile */
@media (max-width: 720px){
  .dt-mode-btn{ padding:4px 7px; font-size:10.5px; }
}
/* END MODE_PRESET_ACTIVE */


/* DT_FLAG_ICONS */
.dt-flag{
  display:inline-block;
  width: 18px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-panelBorder) 70%, transparent 30%);
  background-size: cover;
  background-position: center;
}
.dt-flag-us{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23fff'/><g fill='%23b22234'><rect y='0' width='18' height='1'/><rect y='2' width='18' height='1'/><rect y='4' width='18' height='1'/><rect y='6' width='18' height='1'/><rect y='8' width='18' height='1'/><rect y='10' width='18' height='1'/></g><rect width='7.5' height='5.5' fill='%233c3b6e'/><g fill='%23fff' opacity='0.9'><circle cx='1.2' cy='1.1' r='0.35'/><circle cx='2.6' cy='1.1' r='0.35'/><circle cx='4.0' cy='1.1' r='0.35'/><circle cx='5.4' cy='1.1' r='0.35'/><circle cx='6.8' cy='1.1' r='0.35'/><circle cx='1.9' cy='2.1' r='0.35'/><circle cx='3.3' cy='2.1' r='0.35'/><circle cx='4.7' cy='2.1' r='0.35'/><circle cx='6.1' cy='2.1' r='0.35'/><circle cx='1.2' cy='3.1' r='0.35'/><circle cx='2.6' cy='3.1' r='0.35'/><circle cx='4.0' cy='3.1' r='0.35'/><circle cx='5.4' cy='3.1' r='0.35'/><circle cx='6.8' cy='3.1' r='0.35'/><circle cx='1.9' cy='4.1' r='0.35'/><circle cx='3.3' cy='4.1' r='0.35'/><circle cx='4.7' cy='4.1' r='0.35'/><circle cx='6.1' cy='4.1' r='0.35'/></g></svg>"); }
.dt-flag-ca{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE4IDEyIj4KPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjZmZmIi8+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjZDUyYjFlIi8+CjxyZWN0IHg9IjE0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIgZmlsbD0iI2Q1MmIxZSIvPgo8IS0tIFNpbXBsaWZpZWQgbWFwbGUgbGVhZiArIHN0ZW0gKGRlc2lnbmVkIGZvciAxOHgxMikgLS0+CjxwYXRoIGZpbGw9IiNkNTJiMWUiIGQ9Ik05IDIKTDkuNiAzLjUgTDExIDMuMSBMMTAuMyA0LjIgTDEyLjQgNC4xIEwxMC45IDUuMSBMMTIuMCA1LjcgTDEwLjQgNi4wCkwxMC43IDcuNCBMOS42IDYuOCBMOS42IDkuMyBMOC40IDkuMyBMOC40IDYuOCBMNy4zIDcuNApMNy42IDYuMCBMNi4wIDUuNyBMNy4xIDUuMSBMNS42IDQuMSBMNy43IDQuMiBMNy4wIDMuMSBMOC40IDMuNSBaCk04LjcgOS4zIEw4LjUgMTEgTDkuNSAxMSBMOS4zIDkuMyBaIi8+Cjwvc3ZnPg=="); }
.dt-flag-cn{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23de2910'/><path d='M4 2.1l.5 1.1 1.2.1-.9.7.3 1.2-1-.6-1 .6.3-1.2-.9-.7 1.2-.1z' fill='%23ffde00'/></svg>"); }
.dt-flag-eu{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'><rect width='18' height='12' fill='%230039a6'/><g fill='%23ffcc00'><circle cx='9.0' cy='2.6' r='0.55'/><circle cx='10.7' cy='3.06' r='0.55'/><circle cx='11.94' cy='4.3' r='0.55'/><circle cx='12.4' cy='6.0' r='0.55'/><circle cx='11.94' cy='7.7' r='0.55'/><circle cx='10.7' cy='8.94' r='0.55'/><circle cx='9.0' cy='9.4' r='0.55'/><circle cx='7.3' cy='8.94' r='0.55'/><circle cx='6.06' cy='7.7' r='0.55'/><circle cx='5.6' cy='6.0' r='0.55'/><circle cx='6.06' cy='4.3' r='0.55'/><circle cx='7.3' cy='3.06' r='0.55'/></g></svg>"); }
.dt-flag-ru{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23fff'/><rect y='4' width='18' height='4' fill='%23003f9a'/><rect y='8' width='18' height='4' fill='%23ce2b37'/></svg>"); }
/* END DT_FLAG_ICONS */


/* CATEGORY_PRESET_SEPARATION */
/* Make categories (modes) visually distinct from presets (chips) while staying theme-aware */
.dt-modes{
  position: relative;
  background: color-mix(in srgb, var(--dt-accent) 10%, rgba(255,255,255,0.02) 90%);
  border-color: color-mix(in srgb, var(--dt-accent) 22%, var(--dt-panelBorder) 78%);
}
.dt-modes::after{
  content:"";
  position:absolute;
  left:8px; right:8px; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--dt-accent) 70%, transparent 30%),
    transparent);
  opacity:0.7;
  pointer-events:none;
}

/* Category buttons: slightly more "pill" and brighter border */
.dt-mode-btn{
  border-color: color-mix(in srgb, var(--dt-panelBorder) 60%, var(--dt-accent) 40%);
  border-radius: 999px;
  font-weight: 800;
}
.dt-mode-btn:not(.is-active){
  background: var(--dt-pill-cat-bg);
}

/* Mobile: keep separation visible without wasting space */
@media (max-width: 720px){
  .dt-modes{ padding:4px 6px !important; }
  .dt-modes::after{ left:6px; right:6px; }
}
/* END CATEGORY_PRESET_SEPARATION */

/* DTRP polish: hide legal/social footer in live mode (prevents overlay on feeds) */
body.live-mode .dt-footer{ display:none !important; }

/* OPS_CHANGE_V1: Hide the SEO text block off-screen without affecting layout. */
.dt-seo-text{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* DT_TICKER_STRIP_V1 */
.dt-latest{
  text-decoration: underline;
  text-underline-offset: 2px;
}

#dtTickerRoot{
  position:absolute;
  inset:0;
  z-index: 1000001;
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:0;
}

#dtTickerRoot[hidden]{
  display:none;
}

#dtTickerStrip{
  position:relative;
  z-index: 1;
  height: var(--dt-strip-h, 40px);
  min-height: var(--dt-strip-h, 40px);
  line-height: var(--dt-strip-h, 40px);
  width:100%;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background: var(--dt-panel);
  border-top:1px solid var(--dt-border);
  overflow:hidden;
}

#dtTickerStrip[hidden]{
  display:none;
}

body.dt-ticker-mode{
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  width:100%;
  height:100%;
}

body.dt-ticker-mode .dt-page,
body.dt-ticker-mode .dt-footer,
body.dt-ticker-mode #dt-chrome-restore{
  display:none;
}

body.dt-ticker-mode #dtTickerRoot{
  display:flex;
}

body.dt-ticker-mode #dtTickerRoot[hidden]{
  display:none;
}

#dtTickerBrand{
  flex:0 0 auto;
  border:0;
  background: transparent;
  color: var(--dt-text);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  padding:0;
}

.dtTickerLogo{
  width:18px;
  height:18px;
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
  background: var(--dt-search-bg);
  color: var(--dt-text);
}

.dtTickerName{
  font-weight:800;
  letter-spacing:0.3px;
}

#dtTickerMarquee{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}

.dtTickerTrack{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  white-space:nowrap;
  pointer-events:none;
  animation: dtTickerScroll var(--dt-ticker-duration, 34s) linear infinite;
  transform: translateX(0);
}

.dtTickerGroup{
  display:flex;
  align-items:center;
  gap:22px;
}

.dtTickerSeparator{
  color: var(--dt-text-muted);
  font-size:12px;
  margin:0 6px;
}

#dtTickerStrip .dt-headline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

#dtTickerStrip .dt-headline-title{
  white-space:nowrap;
}

#dtTickerStrip .dt-headline-ago{
  white-space:nowrap;
}


/* TICKER: force single-line headline rows (time + source + headline on one line) */
#dtTickerStrip .dt-headline{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}

#dtTickerStrip .dt-headline > a{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

#dtTickerStrip .dt-headline > a > div:first-child{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  flex:0 0 auto;
  min-width:0;
  white-space:nowrap;
}

#dtTickerStrip .dt-headline-source{
  flex:0 0 auto;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
}

#dtTickerStrip .dt-headline-title{
  display:inline;
  white-space:nowrap;
}


#dtTickerSearch{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:var(--dt-ticker-search-width, 220px);
  max-width:var(--dt-ticker-search-width, 220px);
  height:28px;
  border-radius:var(--dt-radius);
  border:1px solid var(--dt-search-border);
  background: var(--dt-search-bg);
  color: var(--dt-search-text);
  padding:var(--dt-search-pad-y) var(--dt-search-pad-x);
  font-size:12px;
  font-family: var(--dt-search-font);
  outline:none;
}

#dtTickerSearch::placeholder{
  color: var(--dt-search-placeholder);
}

#dtTickerSearch:focus-visible{
  border-color: var(--dt-search-focus-border);
  box-shadow: 0 0 0 2px var(--dt-search-focus-ring);
}

#dtTickerSearch[hidden]{
  display:none;
}

#dtTickerMarquee{
  padding-right:calc(var(--dt-ticker-search-width, 220px) + 12px);
}

@media (max-width: 720px){
  #dtTickerStrip{
    --dt-strip-h: 36px;
    padding:0 10px;
  }
  #dtTickerSearch{
    width:var(--dt-ticker-search-width, 160px);
    max-width:var(--dt-ticker-search-width, 160px);
    right:10px;
  }
  #dtTickerMarquee{
    padding-right:calc(var(--dt-ticker-search-width, 160px) + 10px);
  }
  .dtTickerTrack{
    gap:16px;
  }
  .dtTickerGroup{
    gap:16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .dtTickerTrack{
    animation: none;
  }
}

@keyframes dtTickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--dt-ticker-scroll-distance, -50%)); }
}


/* NEWSROOM THEME: ensure ticker text is readable (dark text on light bg) */
body.theme-newsroom #dtTickerStrip{
  background:#ffffff;
}

body.theme-newsroom #dtTickerStrip,
body.theme-newsroom #dtTickerStrip *{
  color:#111111;
}


/* DT_BOOT_MASK_V1: prevent any pre-init flash */
body.dt-booting { visibility: hidden; }
body.dt-ready { visibility: visible; }

/* Theme Editor (isolated) */
.dt-theme-editor-modal[hidden] { display: none !important; }
.dt-theme-editor-modal {
  --dt-te-text: #e8eefc;
  --dt-te-muted: rgba(232,238,252,0.72);
  --dt-te-bg: #f4f7fb;
  --dt-te-border: rgba(22, 32, 51, 0.22);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.dt-theme-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.dt-theme-editor-shell {
  /* DT_CLEAN_SITE_FIX_FEB10_START */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  overflow: hidden;
  background: rgba(0,0,0,0.45);
  color: var(--dt-te-text);
  border: 1px solid var(--dt-border-menu, var(--dt-border));
  border-radius: 10px;
  box-shadow: var(--dt-shadow-menu, var(--dt-shadow));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: min(90vh, 760px);
}
.dt-theme-editor-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 6px;
  background: color-mix(in srgb, var(--dt-surface-popover, var(--dt-surface-2)) 82%, transparent 18%);
}
.dt-theme-editor-head h2 { margin: 0; font-size: 16px; }
.dt-theme-editor-close {
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: var(--dt-control-bg, var(--dt-surface-2));
  color: var(--dt-te-text);
  min-width: 32px;
  min-height: 32px;
}
.dt-theme-editor-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 2px;
}
.dt-theme-editor-section {
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 6px;
  background: color-mix(in srgb, var(--dt-surface) 88%, transparent 12%);
}
.dt-theme-editor-section h3,
.dt-theme-editor-section summary {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dt-te-muted);
}
.dt-theme-editor-section summary {
  margin: 0;
  cursor: pointer;
}
.dt-theme-editor-section[open] summary { margin: 0 0 8px; }
.dt-theme-editor-row {
  display: grid;
  grid-template-columns: 1fr 58px 1fr;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.dt-theme-editor-row label { font-size: 12px; }
.dt-theme-editor-row input[type="color"] {
  width: 58px;
  height: 28px;
  border: 1px solid var(--dt-border);
  border-radius: 6px;
  background: transparent;
  padding: 0;
}
.dt-theme-editor-row input[type="range"] { width: 100%; }
.dt-theme-editor-share {
  margin-top: 8px;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--dt-surface) 86%, transparent 14%);
}
.dt-theme-editor-share > summary {
  padding: 7px 9px;
  cursor: pointer;
  font-size: 12px;
  color: var(--dt-te-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dt-theme-editor-io { margin-top: 0; padding: 0 9px 9px; }
.dt-theme-editor-io label { display: block; margin: 0 0 6px; font-size: 12px; color: var(--dt-te-muted); }
.dt-theme-editor-io textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--dt-border);
  background: color-mix(in srgb, var(--dt-bg) 80%, transparent 20%);
  color: var(--dt-te-text);
  padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.dt-theme-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dt-theme-editor-actions button {
  border: 1px solid var(--dt-control-border, var(--dt-border));
  border-radius: 8px;
  background: var(--dt-control-bg, var(--dt-surface-2));
  color: var(--dt-te-text);
  padding: 6px 9px;
  font-size: 12px;
}
.dt-theme-editor-error {
  min-height: 18px;
  margin: 6px 0 0;
  color: #ff7c7c;
  font-size: 12px;
}
.dt-theme-editor-draft-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--dt-te-muted);
}
.dt-theme-editor-local{
  margin-top:8px;
  border:1px solid var(--dt-border);
  border-radius:8px;
  padding:8px;
  background: color-mix(in srgb, var(--dt-surface) 88%, transparent 12%);
}
.dt-theme-editor-local h3{
  margin:0 0 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--dt-te-muted);
}
.dt-theme-editor-local-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px;
  margin-bottom:6px;
}
.dt-theme-editor-local input,
.dt-theme-editor-local select,
.dt-theme-editor-local button{
  border:1px solid var(--dt-border);
  border-radius:8px;
  background: var(--dt-control-bg, var(--dt-surface-2));
  color: var(--dt-te-text);
  padding:6px 8px;
  font-size:12px;
}
.dt-theme-editor-local-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
@media (min-width: 980px) {
  .dt-theme-editor-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .dt-theme-editor-shell { width: calc(100vw - 12px); max-height: 92vh; padding: 8px; height: 92vh; }
  .dt-theme-editor-body { grid-template-columns: 1fr; }
}
/* DT_CLEAN_SITE_FIX_FEB10_END */



/* =========================================================
   THEME EDITOR POLISH V3 (frosted shell + vignette + cards)
   Scope: ONLY .dt-theme-editor-*  (safe)
   ========================================================= */

.dt-theme-editor-modal{
  --dt-te-backdrop: radial-gradient(120% 90% at 50% 40%,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.22) 55%,
    rgba(0,0,0,0.34) 100%);
  --dt-te-shell: color-mix(in srgb, var(--dt-surface-popover, var(--dt-surface, #111)) 90%, transparent 10%);
  --dt-te-head: color-mix(in srgb, var(--dt-surface-popover, var(--dt-surface-2, #111)) 94%, transparent 6%);
  --dt-te-border: color-mix(in srgb, var(--dt-border-menu, var(--dt-border, rgba(255,255,255,0.12))) 82%, transparent 18%);
  --dt-te-inner-highlight: rgba(255,255,255,0.16);
}

.dt-theme-editor-backdrop{
  background: var(--dt-te-backdrop);
}

.dt-theme-editor-shell{
  background: var(--dt-te-shell);
  border-color: var(--dt-te-border);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.25),
    0 2px 10px rgba(0,0,0,0.12),
    inset 0 1px 0 var(--dt-te-inner-highlight);
}

.dt-theme-editor-head{
  background: var(--dt-te-head);
  border-radius: 12px;
  padding: 10px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--dt-te-border) 70%, transparent 30%);
}

.dt-theme-editor-section{
  background: color-mix(in srgb, var(--dt-surface, #111) 72%, transparent 28%);
  border: 1px solid color-mix(in srgb, var(--dt-border, rgba(255,255,255,0.12)) 70%, transparent 30%);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.dt-theme-editor-section h3{
  letter-spacing: 0.06em;
}




/* =========================================================
   THEME EDITOR POLISH V4 (button + close de-glow)
   Scope: ONLY .dt-theme-editor-*  (safe)
   ========================================================= */

/* editor-only token tweaks for better depth on bright themes */
.dt-theme-editor-modal{
  --dt-te-btn-bg: color-mix(in srgb, var(--dt-surface-2, #e9eef6) 82%, black 10%);
  --dt-te-btn-bg-hover: color-mix(in srgb, var(--dt-surface-2, #e9eef6) 74%, black 16%);
  --dt-te-btn-border: color-mix(in srgb, var(--dt-border, rgba(0,0,0,0.18)) 85%, transparent 15%);
  --dt-te-btn-text: color-mix(in srgb, var(--dt-text, #111) 92%, black 8%);
  --dt-te-btn-shadow: 0 1px 2px rgba(0,0,0,0.10);
  --dt-te-btn-inset: inset 0 1px 0 rgba(255,255,255,0.35);
  --dt-te-x-bg: color-mix(in srgb, var(--dt-surface-popover, #fff) 82%, black 12%);
  --dt-te-x-bg-hover: color-mix(in srgb, var(--dt-surface-popover, #fff) 72%, black 18%);
  --dt-te-x-border: color-mix(in srgb, var(--dt-border-menu, rgba(0,0,0,0.18)) 88%, transparent 12%);
}

/* Override existing Theme Editor button rules (more specific + !important) */
.dt-theme-editor-modal .dt-theme-editor-actions button,
.dt-theme-editor-modal .dt-theme-editor-local button{
  background: var(--dt-te-btn-bg) !important;
  color: var(--dt-te-btn-text) !important;
  border-color: var(--dt-te-btn-border) !important;
  box-shadow: var(--dt-te-btn-shadow), var(--dt-te-btn-inset) !important;
  filter: none !important;
  opacity: 1 !important;
}

.dt-theme-editor-modal .dt-theme-editor-actions button:hover,
.dt-theme-editor-modal .dt-theme-editor-local button:hover{
  background: var(--dt-te-btn-bg-hover) !important;
}

/* Disabled buttons: keep readable but not glowing */
.dt-theme-editor-modal .dt-theme-editor-actions button:disabled,
.dt-theme-editor-modal .dt-theme-editor-local button:disabled{
  background: color-mix(in srgb, var(--dt-te-btn-bg) 90%, transparent 10%) !important;
  color: color-mix(in srgb, var(--dt-te-btn-text) 55%, transparent 45%) !important;
  border-color: color-mix(in srgb, var(--dt-te-btn-border) 65%, transparent 35%) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Close (X) button: neutral glass, not bright tile */
.dt-theme-editor-modal .dt-theme-editor-close{
  background: var(--dt-te-x-bg) !important;
  border-color: var(--dt-te-x-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important;
  filter: none !important;
  opacity: 1 !important;
}

.dt-theme-editor-modal .dt-theme-editor-close:hover{
  background: var(--dt-te-x-bg-hover) !important;
}



/* DT_THEME_EDITOR_UNDO_RADIUS_V1_START */

/* Header actions (Undo/Redo) */
.dt-theme-editor-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.dt-theme-editor-head-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.dt-theme-editor-head-actions button{
  width:34px;
  height:30px;
  padding:0;
  line-height:1;
  font-size:16px;
  border-radius:10px;
  cursor:pointer;
}

/* Force Theme Editor buttons (Save/Apply/Rename/Delete + header buttons) to be darker on bright themes */
.dt-theme-editor-modal .dt-theme-editor-shell button,
.dt-theme-editor-modal .dt-theme-editor-head-actions button{
  background: color-mix(in srgb, var(--dt-te-bg) 94%, #dfe7f3 6%) !important;
  color: var(--dt-te-text) !important;
  border: 1px solid var(--dt-te-border) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent 86%),
    0 2px 10px rgba(0,0,0,0.10) !important;
}

.dt-theme-editor-modal .dt-theme-editor-shell button:hover,
.dt-theme-editor-modal .dt-theme-editor-head-actions button:hover{
  background: color-mix(in srgb, var(--dt-te-bg) 88%, #d4dfee 12%) !important;
}

.dt-theme-editor-modal .dt-theme-editor-shell button:disabled,
.dt-theme-editor-modal .dt-theme-editor-head-actions button:disabled{
  opacity:0.45 !important;
  cursor:default;
  box-shadow:none !important;
}

/* Close button: neutral glass, never "white tile" */
.dt-theme-editor-modal .dt-theme-editor-close{
  background: color-mix(in srgb, var(--dt-surface-popover, #fff) 84%, black 10%) !important;
  border: 1px solid color-mix(in srgb, var(--dt-border-menu, rgba(0,0,0,0.18)) 86%, transparent 14%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.14) !important;
}

.dt-theme-editor-modal .dt-theme-editor-close:hover{
  background: color-mix(in srgb, var(--dt-surface-popover, #fff) 74%, black 18%) !important;
}

/* Layout slider inline value */
/* Layout rows: override default 3-col grid so the range gets full width */
.dt-theme-editor-row--layout{
  grid-template-columns: 1fr 1fr !important;
  align-items: center;
}
.dt-theme-editor-row--layout .dt-theme-editor-layout-wrap{
  grid-column: 2 / -1;
  width: 100%;
}
.dt-theme-editor-row--layout input[type="range"]{ width: 100%; }

.dt-theme-editor-layout-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.dt-theme-editor-layout-val{
  min-width:52px;
  font-variant-numeric: tabular-nums;
  color: var(--dt-te-muted);
}

/* Radius token: apply across major UI surfaces via overrides (safe, additive) */
.dt-theme-editor-modal{ --dt-radius: var(--dt-radius, 12px); }

.dt-theme-editor-shell,
.dt-theme-editor-section{
  border-radius: var(--dt-radius, 12px) !important;
}

.dt-theme-editor-shell button,
.dt-theme-editor-head-actions button{
  border-radius: calc(var(--dt-radius, 12px) - 2px) !important;
}

/* App-wide surfaces that benefit from a single radius knob */
.dt-panel,
.dt-topbar,
.dt-dd-menu,
.dt-dd,
.dt-toast,
.dt-modal,
.dt-card,
.dt-hud,
.dt-ops-panel{
  border-radius: var(--dt-radius, 12px);
}
/* DT_THEME_EDITOR_UNDO_RADIUS_V1_END */

/* =========================================================
   DT_THEME_EDITOR_GLASS_V1_START
   Scope: Theme Editor modal ONLY (.dt-theme-editor-modal ...)
   Goal: instrument-grade depth + readable on bright themes
   ========================================================= */

.dt-theme-editor-modal{
  /* Editor-only derived tokens (theme-aware, but de-extremed) */
  --dt-te-text:    #162033;
  --dt-te-muted:   #4f6078;
  --dt-te-bg:      #f4f7fb;
  --dt-te-border:  rgba(22, 32, 51, 0.22);

  --dt-te-surface: color-mix(in srgb, var(--dt-te-bg) 94%, #ffffff 6%);
  --dt-te-card:    color-mix(in srgb, var(--dt-te-bg) 90%, #e8eef7 10%);
  --dt-te-head:    color-mix(in srgb, var(--dt-te-bg) 84%, #dde6f2 16%);
  --dt-te-divider: color-mix(in srgb, var(--dt-te-border) 78%, transparent 22%);

  --dt-te-shadow:  0 16px 52px rgba(0,0,0,0.20);
  --dt-te-inset:   inset 0 1px 0 rgba(255,255,255,0.14);

  /* Button tuning to avoid bright-theme blowout */
  --dt-te-btn-bg:      color-mix(in srgb, var(--dt-te-card) 70%, rgba(0,0,0,0.16) 30%);
  --dt-te-btn-bg-h:    color-mix(in srgb, var(--dt-te-card) 66%, rgba(0,0,0,0.22) 34%);
  --dt-te-btn-border:  color-mix(in srgb, var(--dt-te-border) 88%, transparent 12%);
  --dt-te-btn-text:    var(--dt-te-text);

  --dt-te-icon-bg:     color-mix(in srgb, var(--dt-te-card) 66%, rgba(0,0,0,0.20) 34%);
  --dt-te-icon-bg-h:   color-mix(in srgb, var(--dt-te-card) 62%, rgba(0,0,0,0.28) 38%);
}

.dt-theme-editor-backdrop{
  /* Subtle vignette so bright themes feel less flat */
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(0,0,0,0.18), transparent 60%),
    rgba(0,0,0,0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.dt-theme-editor-shell{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--dt-te-surface) !important;
  border: 1px solid var(--dt-te-border) !important;
  border-radius: calc(var(--dt-radius, 12px) + 4px);
  box-shadow: var(--dt-te-shadow), var(--dt-te-inset);
}

.dt-theme-editor-head{
  background: var(--dt-te-head) !important;
  border-bottom: 1px solid var(--dt-te-divider);
  border-top-left-radius: calc(var(--dt-radius, 12px) + 4px);
  border-top-right-radius: calc(var(--dt-radius, 12px) + 4px);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* UI_TIGHTEN_V1: tighter title bar + quieter premium button hierarchy */
.dt-theme-editor-modal{
  z-index: 2147483640;
  --dt-te-btn-bg: color-mix(in srgb, var(--dt-te-card) 76%, rgba(0,0,0,0.24) 24%);
  --dt-te-btn-bg-h: color-mix(in srgb, var(--dt-te-card) 72%, rgba(0,0,0,0.28) 28%);
  --dt-te-primary-bg: color-mix(in srgb, var(--dt-accent, #7cc4ff) 18%, var(--dt-te-btn-bg) 82%);
  --dt-te-primary-bg-h: color-mix(in srgb, var(--dt-accent, #7cc4ff) 24%, var(--dt-te-btn-bg-h) 76%);
}

.dt-theme-editor-head{
  margin-bottom: 6px;
  padding: 4px 6px;
}

.dt-theme-editor-head h2{
  font-size: 15px;
  line-height: 1.1;
}

.dt-theme-editor-head h2{
  letter-spacing: 0.04em;
}

.dt-theme-editor-section,
.dt-theme-editor-local{
  background: var(--dt-te-card) !important;
  border: 1px solid var(--dt-te-border) !important;
  border-radius: calc(var(--dt-radius, 12px) + 2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.dt-theme-editor-section h3,
.dt-theme-editor-local h3{
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--dt-te-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dt-te-divider);
}

.dt-theme-editor-row{
  gap: 12px;
}

.dt-theme-editor-row label{
  color: var(--dt-te-text);
}

/* Buttons (editor-only) */
.dt-theme-editor-modal button,
.dt-theme-editor-modal .dt-theme-editor-local-actions button{
  background: var(--dt-te-btn-bg) !important;
  border: 1px solid var(--dt-te-btn-border) !important;
  color: var(--dt-te-btn-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.14);
  transition: background-color 130ms ease, border-color 130ms ease, box-shadow 130ms ease, transform 90ms ease;
}

.dt-theme-editor-modal button:hover{
  background: var(--dt-te-btn-bg-h) !important;
  border-color: color-mix(in srgb, var(--dt-te-btn-border) 68%, var(--dt-accent, #7cc4ff) 32%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(0,0,0,0.08);
}

.dt-theme-editor-modal button:active{
  transform: translateY(1px);
}

/* Close (X) button */
.dt-theme-editor-close{
  background: var(--dt-te-icon-bg) !important;
  border: 1px solid var(--dt-te-btn-border) !important;
  color: var(--dt-te-btn-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.10);
}

.dt-theme-editor-close:hover{
  background: var(--dt-te-icon-bg-h) !important;
}

/* Undo/Redo icon buttons */
.dt-theme-editor-head-actions button{
  background: var(--dt-te-icon-bg) !important;
  border: 1px solid var(--dt-te-btn-border) !important;
  color: var(--dt-te-btn-text) !important;
}

.dt-theme-editor-head-actions button:hover{
  background: var(--dt-te-icon-bg-h) !important;
}

/* Inputs inside editor */
.dt-theme-editor-modal input[type="text"],
.dt-theme-editor-modal select{
  background: color-mix(in srgb, var(--dt-te-card) 72%, rgba(0,0,0,0.18) 28%) !important;
  border: 1px solid var(--dt-te-border) !important;
  color: var(--dt-te-text) !important;
}

.dt-theme-editor-modal input[type="text"]::placeholder{
  color: color-mix(in srgb, var(--dt-te-muted) 80%, transparent 20%);
}

/* Slider track polish (subtle) */
.dt-theme-editor-modal input[type="range"]{
  accent-color: var(--dt-accent, #7cc4ff);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

/* =========================================================
   DT_THEME_EDITOR_GLASS_V1_END
   ========================================================= */

/* =========================================================
   DT_THEME_EDITOR_PREMIUM_CONTROLS_V1_START
   Scope: Theme Editor modal ONLY
   Adds: premium sliders + button hierarchy (Save primary)
   ========================================================= */

.dt-theme-editor-modal{
  --dt-te-primary-bg: color-mix(in srgb, var(--dt-accent, #7cc4ff) 24%, var(--dt-te-btn-bg) 76%);
  --dt-te-primary-bg-h: color-mix(in srgb, var(--dt-accent, #7cc4ff) 30%, var(--dt-te-btn-bg-h) 70%);
  --dt-te-primary-border: color-mix(in srgb, var(--dt-accent, #7cc4ff) 42%, var(--dt-te-btn-border) 58%);

  /* subtle danger for delete, still classy */
  --dt-te-danger-bg: color-mix(in srgb, rgba(220,60,60,0.55) 22%, var(--dt-te-btn-bg) 78%);
  --dt-te-danger-bg-h: color-mix(in srgb, rgba(220,60,60,0.65) 26%, var(--dt-te-btn-bg-h) 74%);
  --dt-te-danger-border: color-mix(in srgb, rgba(220,60,60,0.80) 34%, var(--dt-te-btn-border) 66%);
}

/* Button hierarchy */
.dt-theme-editor-modal button{
  border-radius: calc(var(--dt-radius, 12px) - 2px);
}

/* Primary: Save Current */
.dt-theme-editor-local-actions button:first-child{
  background: var(--dt-te-primary-bg) !important;
  border-color: var(--dt-te-primary-border) !important;
  font-weight: 600;
}
.dt-theme-editor-local-actions button:first-child:hover{
  background: var(--dt-te-primary-bg-h) !important;
}

/* Danger: Delete */
.dt-theme-editor-local-actions button:last-child{
  background: var(--dt-te-danger-bg) !important;
  border-color: var(--dt-te-danger-border) !important;
}
.dt-theme-editor-local-actions button:last-child:hover{
  background: var(--dt-te-danger-bg-h) !important;
}

/* Premium sliders: consistent track + filled amount using background-size trick */
.dt-theme-editor-modal input[type="range"]{
  height: 18px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--dt-accent, #7cc4ff) 58%, rgba(0,0,0,0.10) 42%) 0%,
    color-mix(in srgb, var(--dt-accent, #7cc4ff) 58%, rgba(0,0,0,0.10) 42%) var(--dt-te-range-fill, 50%),
    color-mix(in srgb, var(--dt-te-border) 55%, transparent 45%) var(--dt-te-range-fill, 50%),
    color-mix(in srgb, var(--dt-te-border) 55%, transparent 45%) 100%
  );
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dt-te-border) 75%, rgba(0,0,0,0.08) 25%);
  padding: 0 2px;
  outline: none;
  appearance: none;
}

/* Thumb (webkit) */
.dt-theme-editor-modal input[type="range"]::-webkit-slider-thumb{
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dt-accent, #7cc4ff) 70%, #ffffff 30%);
  border: 1px solid color-mix(in srgb, var(--dt-accent, #7cc4ff) 55%, rgba(0,0,0,0.18) 45%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Thumb (moz) */
.dt-theme-editor-modal input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dt-accent, #7cc4ff) 70%, #ffffff 30%);
  border: 1px solid color-mix(in srgb, var(--dt-accent, #7cc4ff) 55%, rgba(0,0,0,0.18) 45%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Track (moz) */
.dt-theme-editor-modal input[type="range"]::-moz-range-track{
  height: 18px;
  background: transparent;
  border: none;
}

/* Focus visibility */
.dt-theme-editor-modal input[type="range"]:focus-visible,
.dt-theme-editor-modal button:focus-visible,
.dt-theme-editor-modal input[type="text"]:focus-visible,
.dt-theme-editor-modal select:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--dt-accent, #7cc4ff) 60%, transparent 40%);
  outline-offset: 2px;
}

/* Small helper: compute --dt-te-range-fill for all ranges via CSS var fallback
   JS will set this var inline per slider if desired; otherwise it stays mid. */
.dt-theme-editor-modal input[type="range"][data-dt-fill]{
  --dt-te-range-fill: attr(data-dt-fill percentage);
}

/* =========================================================
   DT_THEME_EDITOR_PREMIUM_CONTROLS_V1_END
   ========================================================= */


/* DT_PAYWALL_THEME_SAVE_GATE_V1_START */
.dt-paywall{
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 8, 14, 0.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: dtPaywallFadeIn 150ms ease-out;
}

.dt-paywall__sheet{
  position: fixed;
  z-index: 2147483647;
  width: min(420px, calc(100vw - 28px));
  border-radius: 17px;
  border: 1px solid color-mix(in srgb, var(--dt-accent, #4ecdc4) 50%, transparent);
  background: color-mix(in srgb, var(--dt-surface, #111827) 80%, transparent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  padding: 16px;
  color: var(--dt-text, #fff);
  transform-origin: center;
  animation: dtPaywallSheetIn 150ms ease-out;
}

.dt-paywall__title{ margin: 0 0 8px; font-size: 18px; line-height: 1.2; }
.dt-paywall__body{ margin: 0 0 12px; color: var(--dt-muted, #a7b0c0); font-size: 14px; line-height: 1.45; }
.dt-paywall__actions{ display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dt-paywall__actions button{
  border: 1px solid var(--dt-border, rgba(255,255,255,0.18));
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--dt-text, #fff);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}
.dt-paywall__actions button[data-action="unlock"]{
  background: var(--dt-accent, #4ecdc4);
  color: #041018;
  border-color: color-mix(in srgb, var(--dt-accent, #4ecdc4) 70%, #fff 8%);
  font-weight: 700;
}
.dt-paywall__actions button[disabled]{ opacity: 0.7; cursor: wait; }
.dt-paywall__microcopy{ margin: 10px 0 0; font-size: 12px; color: var(--dt-muted, #a7b0c0); }

@keyframes dtPaywallFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes dtPaywallSheetIn{ from{ opacity: 0; transform: translateY(8px) scale(0.985); } to{ opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 700px){
  .dt-paywall{
    place-items: end center;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .dt-paywall__sheet{
    width: min(560px, calc(100vw - 16px));
    border-radius: 16px 16px 14px 14px;
    animation: dtPaywallSheetMobileIn 160ms ease-out;
  }
  .dt-paywall__actions{ grid-template-columns: 1fr; }
}

@keyframes dtPaywallSheetMobileIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .dt-paywall,
  .dt-paywall__sheet{ animation: none !important; }
}
/* DT_PAYWALL_THEME_SAVE_GATE_V1_END */