/* Cipher — Decoy Deployer styles (v2). A LIGHT, tabbed console that reads as a
   sibling of the rest of Cipher's Material surface (Google Sans + Material Icons,
   teal accent). No dark mode. Two scoped accents: teal = KEPT / preserved,
   violet = MOVED / shuffled / the decoy. */
.decoy-deployer {
  --dd-keep: var(--teal);
  --dd-move: var(--violet);
  --dd-move-bg: rgba(139,92,246,.10);
  --dd-keep-bg: rgba(79,70,229,.10);
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font-family: var(--body);
  overflow: hidden; animation: dd-in .18s ease;
}
@keyframes dd-in { from { opacity: 0; } to { opacity: 1; } }
.decoy-deployer * { box-sizing: border-box; }
.decoy-deployer .mono { font-family: var(--mono); }
.decoy-deployer .dim { color: var(--ink3); }
.decoy-deployer .hidden { display: none !important; }

/* ---------------------------------------------------------------- top bar (exit + brand + sync) */
.dd-topbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(60,64,67,.04); }
.dd-exit { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 8px; border-radius: 9px; flex: none; white-space: nowrap;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink2); font-family: var(--display); font-weight: 600; font-size: 13px; transition: .13s; }
.dd-exit:hover { background: var(--panel2); color: var(--ink); border-color: var(--ink3); }
.dd-exit .material-icons-outlined { font-size: 19px; }
.dd-topbrand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dd-topbrand .dd-title, .dd-topbrand .dd-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-topspacer { flex: 1; min-width: 8px; }
.dd-topbar .dd-save { flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); white-space: nowrap; }

/* main row: sidebar + content */
.dd-main { flex: 1; min-height: 0; display: flex; flex-direction: row; overflow: hidden; }

/* ---------------------------------------------------------------- left sidebar */
.dd-side { width: 270px; flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 15px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; }
.dd-brand { display: flex; align-items: center; gap: 11px; padding: 0 4px 4px; }
.dd-logo { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 21px; color: #fff; background: var(--teal); }
.dd-topbrand .dd-logo { width: 30px; height: 30px; font-size: 18px; border-radius: 8px; }
.dd-title { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.2px; color: var(--ink); }
.dd-topbrand .dd-title { font-size: 15px; }
.dd-sub { font-size: 11px; color: var(--ink3); }
.dd-file { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 6px 0 4px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel2); color: var(--ink2); font-size: 12px; overflow: hidden; }
.dd-file .material-icons-outlined { font-size: 16px; color: var(--teal); flex: none; }
.dd-file .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nav reuses the global .side-item look for exact cipher consistency */
.dd-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.dd-nav .side-item { font-size: 14px; }

.dd-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line2); }

/* ---------------------------------------------------------------- content column */
.dd-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* honesty strip — top of the content column, always visible */
.dd-honest { flex: none; display: flex; gap: 10px; padding: 11px 22px; background: #fef7e0; border-bottom: 1px solid #feefc3;
  color: #7a5300; font-size: 12.5px; line-height: 1.5; }
.dd-honest .material-icons-outlined { font-size: 18px; color: var(--amber); flex: none; margin-top: 1px; }
.dd-honest strong { color: #5c3d00; }
.dd-honest em { font-style: italic; }

/* ---------------------------------------------------------------- body */
.dd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; }
.dd-body > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.dd-body::-webkit-scrollbar, .dd-side::-webkit-scrollbar, .dd-drows::-webkit-scrollbar { width: 10px; height: 10px; }
.dd-body::-webkit-scrollbar-thumb, .dd-side::-webkit-scrollbar-thumb, .dd-drows::-webkit-scrollbar-thumb { background: #cdd3d9; border-radius: 999px; }

.dd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------------------------------------------------------------- live summary (sidebar) */
.dd-sumbar { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.dd-sum-i { font-size: 12.5px; color: var(--ink2); display: flex; align-items: baseline; gap: 6px; }
.dd-sum-i strong { font-family: var(--display); font-size: 17px; font-weight: 700; min-width: 30px; }
.dd-sum-i.shuffled strong { color: var(--dd-move); }
.dd-sum-i.kept strong { color: var(--dd-keep); }
.dd-sum-i.pct strong { color: var(--ink); }
.dd-sum-muted { color: var(--ink3); font-size: 12px; }

/* ---------------------------------------------------------------- cards */
.dd-card, .dd-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px 17px; box-shadow: var(--shadow); }
.dd-card-h, .dd-panel-h { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 12px; }
.dd-card-h .material-icons-outlined, .dd-panel-h .material-icons-outlined { font-size: 19px; color: var(--teal); }
.dd-panel-note { margin-left: auto; font-family: var(--body); font-weight: 500; font-size: 10.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; }
.dd-note { font-size: 11.5px; line-height: 1.55; color: var(--ink3); margin-top: 8px; }
.dd-flat-note { font-size: 12.5px; color: var(--ink3); padding: 14px; text-align: center; }
.dd-loading { font-size: 12.5px; color: var(--ink3); padding: 8px; }

/* ---------------------------------------------------------------- presets */
.dd-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.dd-preset { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--panel); transition: .13s; }
.dd-preset:hover { border-color: var(--ink3); background: var(--bg); }
.dd-preset.on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); background: var(--dd-keep-bg); }
.dd-preset-ic { font-size: 20px; color: var(--teal); }
.dd-preset-l { font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.dd-preset-d { font-size: 11px; color: var(--ink2); line-height: 1.4; }
.dd-preset-cur { margin-top: 11px; font-size: 12px; color: var(--ink2); }
.dd-preset-cur strong { color: var(--teal-h); font-family: var(--display); }

/* ---------------------------------------------------------------- scope chips */
.dd-scope-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .7px; color: var(--ink3); font-weight: 700; }
.dd-scope-h:first-child { margin-top: 2px; }
.dd-bulk { display: flex; gap: 4px; }
.dd-bulk button { border: none; background: none; color: var(--teal-h); font-family: var(--display); font-weight: 600; font-size: 11px;
  text-transform: none; letter-spacing: 0; padding: 3px 7px; border-radius: 6px; }
.dd-bulk button:hover { background: var(--dd-keep-bg); }

.dd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink2); font-family: var(--display); font-weight: 600; font-size: 12px; transition: .12s; }
.dd-chip .material-icons-outlined { font-size: 16px; }
.dd-chip:hover { border-color: var(--ink3); color: var(--ink); }
.dd-chip.on { color: var(--teal-h); border-color: var(--teal); background: var(--dd-keep-bg); }

.dd-tierlist { display: flex; flex-direction: column; gap: 7px; }
.dd-tierchip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); transition: .12s; }
.dd-tierchip:hover { border-color: var(--ink3); }
.dd-tierchip.on { border-color: var(--teal); background: var(--dd-keep-bg); box-shadow: 0 0 0 1px var(--teal) inset; }
.dd-chip-t { font-family: var(--display); font-weight: 700; font-size: 12.5px; color: var(--ink2); }
.dd-tierchip.on .dd-chip-t { color: var(--teal-h); }
.dd-chip-s { font-size: 11px; color: var(--ink3); }

/* ---------------------------------------------------------------- intensity + strategy */
.dd-slider-row { display: flex; align-items: center; gap: 12px; }
.dd-slider-row input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #7fd9bf); outline: none; }
.dd-slider-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--teal); box-shadow: var(--shadow); cursor: pointer; }
.dd-slider-row input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--teal); cursor: pointer; }
.dd-slider-row .mono { min-width: 44px; text-align: right; color: var(--teal-h); font-weight: 700; font-size: 14px; }
.dd-qchips { display: flex; gap: 6px; margin-top: 10px; }
.dd-qchips button { flex: 1; padding: 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink2);
  font-family: var(--display); font-weight: 600; font-size: 12px; transition: .12s; }
.dd-qchips button:hover { border-color: var(--ink3); color: var(--ink); }
.dd-qchips button.on { color: var(--teal-h); border-color: var(--teal); background: var(--dd-keep-bg); }
.dd-seg { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 12px; }
.dd-seg button { flex: 1; padding: 9px; background: var(--panel); border: none; color: var(--ink2); font-family: var(--display); font-weight: 600; font-size: 12.5px; transition: .12s; }
.dd-seg button + button { border-left: 1px solid var(--line); }
.dd-seg button.on { background: var(--dd-keep-bg); color: var(--teal-h); }

/* ---------------------------------------------------------------- locked / preserved */
.dd-lockrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line2); }
.dd-lockrow:first-of-type { border-top: none; padding-top: 2px; }
.dd-lockrow .material-icons-outlined { font-size: 19px; color: var(--teal); margin-top: 1px; }
.dd-lockrow > div { flex: 1; min-width: 0; }
.dd-lockrow strong { display: block; font-size: 12.5px; color: var(--ink); }
.dd-lockrow span { display: block; font-size: 11px; color: var(--ink3); line-height: 1.45; }
.dd-badge { flex: none; align-self: center; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .6px; padding: 3px 7px;
  border-radius: 5px; background: var(--dd-keep-bg); color: var(--teal-h); border: 1px solid rgba(79,70,229,.3); }
.dd-badge.tierpill { background: rgba(139,92,246,.1); color: var(--violet); border-color: rgba(139,92,246,.3); }
.dd-switch-row { display: flex; align-items: center; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line2); cursor: pointer; }
.dd-switch-row > div { flex: 1; min-width: 0; }
.dd-switch-row strong { display: block; font-size: 12.5px; color: var(--ink); }
.dd-switch-row span { display: block; font-size: 11px; color: var(--ink3); }

/* ---------------------------------------------------------------- seed */
.dd-seed { display: flex; align-items: center; gap: 8px; }
.dd-seed .mono { flex: 1; padding: 9px 11px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line);
  color: var(--teal-h); font-size: 13px; letter-spacing: .5px; font-weight: 700; }
.dd-mini { width: 36px; height: 36px; flex: none; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink2); display: grid; place-items: center; transition: .12s; }
.dd-mini:hover { color: var(--teal-h); border-color: var(--teal); background: var(--dd-keep-bg); }
.dd-mini .material-icons-outlined { font-size: 18px; }
.dd-mini.danger:hover { color: var(--red); border-color: rgba(217,48,37,.5); background: rgba(217,48,37,.05); }
.dd-mini:disabled { opacity: .5; }
.dd-setseed-toggle { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  color: var(--teal-h); font-family: var(--display); font-weight: 600; font-size: 12px; padding: 3px 4px; }
.dd-setseed-toggle .material-icons-outlined { font-size: 15px; }
.dd-setseed { display: flex; gap: 8px; margin-top: 9px; }
.dd-seed-input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-size: 12.5px; }
.dd-seed-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.dd-apply-seed { flex: none; padding: 0 14px; border-radius: 8px; border: 1px solid var(--teal); background: var(--dd-keep-bg);
  color: var(--teal-h); font-family: var(--display); font-weight: 600; font-size: 12.5px; }
.dd-apply-seed:hover { background: rgba(79,70,229,.16); }

/* ---------------------------------------------------------------- stats (preview) */
.dd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.dd-stat { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px 17px; box-shadow: var(--shadow); overflow: hidden; }
.dd-stat-ic { position: absolute; right: 13px; top: 13px; font-size: 20px; color: var(--teal); opacity: .35; }
.dd-stat-big { font-family: var(--display); font-weight: 700; font-size: 29px; letter-spacing: -.5px; color: var(--ink); line-height: 1.1; }
.dd-stat-l { font-size: 12.5px; color: var(--ink2); margin-top: 3px; font-weight: 600; }
.dd-stat-s { font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* ---------------------------------------------------------------- genome/area map */
.dd-arow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.dd-arow-ic { font-size: 16px; color: var(--ink3); flex: none; width: 18px; }
.dd-arow-l { width: 130px; flex: none; font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-arow-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line2); overflow: hidden; display: flex; }
.dd-arow-bar .seg { height: 100%; }
.dd-arow-bar .seg.scr { background: var(--dd-move); }
.dd-arow-bar .seg.kept { background: rgba(79,70,229,.35); }
.dd-arow-n { width: 66px; flex: none; text-align: right; font-size: 12px; color: var(--dd-move); font-weight: 700; }
.dd-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--ink3); }
.dd-legend i.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dd-legend i.sw.scr { background: var(--dd-move); } .dd-legend i.sw.kept { background: rgba(79,70,229,.5); }

/* ---------------------------------------------------------------- before/after */
.dd-ba-head { display: grid; grid-template-columns: 1.5fr 1fr 22px 1fr; gap: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink3); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dd-ba-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--teal-h); font-weight: 700; margin: 12px 0 4px; }
.dd-ba-row { display: grid; grid-template-columns: 1.5fr 1fr 22px 1fr; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.dd-ba-k { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-ba-v { font-size: 12px; color: var(--ink); font-weight: 600; }
.dd-ba-v.same { color: var(--teal-h); } .dd-ba-v.diff { color: var(--dd-move); }
.dd-ba-arrow { font-size: 15px; color: var(--ink3); text-align: center; }
.dd-keep { font-family: var(--mono); font-size: 9px; color: var(--teal-h); background: var(--dd-keep-bg); padding: 1px 5px; border-radius: 4px; }
.dd-drop-tag { font-size: 11px; color: var(--dd-move); font-style: italic; }

/* ---------------------------------------------------------------- diff table */
.dd-diff-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dd-fchips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.dd-fchip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink2);
  font-family: var(--display); font-weight: 600; font-size: 11px; }
.dd-fchip:hover { border-color: var(--ink3); }
.dd-fchip.on { color: var(--teal-h); border-color: var(--teal); background: var(--dd-keep-bg); }
.dd-search { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.dd-search .material-icons-outlined { font-size: 16px; color: var(--ink3); }
.dd-search input { background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 12px; width: 140px; }
.dd-diff-key { font-size: 11px; color: var(--ink3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dd-diff-key .material-icons-outlined { font-size: 13px; }
.dd-drows { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.dd-drow { display: grid; grid-template-columns: 96px 92px 1fr 132px 70px; gap: 10px; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--line2); font-size: 12px; }
.dd-drow:last-child { border-bottom: none; }
.dd-drow:nth-child(even) { background: var(--bg); }
.dd-drow-rs { color: var(--ink2); font-size: 11.5px; }
.dd-drow-gene { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-drow-area { color: var(--ink3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-drow-gt { display: flex; align-items: center; gap: 7px; }
.dd-drow-gt .real { color: var(--ink3); } .dd-drow-gt .decoy { color: var(--dd-move); font-weight: 700; }
.dd-drow-gt .material-icons-outlined { font-size: 14px; color: var(--ink3); }
.dd-plaus { justify-self: end; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; }
.dd-plaus.match { color: var(--teal-h); background: var(--dd-keep-bg); }
.dd-plaus.approx { color: var(--amber); background: rgba(227,116,0,.12); }
.dd-more { display: block; width: 100%; padding: 10px; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--teal-h); font-family: var(--display); font-weight: 600; font-size: 12px; }
.dd-more:hover { background: var(--dd-keep-bg); }

/* ---------------------------------------------------------------- deployed list */
.dd-subline { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink2); margin-bottom: 12px; }
.dd-dep-list { display: flex; flex-direction: column; gap: 9px; }
.dd-dep { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); }
.dd-dep-main { flex: 1; min-width: 0; }
.dd-dep-cid { font-size: 12.5px; color: var(--teal-h); }
.dd-dep-meta { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }

/* ---------------------------------------------------------------- empty / drop */
.dd-empty { max-width: 560px; margin: 6vh auto 0; text-align: center; }
.dd-empty > .material-icons-outlined { font-size: 46px; color: var(--teal); }
.dd-empty-t { font-family: var(--display); font-weight: 700; font-size: 21px; margin-top: 12px; color: var(--ink); }
.dd-empty-s { font-size: 13px; color: var(--ink2); margin-top: 8px; line-height: 1.6; }
.dd-drop { margin-top: 22px; padding: 36px; border: 2px dashed var(--line); border-radius: 16px; background: var(--panel);
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink2); cursor: pointer; transition: .14s; }
.dd-drop:hover, .dd-drop.drag { border-color: var(--teal); background: var(--dd-keep-bg); }
.dd-drop .material-icons-outlined { font-size: 34px; color: var(--teal); }

/* ---------------------------------------------------------------- sidebar actions (save + deploy) */
.dd-save { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.dd-save .material-icons-outlined { font-size: 16px; }
.dd-save.saved { color: var(--teal-h); } .dd-save.saving { color: var(--amber); } .dd-save.error { color: var(--red); }
.dd-deploy { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 16px; border-radius: 10px; border: none;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff; cursor: pointer; transition: .14s; white-space: nowrap;
  background: var(--teal); box-shadow: 0 6px 18px -8px rgba(79,70,229,.7); }
.dd-deploy:hover:not(:disabled) { background: var(--teal-h); }
.dd-deploy:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.dd-deploy .material-icons-outlined { font-size: 19px; }

/* ---------------------------------------------------------------- spinners + progress card retint */
.dd-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
.dd-mini .dd-spin { border-color: rgba(95,99,104,.3); border-top-color: var(--ink2); }
.decoy-deployer #dd-progress:not(:empty) { margin-bottom: 16px; }
.decoy-deployer .pin-card { border-radius: 14px; }
.decoy-deployer .pin-card .progress > span { background: var(--teal); }
.decoy-deployer .pin-card .pin-file > .material-icons-outlined { color: var(--teal) !important; }
.decoy-deployer .pin-card .pin-stage.sr-active .material-icons-outlined { color: var(--teal); }
.decoy-deployer .pin-card .pin-stage.sr-done .material-icons-outlined { color: var(--teal); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .dd-main { flex-direction: column; overflow: visible; }
  .dd-side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    border-right: none; border-bottom: 1px solid var(--line); padding: 10px 14px; overflow: visible; }
  .dd-file { order: 4; flex-basis: 100%; margin: 0; }
  .dd-nav { flex: 1; flex-direction: row; flex-wrap: wrap; margin-top: 0; min-width: 200px; }
  .dd-nav .side-item { width: auto; }
  .dd-side-foot { margin-top: 0; margin-left: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 0; border-top: none; }
  .dd-deploy { padding: 10px 14px; font-size: 13px; }
  .dd-sumbar { display: none; }
  .dd-content { min-height: 0; flex: 1; }
  .dd-grid2 { grid-template-columns: 1fr; }
  .dd-presets { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dd-nav .side-item { padding: 10px; }
  .dd-nav .side-item .si-label { display: none; }
  /* keep the top bar to a single tidy row on phones — tighten padding and drop the
     brand subtitle (the nowrap rules above stop any mid-word wrapping). */
  .dd-topbar { padding: 8px 10px; gap: 8px; }
  .dd-exit { padding: 7px 9px; }
  .dd-topbrand .dd-title { font-size: 14px; }
  .dd-topbrand .dd-sub { display: none; }
}
@media (max-width: 380px) {
  .dd-topbrand .dd-title { display: none; }
}

/* ================================================================ Configure — per-card accents
   The Configure tab used to read as one flat wall of teal. Each card now carries its own
   accent (a scoped --dd-acc trio) so sections are distinguishable at a glance, WITHOUT
   losing the two load-bearing semantics: teal still means KEPT/preserved (the "Kept
   identical" card, the deploy button, the sidebar), and violet still means MOVED/shuffled
   (the shuffle-scope controls, the preview/diff — untouched here). All rules are scoped to
   a card accent class, so no other tab (preview / changes / decoys) is affected. */
.decoy-deployer .dd-acc-preset  { --dd-acc: var(--blue);   --dd-acc-ink: var(--blue-h);     --dd-acc-bg: rgba(26,115,232,.10); }
.decoy-deployer .dd-acc-shuffle { --dd-acc: var(--violet); --dd-acc-ink: var(--violet-ink); --dd-acc-bg: rgba(139,92,246,.10); }
.decoy-deployer .dd-acc-speed   { --dd-acc: var(--amber);  --dd-acc-ink: var(--amber-ink);  --dd-acc-bg: rgba(227,116,0,.10);  }
.decoy-deployer .dd-acc-keep    { --dd-acc: var(--teal);   --dd-acc-ink: var(--teal-h);     --dd-acc-bg: var(--dd-keep-bg);    }
.decoy-deployer .dd-acc-seed    { --dd-acc: var(--blue);   --dd-acc-ink: var(--blue-h);     --dd-acc-bg: rgba(26,115,232,.10); }

/* card header icon adopts the card accent (teal fallback keeps .dd-panel headers as-is) */
.decoy-deployer .dd-card-h .material-icons-outlined { color: var(--dd-acc, var(--teal)); }

/* --- Deniability preset (blue) --------------------------------------------------------- */
.dd-acc-preset .dd-preset.on { border-color: var(--dd-acc); box-shadow: 0 0 0 1px var(--dd-acc); background: var(--dd-acc-bg); }
.dd-acc-preset .dd-preset-cur strong { color: var(--dd-acc-ink); }
/* each preset gets a distinct icon hue so the four options don't blur together */
.dd-acc-preset .dd-preset[data-preset="balanced"] .dd-preset-ic { color: var(--teal); }
.dd-acc-preset .dd-preset[data-preset="maximum"]  .dd-preset-ic { color: var(--red); }
.dd-acc-preset .dd-preset[data-preset="health"]   .dd-preset-ic { color: var(--blue); }
.dd-acc-preset .dd-preset[data-preset="light"]    .dd-preset-ic { color: var(--violet); }

/* --- Shuffle these hidden layers (violet = MOVED — semantically what gets shuffled) ---- */
.dd-acc-shuffle .dd-bulk button { color: var(--dd-acc-ink); }
.dd-acc-shuffle .dd-bulk button:hover { background: var(--dd-acc-bg); }
.dd-acc-shuffle .dd-tierchip.on { border-color: var(--dd-acc); background: var(--dd-acc-bg); box-shadow: 0 0 0 1px var(--dd-acc) inset; }
.dd-acc-shuffle .dd-tierchip.on .dd-chip-t { color: var(--dd-acc-ink); }
.dd-acc-shuffle .dd-chip.on { color: var(--dd-acc-ink); border-color: var(--dd-acc); background: var(--dd-acc-bg); }
/* condition-area icons take a per-category hue so the row scans by colour, not just text */
.dd-acc-shuffle .dd-chip[data-area="cancer"]     .material-icons-outlined { color: var(--violet); }
.dd-acc-shuffle .dd-chip[data-area="cardio"]     .material-icons-outlined { color: var(--red); }
.dd-acc-shuffle .dd-chip[data-area="neuro"]      .material-icons-outlined { color: var(--blue); }
.dd-acc-shuffle .dd-chip[data-area="immune"]     .material-icons-outlined { color: var(--amber); }
.dd-acc-shuffle .dd-chip[data-area="metabolic"]  .material-icons-outlined { color: var(--violet); }
.dd-acc-shuffle .dd-chip[data-area="carrier"]    .material-icons-outlined { color: var(--red); }
.dd-acc-shuffle .dd-chip[data-area="dev"]        .material-icons-outlined { color: var(--blue); }
.dd-acc-shuffle .dd-chip[data-area="eye_ear"]    .material-icons-outlined { color: var(--amber); }
.dd-acc-shuffle .dd-chip[data-area="appearance"] .material-icons-outlined { color: var(--violet); }
/* "Other / pharma" has no dedicated hue — it simply follows the chip's own colour */

/* --- Intensity & strategy (amber = energy / the dial) --------------------------------- */
.dd-acc-speed .dd-slider-row input[type=range] { background: linear-gradient(90deg, var(--dd-acc), #f7c268); }
.dd-acc-speed .dd-slider-row input[type=range]::-webkit-slider-thumb { border-color: var(--dd-acc); }
.dd-acc-speed .dd-slider-row input[type=range]::-moz-range-thumb { border-color: var(--dd-acc); }
.dd-acc-speed .dd-slider-row .mono { color: var(--dd-acc-ink); }
.dd-acc-speed .dd-qchips button.on { color: var(--dd-acc-ink); border-color: var(--dd-acc); background: var(--dd-acc-bg); }
.dd-acc-speed .dd-seg button.on { color: var(--dd-acc-ink); background: var(--dd-acc-bg); }

/* --- Kept identical (teal = KEPT — stays the semantic anchor) -------------------------- */
/* the LOCKED badges carry the "kept" teal; only the row icons take a hue for variety.
   NB: the generic `.dd-lockrow span` rule (for the sub-label) out-specifies the base
   `.dd-badge` colour, so the badges had silently rendered grey — restore their teal. */
.dd-acc-keep .dd-lockrow .dd-badge { color: var(--teal-h); }
.dd-acc-keep .dd-lockrow .material-icons-outlined.dd-lk-anc { color: var(--blue); }
.dd-acc-keep .dd-lockrow .material-icons-outlined.dd-lk-sex { color: var(--violet); }
.dd-acc-keep .dd-lockrow .material-icons-outlined.dd-lk-pgx { color: var(--amber); }

/* --- Decoy seed (blue = reproducibility / fingerprint) -------------------------------- */
.dd-acc-seed .dd-seed .mono { color: var(--dd-acc-ink); }
.dd-acc-seed .dd-seed .dd-mini:hover { color: var(--dd-acc-ink); border-color: var(--dd-acc); background: var(--dd-acc-bg); }
.dd-acc-seed .dd-setseed-toggle { color: var(--dd-acc-ink); }
.dd-acc-seed .dd-seed-input:focus { border-color: var(--dd-acc); box-shadow: 0 0 0 1px var(--dd-acc); }
.dd-acc-seed .dd-apply-seed { border-color: var(--dd-acc); background: var(--dd-acc-bg); color: var(--dd-acc-ink); }
.dd-acc-seed .dd-apply-seed:hover { background: rgba(26,115,232,.16); }