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

:root{
  --dt-bg: #0b0f16;
  --dt-panel: rgba(255,255,255,0.04);
  --dt-panelBorder: rgba(255,255,255,0.08);
  --dt-text: rgba(255,255,255,0.92);
  --dt-dim: rgba(255,255,255,0.6);

  --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;

  /* ✅ Guaranteed sizes (never disappear) */
  --dt-bottomH: 130px;   /* bottom Breaking panels */
  --dt-railH: 36px;      /* 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);
}

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

html{ overflow:hidden; }
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);
}

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:2px;

  /* 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;
  /* V2: tighter topbar */
  padding:4px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  /* DTRP: ensure dropdown overlays Doc footer/socials (Chrome stacking-context quirk) */
  z-index:8000;
}

.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:5px;
}

/* BRAND */
.dt-topbar__brand{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.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:6px 9px;
  border-radius: var(--dt-radius);
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
  color:var(--dt-text);
  outline:none;
  font-size:13px;
}

.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 rgba(255,255,255,0.12);
  background:linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  color:var(--dt-text);
  font-weight:700;
  cursor:pointer;
  transition:background 120ms ease, transform 120ms ease, border-color 120ms ease;
  flex:0 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dt-build-btn:hover{
  background:linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.18);
}

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

.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-dd-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 8px;
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-panelBorder);
  background: var(--dt-panel);
  color:var(--dt-text);
  cursor:pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

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

.dt-hamburger-btn{
  width:32px;
  font-size:17px;
  padding:5px 0;
}

/* =====================================================
   MODE + PRESETS ROW (COMPACT, SINGLE LINE)
   ===================================================== */
.dt-mode-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:6px;
  padding:4px 6px;
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-panelBorder);
  background: var(--dt-panel);
  min-width:0;
}

.dt-mode-buttons{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}

.dt-mode-btn{
  padding:5px 8px;
  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:11px;
  cursor:pointer;
}

.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-presets{
  display:flex;
  align-items:center;
  gap:5px;
  flex:1 1 auto;
  overflow-x:auto;
  padding-bottom:2px;
  white-space:nowrap;
  scrollbar-width: thin;
  min-width:0;
  scrollbar-gutter: stable;
}

/* 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);
}

.dt-mode-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius: calc(var(--dt-radius) + 4px);
  border:1px solid var(--dt-pill-preset-border);
  background: var(--dt-pill-preset-bg);
  color: var(--dt-text);
  font-size:11px;
  cursor:pointer;
  flex:0 0 auto;
}

.dt-mode-chip:disabled{
  opacity:0.6;
  cursor:default;
}

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

.dt-dd-menu,
.dt-menu-surface{
  padding:10px;
  border-radius: var(--dt-radius);
  border:1px solid var(--dt-panelBorder);
  background: var(--dt-panel);
  color: var(--dt-text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
}

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

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

/* 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-panelBorder);
  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:8px; }
.dt-dd-title{ font-size:11px; opacity:0.6; padding:4px 6px; }

.dt-dd-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius: var(--dt-radius);
  background:transparent;
  border:0;
  color:var(--dt-text);
  font:inherit;
  cursor:pointer;
}
.dt-dd-item:hover{ background:rgba(255,255,255,0.07); }

.dt-dd-soon{ font-size:11px; opacity:0.6; }
.dt-dd-sep{ height:1px; background:var(--dt-panelBorder); margin:8px 4px; }

.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: 8px;
  }

  .dt-dd-section{
    gap: 6px;
  }

  .dt-dd-title{
    padding: 3px 5px;
  }

  .dt-dd-item{
    padding: 7px 9px;
  }

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

  .dt-dd-sep{
    margin: 6px 4px;
  }

  #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);
  }
}

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

#dt-custom-preset-panel,
.dt-custom-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background: rgba(0,0,0,0.55);
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  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;
}

.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-panelBorder);
  background: var(--dt-panel);
  color: var(--dt-text);
  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-panelBorder);
  background: var(--dt-panel);
  color: var(--dt-text);
  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-panelBorder);
  background: var(--dt-panel);
  color: var(--dt-text);
  cursor:pointer;
  font: inherit;
}

.dt-category-tab.is-active{
  background: rgba(255,255,255,0.10);
  border-color: var(--dt-highlight, var(--dt-panelBorder));
}

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

.dt-custom-bucket{
  border:1px solid var(--dt-panelBorder);
  border-radius: calc(var(--dt-radius) + 4px);
  padding:8px;
  background: var(--dt-panel);
  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-panelBorder);
  background: var(--dt-panel);
  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-panelBorder);
  background: var(--dt-panel);
}

.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-panelBorder);
  background: transparent;
  color: var(--dt-text);
  cursor:pointer;
  font: inherit;
}

.dt-custom-btn:hover{
  background: rgba(255,255,255,0.07);
}

.dt-custom-btn--primary{
  background: rgba(255,255,255,0.10);
}

.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: var(--dt-bg, #0b0f16);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:12px;
  --ab-bg: var(--dt-bg, #0b0f16);
  --ab-surface: color-mix(in srgb, var(--ab-bg) 90%, #0f1624 10%);
  --ab-surface-strong: color-mix(in srgb, var(--ab-bg) 82%, #0c111d 18%);
  --ab-border: var(--dt-panelBorder, rgba(255,255,255,0.16));
  --ab-text: var(--dt-text, #eaf1ff);
  --ab-muted: var(--dt-dim, rgba(234,241,255,0.72));
  --ab-accent: var(--dt-accent, #7cc4ff);
  --ab-danger: #ff7a7a;
  --ab-radius: 14px;
}

.dt-advanced-shell{
  width: min(1160px, 100%);
  max-width: 1160px;
  height:100%;
  max-height:100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ab-surface-strong) 88%, rgba(255,255,255,0.04) 12%), color-mix(in srgb, var(--ab-surface-strong) 92%, rgba(0,0,0,0.28) 8%));
  border:1px solid color-mix(in srgb, var(--ab-border) 85%, rgba(255,255,255,0.12) 15%);
  border-radius: calc(var(--dt-radius) + 6px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  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:linear-gradient(180deg, color-mix(in srgb, var(--ab-surface-strong) 88%, rgba(255,255,255,0.06) 12%), color-mix(in srgb, var(--ab-surface-strong) 92%, rgba(0,0,0,0.3) 8%));
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 85%, rgba(255,255,255,0.18) 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 color-mix(in srgb, var(--ab-border) 80%, rgba(255,255,255,0.12) 20%);
  background:color-mix(in srgb, var(--ab-surface) 90%, rgba(255,255,255,0.05) 10%);
  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:color-mix(in srgb, var(--ab-surface) 82%, rgba(255,255,255,0.1) 18%);
  border-color:color-mix(in srgb, var(--ab-border) 70%, rgba(255,255,255,0.2) 30%);
}

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

.dt-advanced-btn--primary{
  background:linear-gradient(135deg, color-mix(in srgb, var(--ab-accent) 90%, #ffffff 10%), color-mix(in srgb, var(--ab-accent) 70%, #5a7dff 30%));
  border-color:color-mix(in srgb, var(--ab-accent) 55%, rgba(255,255,255,0.2) 45%);
  color:#041018;
}

.dt-advanced-btn--ghost{
  background:color-mix(in srgb, var(--ab-surface) 78%, rgba(255,255,255,0.05) 22%);
  border-color:color-mix(in srgb, var(--ab-border) 72%, rgba(255,255,255,0.14) 28%);
}

.dt-advanced-btn.is-active{
  background:color-mix(in srgb, var(--ab-accent) 28%, var(--ab-surface) 72%);
  color:var(--ab-text);
}

.dt-advanced-btn.is-danger{
  background:color-mix(in srgb, var(--ab-danger) 20%, var(--ab-surface) 80%);
  color:#ffe1e1;
  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) 86%, rgba(255,255,255,0.05) 14%);
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 80%, rgba(255,255,255,0.14) 20%);
}

.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:color-mix(in srgb, var(--ab-accent) 26%, var(--ab-surface) 74%);
  border-color:color-mix(in srgb, var(--ab-accent) 42%, var(--ab-border) 58%);
  color:var(--ab-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:linear-gradient(180deg, color-mix(in srgb, var(--ab-surface) 90%, rgba(255,255,255,0.02) 10%), color-mix(in srgb, var(--ab-surface-strong) 90%, rgba(0,0,0,0.22) 10%));
}

.dt-advanced-card{
  background:color-mix(in srgb, var(--ab-surface-strong) 88%, rgba(255,255,255,0.05) 12%);
  border:1px solid color-mix(in srgb, var(--ab-border) 78%, rgba(255,255,255,0.16) 22%);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,0.3);
  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) 75%, rgba(255,255,255,0.18) 25%);
  background:color-mix(in srgb, var(--ab-surface) 82%, rgba(255,255,255,0.05) 18%);
  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) 80%, rgba(255,255,255,0.07) 20%);
  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) 78%, rgba(255,255,255,0.06) 22%);
  border:1px solid color-mix(in srgb, var(--ab-border) 72%, rgba(255,255,255,0.14) 28%);
}

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

.dt-advanced-warning{
  color:#ffd7a8;
  background:color-mix(in srgb, #ff9900 18%, var(--ab-surface) 82%);
  border:1px solid color-mix(in srgb, #ff9900 30%, var(--ab-border) 70%);
  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%, rgba(255,255,255,0.16) 20%);
  background:color-mix(in srgb, var(--ab-surface-strong) 88%, rgba(255,255,255,0.05) 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;
  background:rgba(0,0,0,0.65);
  z-index:99999;
}

.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) 90%, rgba(255,255,255,0.04) 10%);
  border:1px solid color-mix(in srgb, var(--ab-border) 82%, rgba(255,255,255,0.16) 18%);
  border-radius:16px;
  box-shadow:0 28px 70px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.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) 90%, rgba(255,255,255,0.05) 10%), color-mix(in srgb, var(--ab-surface) 92%, rgba(0,0,0,0.28) 8%));
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 82%, rgba(255,255,255,0.18) 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) 88%, rgba(255,255,255,0.04) 12%);
  border-bottom:1px solid color-mix(in srgb, var(--ab-border) 80%, rgba(255,255,255,0.14) 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%, rgba(255,255,255,0.18) 25%);
  background:color-mix(in srgb, var(--ab-surface) 82%, rgba(255,255,255,0.05) 18%);
  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%, rgba(255,255,255,0.14) 30%);
  background:color-mix(in srgb, var(--ab-surface) 82%, rgba(255,255,255,0.04) 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%, rgba(255,255,255,0.2) 30%);
  background:color-mix(in srgb, var(--ab-surface) 85%, rgba(255,255,255,0.06) 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%, rgba(255,255,255,0.16) 26%);
  background:color-mix(in srgb, var(--ab-surface) 85%, rgba(255,255,255,0.05) 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%, rgba(255,255,255,0.16) 20%);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:color-mix(in srgb, var(--ab-surface-strong) 90%, rgba(255,255,255,0.05) 10%);
}

.dt-advanced-empty{
  padding:12px;
  border-radius:12px;
  background:color-mix(in srgb, var(--ab-surface) 82%, rgba(255,255,255,0.05) 18%);
  border:1px dashed color-mix(in srgb, var(--ab-border) 72%, rgba(255,255,255,0.2) 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:2px;
  overflow:hidden;
}

.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:2px;
  min-height:0;
  overflow:hidden;
}

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

.dt-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  font-size:13px;
  line-height:1.2;
  opacity:0.7;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.dt-panel__title{
  margin:0;
  font-size: inherit;
  line-height: inherit;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

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

.dt-panel-bottom .dt-panel__header{
  padding:5px 10px;
  font-size:12px;
  line-height:1.1;
}

.dt-panel__body{
  flex:1 1 auto;
  min-height:0;
  padding:10px 12px;
}

/* 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;
}

/* =====================================================
   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:10px;
  width:100%;
  max-width:1200px;
  min-height: var(--dt-railH);
  padding: 6px 12px;
  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: 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: 16px;
  --dt-title-line: 1.15;
  --dt-ago-size: 12px;
}

.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); }

/* 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;
}

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: 24px;
  }

  .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{
    padding:6px 10px;
    font-size:12px;
  }

  .dt-panel__title{
    font-size: clamp(10px, 2.6vw, 14px);
    letter-spacing: clamp(-0.2px, 0.1vw, 0.4px);
    text-overflow: clip;
  }

  .dt-panel__meta{ gap:4px; }

  .dt-panel__body{ padding:8px 10px; }

  .dt-panel-bottom .dt-panel__header{
    padding:4px 8px;
    font-size:11px;
  }
  .dt-panel-bottom .dt-panel__body{ padding:6px 8px; }
  /* 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; }

  /* 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);
  }
}

@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; }
}


/* =====================================================
   DTRP Change #10 — Professional top inset (frame)
   Preserves safe-area, reduces dead space
   ===================================================== */

/* Desktop */
.dt-page{
  padding-top: calc(8px + env(safe-area-inset-top));
}

/* Mobile */
@media (max-width:900px){
  .dt-page{
    padding-top: calc(6px + 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: 18px;
}

/* 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: 10px; } /* 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;
  }
}

/* =====================================================
   DTRP Change #22 — Twitch presence icon (desktop-only)
   Subtle, discoverable, non-intrusive
   ===================================================== */

.dt-twitch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-left:8px;
  opacity:0.55;
}

.dt-twitch svg{
  width:18px;
  height:18px;
  fill:#9146FF; /* muted Twitch purple */
}

.dt-twitch:hover{
  opacity:0.9;
  filter: drop-shadow(0 0 6px rgba(145,70,255,0.45));
}

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


/* =====================================================
   DTRP Change #23 — Twitch icon placement + neon (desktop)
   Safe: topbar control only; no panel/flow changes
   ===================================================== */

:root{
  --dt-twitch-purple: #9146FF;
}

.dt-twitch-btn{
  padding:8px 10px;
  gap:0;
  color: var(--dt-twitch-purple);
  opacity: 0.70;
}

.dt-twitch-btn svg{
  width:18px;
  height:18px;
  fill: currentColor;
  display:block;
}

/* Neon sign vibe: subtle idle, stronger hover */
.dt-twitch-btn:hover{
  opacity: 1;
  border-color: rgba(145,70,255,0.45);
  box-shadow:
    0 0 0 1px rgba(145,70,255,0.20) inset,
    0 0 12px rgba(145,70,255,0.35);
}

/* Ensure it sits perfectly in the control row */
.dt-topbar__controls{
  align-items: center;
}

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


/* =====================================================
   DOC_MODE Landing (theme-aware, topbar preserved)
   ===================================================== */
body.doc-mode .dt-main{ display:none; }
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;
}

.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: 18px !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: 18px !important;
  }
}


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



@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:6px; }
.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:6px !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);
}

.dt-mode-chip.is-active{
  /* Preset selected: SECONDARY highlight (theme-dependent pill fill) */
  background: var(--dt-pill-preset-bg-active);
  border-color: var(--dt-pill-preset-border-active);
  color: var(--dt-pill-preset-text-active);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dt-accent) 40%, transparent 60%) inset,
    0 0 0 1.5px color-mix(in srgb, var(--dt-accent) 18%, transparent 82%),
    0 8px 14px rgba(0,0,0,0.14);
}

.dt-mode-chip{
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Slightly tighter chips on mobile */
@media (max-width: 720px){
  .dt-mode-btn{ padding:4px 7px; font-size:10.5px; }
  .dt-mode-chip{ 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;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 width='4' height='12' fill='%23d52b1e'/><rect x='14' width='4' height='12' fill='%23d52b1e'/><path d='M9 2.2l.8 1.4 1.3-.3-.7 1.2 1 .9-1.4.1-.4 1.3-.6-1.2-1.4.3 1-.9-.8-1.3 1.3.1z' fill='%23d52b1e'/></svg>"); }
.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>"); }
/* 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;
}

/* Presets row: darker, slightly inset, with a subtle top accent */
#dt-mode-presets{
  position: relative;
  padding-top: 6px;
  margin-top: 2px;
}
#dt-mode-presets::before{
  content:"";
  position:absolute;
  left:8px; right:8px; top:0;
  height:1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--dt-panelBorder) 65%, var(--dt-accent) 35%),
    transparent);
  opacity:0.85;
  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);
}

/* Preset chips: slightly squarer + calmer baseline, but pop when active */
.dt-mode-chip{
  border-radius: 10px;
  background: var(--dt-pill-preset-bg);
  border-color: color-mix(in srgb, var(--dt-panelBorder) 80%, var(--dt-accent) 20%);
}

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



/* =====================================================
   MOBILE: Presets as dropdown (no horizontal scroll)
   (DTRP: visual-only; no preset logic changes)
   ===================================================== */
@media (max-width: 700px){
  .dt-mode-presets{
    overflow-x: visible;
    padding-bottom: 0;
    white-space: normal;
  }

  .dt-mobile-preset-dd{
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }

  .dt-mobile-preset-dd__toggle{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 8px;
    min-height: 26px;
    border-radius: calc(var(--dt-radius) + 4px);
    border: 1px solid var(--dt-panelBorder);
    background: var(--dt-pill-preset-bg);
    color: var(--dt-text);
    font-size: 11px;
    line-height: 1;
  }

  .dt-mobile-preset-dd__label{
    display:flex;
    align-items:center;
    gap:6px;
    min-width: 0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dt-mobile-preset-dd__caret{
    opacity: 0.8;
    flex: 0 0 auto;
  }

  .dt-mobile-preset-dd__list{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top: calc(100% + 6px);
    z-index: 60;
    padding:6px;
    border-radius: var(--dt-radius);
    border: 1px solid var(--dt-panelBorder);
    background: var(--dt-panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  }

  .dt-mobile-preset-dd__list.is-open{
    display:block;
  }

  .dt-mobile-preset-dd__item{
    width: 100%;
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 8px;
    border-radius: calc(var(--dt-radius) + 4px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--dt-text);
    font-size: 12px;
    text-align: left;
  }

  .dt-mobile-preset-dd__item.is-active{
  border-color: var(--dt-pill-preset-border-active);
  background: var(--dt-pill-preset-bg-active);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--dt-accent) 35%, transparent 65%) inset,
      0 0 0 1.5px color-mix(in srgb, var(--dt-accent) 14%, transparent 86%);
  }

  .dt-mobile-preset-dd__item:disabled{
    opacity: 0.45;
  }
}