/* sips theme "Dark Compact Tech" (skin "dct", chosen per browser in the theme picker, i18n.js).
   A separate layer on top of style.css / admin.css: it only applies under :root[data-skin="dct"],
   so the standard and tech looks stay as they are. Load it after the other stylesheets.

   Night console: deep navy ground (#06111F), white type, small rectangular glass panels with
   2-4 px corners and hairline borders; colour is reserved for meaning - blue actions, green ok,
   orange ringing/attention, red busy/errors, violet devices/flows. Dense for tablets: 15-16 px
   text, tables 14 px with 36-40 px rows, 3-6 px gaps; touch targets grow on coarse pointers. */

:root[data-skin="dct"] {
  --dct-bg: #06111f;
  --dct-blue: #3d9bff;
  --dct-green: #2fd37a;
  --dct-orange: #ff9a2e;
  --dct-red: #ff4f5e;
  --dct-violet: #a77bff;
  --dct-glass: rgba(16, 34, 58, .62);
  --dct-glass-strong: rgba(18, 38, 64, .86);
  --dct-hair: rgba(140, 180, 230, .16);
  --dct-hair-strong: rgba(140, 180, 230, .32);
  --dct-gap: 6px;

  --bg: var(--dct-bg);
  --surface: #0c1b2f;
  --sunken: #091626;
  --line: var(--dct-hair);
  --line-strong: var(--dct-hair-strong);
  --ink: #f3f7fc;
  --muted: #a3b4ca;
  --accent: var(--dct-blue);
  --accent-ink: #03101f;
  --accent-soft: rgba(61, 155, 255, .16);
  --ok: var(--dct-green);
  --ok-soft: rgba(47, 211, 122, .14);
  --warn: var(--dct-orange);
  --warn-soft: rgba(255, 154, 46, .14);
  --bad: var(--dct-red);
  --bad-soft: rgba(255, 79, 94, .14);
  --lamp-off: #33445c;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 18px rgba(0, 0, 0, .35);
  --r: 4px;
  --r-sm: 2px;
  color-scheme: dark;
}

/* ------------------------------------------------------------ ground and type */
:root[data-skin="dct"] body {
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(61, 155, 255, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(167, 123, 255, .08), transparent 60%),
    var(--dct-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 15px; line-height: 1.45;
}
:root[data-skin="dct"] h1 { font-size: 21px; font-weight: 700; letter-spacing: .01em; }
:root[data-skin="dct"] h2 { font-size: 16px; font-weight: 700; letter-spacing: .015em; }
:root[data-skin="dct"] h3 { font-size: 15px; }
:root[data-skin="dct"] .label, :where(:root[data-skin="dct"]) th { color: #8fa5c0; letter-spacing: .08em; }
:root[data-skin="dct"] .hint { font-size: 13.5px; }
:where(:root[data-skin="dct"]) a { color: #6db4ff; }
:root[data-skin="dct"] .brand, :root[data-skin="dct"] .nav a { color: var(--ink); }
:root[data-skin="dct"] code { background: rgba(255, 255, 255, .05); border-color: var(--line); border-radius: 2px; }
:root[data-skin="dct"] pre, :root[data-skin="dct"] .logview { background: rgba(3, 10, 20, .7); border-color: var(--line); border-radius: 2px; }
:root[data-skin="dct"] ::selection { background: rgba(61, 155, 255, .35); }
:root[data-skin="dct"] :focus-visible { outline: 2px solid var(--dct-blue); outline-offset: 1px; }

/* ------------------------------------------------------------ glass panels */
:root[data-skin="dct"] .panel,
:root[data-skin="dct"] .meters,
:root[data-skin="dct"] .fl-tools, :root[data-skin="dct"] .fl-left, :root[data-skin="dct"] .fl-right,
:root[data-skin="dct"] .phonecard {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), var(--dct-glass);
  border: 1px solid var(--dct-hair);
  border-radius: var(--r);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
:root[data-skin="dct"] .panel { padding: 10px 12px; }
:root[data-skin="dct"] .panel-head { margin-bottom: 6px; gap: var(--dct-gap); }
:root[data-skin="dct"] .tab.active { gap: var(--dct-gap); }
:root[data-skin="dct"] .sec-head { gap: var(--dct-gap); }
:root[data-skin="dct"] .lead { font-size: 14px; }

/* ------------------------------------------------------------ console layout (admin, MSP) */
:root[data-skin="dct"] .console { grid-template-columns: 208px minmax(0, 1fr); }
:root[data-skin="dct"] .sidebar {
  gap: var(--dct-gap); padding-block: 12px 10px; padding-right: 10px;
  background: rgba(5, 14, 27, .82); border-right: 1px solid var(--dct-hair);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-skin="dct"] .brand-mark { border-radius: 3px; background: var(--brand-accent, var(--dct-blue)); color: #03101f; }
:root[data-skin="dct"] .nav { gap: 1px; }
:root[data-skin="dct"] .nav button {
  min-height: 36px; padding: 6px 9px; gap: 9px; font-size: 14.5px; border-radius: 2px;
  color: #b9c7d9; background: transparent; border: 0; border-left: 2px solid transparent;
}
:root[data-skin="dct"] .nav button:hover { background: rgba(61, 155, 255, .08); color: var(--ink); }
:root[data-skin="dct"] .nav button.active { background: rgba(61, 155, 255, .14); color: #fff; border-left-color: var(--dct-blue); }
:root[data-skin="dct"] .nav button.active svg { color: var(--dct-blue); }
:root[data-skin="dct"] .nav svg { width: 18px; height: 18px; stroke-width: 1.5; }
:root[data-skin="dct"] .side-foot { gap: 4px; padding-top: 8px; font-size: 13.5px; }
:root[data-skin="dct"] .workspace { padding-block: 6px 48px; padding-left: clamp(12px, 1.5vw, 18px); }
:root[data-skin="dct"] .tab { max-width: 1320px; }
:root[data-skin="dct"] .navsearch input { min-height: 34px; }

/* ------------------------------------------------------------ buttons: small, coloured, outline icons */
:where(:root[data-skin="dct"]) button, :where(:root[data-skin="dct"]) .btn {
  min-height: 32px; padding: 5px 11px; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.1;
  border-radius: 2px; border: 1px solid var(--dct-blue); background: var(--dct-blue); color: #03101f;
}
:where(:root[data-skin="dct"]) button:hover:not(:disabled), :where(:root[data-skin="dct"]) .btn:hover { filter: brightness(1.12); }
:root[data-skin="dct"] button.secondary, :root[data-skin="dct"] .btn.secondary {
  background: rgba(61, 155, 255, .08); color: #d8e8ff; border-color: rgba(61, 155, 255, .45);
}
:root[data-skin="dct"] button.secondary:hover:not(:disabled), :root[data-skin="dct"] .btn.secondary:hover { background: rgba(61, 155, 255, .18); filter: none; }
:root[data-skin="dct"] button.secondary.bad, :root[data-skin="dct"] button.danger {
  background: rgba(255, 79, 94, .08); color: #ff8a95; border-color: rgba(255, 79, 94, .5);
}
:root[data-skin="dct"] button.secondary.bad:hover:not(:disabled), :root[data-skin="dct"] button.danger:hover:not(:disabled) { background: rgba(255, 79, 94, .18); }
:root[data-skin="dct"] button.green { background: var(--dct-green); border-color: var(--dct-green); color: #03140b; }
:root[data-skin="dct"] button.red { background: var(--dct-red); border-color: var(--dct-red); color: #fff; }
:root[data-skin="dct"] button.quiet { background: transparent; border-color: transparent; color: var(--muted); min-height: 30px; padding: 4px 8px; }
:root[data-skin="dct"] button.quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--ink); }
:root[data-skin="dct"] button.quiet.bad { color: #ff8a95; }
:root[data-skin="dct"] button.small, :root[data-skin="dct"] .btn.small { min-height: 28px; padding: 3px 9px; font-size: 13px; }
:root[data-skin="dct"] button .ico, :root[data-skin="dct"] .btn .ico { width: 15px; height: 15px; }
:root[data-skin="dct"] .iconbtn { min-width: 32px; justify-content: center; }
:root[data-skin="dct"] .ico {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
:root[data-skin="dct"] .dlg-foot, :root[data-skin="dct"] .form-foot { gap: var(--dct-gap); }
:root[data-skin="dct"] .actions { gap: 4px; }
:root[data-skin="dct"] td.actions-cell .actions, :root[data-skin="dct"] td.actions-cell { gap: 4px; }

/* ------------------------------------------------------------ fields and dropdowns: compact */
:where(:root[data-skin="dct"]) input, :where(:root[data-skin="dct"]) select, :where(:root[data-skin="dct"]) textarea {
  min-height: 34px; padding: 5px 9px; font-size: 15px; border-radius: 2px;
  background-color: rgba(3, 11, 22, .72); color: var(--ink); border: 1px solid var(--dct-hair-strong);
}
:where(:root[data-skin="dct"]) input[type="checkbox"], :where(:root[data-skin="dct"]) input[type="radio"] { min-height: 0; padding: 0; }
:root[data-skin="dct"] input[type="color"] { padding: 2px; height: 34px; width: 42px; }
:where(:root[data-skin="dct"]) select {
  -webkit-appearance: none; appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237fb8ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
}
:root[data-skin="dct"] select[multiple] { background-image: none; padding-right: 9px; }
:root[data-skin="dct"] input:focus, :root[data-skin="dct"] select:focus, :root[data-skin="dct"] textarea:focus {
  border-color: var(--dct-blue); box-shadow: 0 0 0 2px rgba(61, 155, 255, .25);
}
:where(:root[data-skin="dct"]) label { font-size: 13.5px; margin-bottom: 3px; }
:root[data-skin="dct"] .field { gap: 3px; }
:root[data-skin="dct"] .grid-form { gap: var(--dct-gap); }
:root[data-skin="dct"] .langsel { min-height: 30px; font-size: 13px; padding-top: 3px; padding-bottom: 3px; }

/* switches: small, green when on (the DND switch stays orange) */
:root[data-skin="dct"] .switch { gap: 8px; }
:root[data-skin="dct"] .switch input { width: 32px; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 9px; background: #2a3a50; }
:root[data-skin="dct"] .switch input::after { top: 2px; left: 2px; width: 14px; height: 14px; box-shadow: none; }
:root[data-skin="dct"] .switch input:checked { background: var(--dct-green); }
:root[data-skin="dct"] .switch input:checked::after { transform: translateX(14px); }
:root[data-skin="dct"] .switch.dnd input:checked { background: var(--dct-orange); }

/* ------------------------------------------------------------ badges and lamps */
:root[data-skin="dct"] .pill, :root[data-skin="dct"] .fl-badge, :root[data-skin="dct"] .linechip, :root[data-skin="dct"] .qagent {
  border-radius: 2px; padding: 2px 7px; min-height: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  background: rgba(163, 180, 202, .10); color: #c8d4e3; border: 1px solid rgba(163, 180, 202, .28);
}
:root[data-skin="dct"] .pill.ok { background: rgba(47, 211, 122, .13); color: #5ee69a; border-color: rgba(47, 211, 122, .45); }
:root[data-skin="dct"] .pill.warn { background: rgba(255, 154, 46, .13); color: #ffb35e; border-color: rgba(255, 154, 46, .45); }
:root[data-skin="dct"] .pill.bad { background: rgba(255, 79, 94, .13); color: #ff8592; border-color: rgba(255, 79, 94, .5); }
:root[data-skin="dct"] .pill.accent, :root[data-skin="dct"] .fl-badge { background: rgba(61, 155, 255, .14); color: #8cc3ff; border-color: rgba(61, 155, 255, .45); }
:root[data-skin="dct"] .setchip { border-radius: 2px; font-size: 12.5px; }
:root[data-skin="dct"] .lamp.on { box-shadow: 0 0 6px rgba(47, 211, 122, .7); }
:root[data-skin="dct"] .lamp.busy { box-shadow: 0 0 6px rgba(255, 79, 94, .7); }
:root[data-skin="dct"] .lamp.ring { box-shadow: 0 0 6px rgba(255, 154, 46, .7); }
:root[data-skin="dct"] .info { border-radius: 50%; }

/* ------------------------------------------------------------ tables: 14 px, 36-40 px rows */
:where(:root[data-skin="dct"]) table { font-size: 14px; }
:where(:root[data-skin="dct"]) th { font-size: 11.5px; padding: 0 8px 4px; border-bottom-color: var(--dct-hair-strong); }
:where(:root[data-skin="dct"]) td { padding: 3px 6px; height: 42px; line-height: 1.25; vertical-align: middle; border-bottom-color: var(--dct-hair); }
:root[data-skin="dct"] thead + tbody tr:first-child td { padding-top: 5px; }
:root[data-skin="dct"] td:first-child, :root[data-skin="dct"] th:first-child { padding-left: 4px; }
:root[data-skin="dct"] table tr:hover td { background: rgba(61, 155, 255, .06); }
:root[data-skin="dct"] .psgrid td { padding-top: 3px; padding-bottom: 3px; }

/* settings grid, lists and cards: tighter */
:root[data-skin="dct"] .setrow { padding-block: 3px; gap: var(--dct-gap); min-height: 42px; align-items: center; border-color: var(--dct-hair); }
:root[data-skin="dct"] .lines { gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(156px, 100%), 1fr)); }
:root[data-skin="dct"] .linekey { min-height: 42px; padding: 5px 8px; gap: 7px; border-radius: 2px; background: rgba(3, 11, 22, .55); border-color: var(--dct-hair); color: var(--ink); }
:root[data-skin="dct"] .linekey:hover { border-color: rgba(61, 155, 255, .5); filter: none; }
:root[data-skin="dct"] .linekey.talking { border-color: rgba(255, 79, 94, .6); box-shadow: inset 2px 0 0 var(--dct-red); }
:root[data-skin="dct"] .linekey.ringing { border-color: rgba(255, 154, 46, .6); box-shadow: inset 2px 0 0 var(--dct-orange); }
:root[data-skin="dct"] .phonelist { gap: 4px; }
:root[data-skin="dct"] .phonecard { padding: 6px; gap: var(--dct-gap); }
:root[data-skin="dct"] .callrow, :root[data-skin="dct"] .steps li { border-radius: 2px; padding: 6px; background: rgba(3, 11, 22, .55); }
:root[data-skin="dct"] .queue { border-radius: var(--r); border-color: var(--dct-hair); }
:root[data-skin="dct"] .moremenu { background: var(--dct-glass-strong); border: 1px solid var(--dct-hair-strong); border-radius: var(--r);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 3px; }
:root[data-skin="dct"] .moremenu button { min-height: 34px; padding: 6px 10px; font-weight: 500; color: var(--ink); background: none; border: 0; }
:root[data-skin="dct"] .moremenu button:hover:not(:disabled) { background: rgba(61, 155, 255, .14); }
:root[data-skin="dct"] .moremenu button.bad:not(:disabled) { color: #ff8592; }

/* ------------------------------------------------------------ dialogs and messages */
:root[data-skin="dct"] dialog { background: var(--dct-glass-strong); border: 1px solid var(--dct-hair-strong); border-radius: var(--r); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
:root[data-skin="dct"] dialog::backdrop { background: rgba(2, 7, 15, .66); }
:root[data-skin="dct"] dialog form, :root[data-skin="dct"] dialog .dlg { padding: 12px; }
:root[data-skin="dct"] dialog h2 { margin-bottom: 10px; }
:root[data-skin="dct"] .dlg-foot { padding-top: 10px; }
:root[data-skin="dct"] .toast { background: var(--dct-glass-strong); color: var(--ink); border: 1px solid var(--dct-hair-strong); border-radius: var(--r); }
:root[data-skin="dct"] .toast.bad { background: #5a1820; border-color: var(--dct-red); color: #fff; }
:root[data-skin="dct"] .aberr { border-radius: 2px; }

/* ------------------------------------------------------------ micro panels: icon, number, a graph of text height */
.micro { display: none; }
:root[data-skin="dct"] .micro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--dct-gap);
}
:root[data-skin="dct"] .mp {
  --c: var(--dct-blue);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--dct-gap); row-gap: 1px; align-items: center;
  min-height: 52px; padding: 6px; border-radius: var(--r); border: 1px solid var(--dct-hair);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)), var(--dct-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 70%, transparent);
}
:root[data-skin="dct"] .mp svg.mp-ico { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--c);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin="dct"] .mp-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
:root[data-skin="dct"] .mp b { font: 600 20px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: #fff; }
:root[data-skin="dct"] .mp small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the graph is never taller than the text beside it */
:root[data-skin="dct"] .mp .spark { display: block; width: 100%; height: 1em; max-height: 1em; font-size: 15px; color: var(--c); overflow: visible; }
:root[data-skin="dct"] .mp .spark path { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
:root[data-skin="dct"] .mp .spark path.area { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: none; }
:root[data-skin="dct"] .mp.c-green { --c: var(--dct-green); }
:root[data-skin="dct"] .mp.c-orange { --c: var(--dct-orange); }
:root[data-skin="dct"] .mp.c-red { --c: var(--dct-red); }
:root[data-skin="dct"] .mp.c-violet { --c: var(--dct-violet); }
:root[data-skin="dct"] .mp.c-blue { --c: var(--dct-blue); }
/* MSP meters become micro panels too */
:root[data-skin="dct"] .meters { gap: var(--dct-gap); background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
:root[data-skin="dct"] .meter { margin: 0; padding: 7px 10px; gap: 1px; border: 1px solid var(--dct-hair); border-radius: var(--r);
  background: var(--dct-glass); box-shadow: inset 0 2px 0 rgba(61, 155, 255, .7); }
:root[data-skin="dct"] .meter b { font-size: 20px; color: #fff; }
:root[data-skin="dct"] .meter.live { box-shadow: inset 0 2px 0 var(--dct-green); }
:root[data-skin="dct"] .meter.live b { color: #5ee69a; }

/* ------------------------------------------------------------ call flow editor (React) */
:root[data-skin="dct"] .fl-editor { gap: var(--dct-gap); }
:root[data-skin="dct"] .fl-main { gap: var(--dct-gap); }
:root[data-skin="dct"] .fl-tools { padding: 5px; gap: 4px; }
:root[data-skin="dct"] .fl-tools .fl-pal { border-radius: 2px; min-height: 30px; font-size: 13.5px; }
:root[data-skin="dct"] .fl-canvas { border-color: var(--dct-hair); border-radius: var(--r); background: rgba(3, 9, 18, .78); }
:root[data-skin="dct"] .react-flow {
  --xy-background-pattern-dots-color: rgba(140, 180, 230, .22);
  --xy-edge-stroke: #6f8bb0; --xy-edge-stroke-selected: var(--dct-blue);
  --xy-connectionline-stroke: var(--dct-blue);
  --xy-controls-button-background-color: #0f2136; --xy-controls-button-background-color-hover: #16304d;
  --xy-controls-button-color: var(--ink); --xy-controls-button-border-color: var(--dct-hair);
  --xy-selection-background-color: rgba(61, 155, 255, .1); --xy-selection-border: 1px dotted rgba(61, 155, 255, .8);
}
:root[data-skin="dct"] .fl-block { background: rgba(12, 27, 47, .94); border-color: var(--dct-hair-strong); border-radius: var(--r); font-size: 13.5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 2px 0 var(--c); }
:root[data-skin="dct"] .fl-block.sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 0 6px 18px rgba(0, 0, 0, .45); }
:root[data-skin="dct"] .fl-head { padding: 6px 8px; font-size: 14px; }
:root[data-skin="dct"] .fl-sum { padding: 5px 8px; font-size: 13px; }
:root[data-skin="dct"] .fl-out { padding: 4px 16px 4px 8px; font-size: 13px; }
:root[data-skin="dct"] .fl-icon { border-radius: 2px; width: 22px; height: 22px; }
:root[data-skin="dct"] .fl-handle, :root[data-skin="dct"] .fl-in { border-color: #0c1b2f !important; }
:root[data-skin="dct"] .fl-phone { border-radius: 2px; background: rgba(3, 11, 22, .6); }
:root[data-skin="dct"] .fl-rule { border-radius: 2px; padding: 8px; }
:root[data-skin="dct"] .fl-warn { border-radius: 2px; }
:root[data-skin="dct"] .fl-left, :root[data-skin="dct"] .fl-right { padding: 6px; gap: var(--dct-gap); }
:root[data-skin="dct"] .react-flow__controls button { background: #0f2136; border-color: var(--dct-hair); color: var(--ink); fill: var(--ink); }

/* ------------------------------------------------------------ simple pages (start, phone, login) */
:root[data-skin="dct"] .page { gap: 10px; padding-block: 16px 40px; }
:root[data-skin="dct"] .pagenav a { border-radius: 2px; padding: 5px 9px; }
:root[data-skin="dct"] .pagenav a[aria-current="page"] { background: rgba(61, 155, 255, .14); box-shadow: inset 0 -2px 0 var(--dct-blue); }
:root[data-skin="dct"] .installbar { background: var(--dct-glass-strong); border-color: var(--dct-hair-strong); border-radius: var(--r); }

/* ------------------------------------------------------------ touch: big enough to hit on tablets and phones */
@media (pointer: coarse) {
  :where(:root[data-skin="dct"]) button, :where(:root[data-skin="dct"]) .btn, :root[data-skin="dct"] .nav button { min-height: 40px; }
  :root[data-skin="dct"] button.small, :root[data-skin="dct"] .btn.small, :root[data-skin="dct"] button.quiet { min-height: 36px; }
  :where(:root[data-skin="dct"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :where(:root[data-skin="dct"]) select { min-height: 40px; font-size: 16px; }   /* 16 px: iOS does not zoom */
  :root[data-skin="dct"] .switch input { width: 40px; height: 22px; border-radius: 11px; }
  :root[data-skin="dct"] .switch input::after { width: 18px; height: 18px; }
  :root[data-skin="dct"] .switch input:checked::after { transform: translateX(18px); }
  :where(:root[data-skin="dct"]) td { height: 45px; }
  :root[data-skin="dct"] .moremenu button { min-height: 42px; }
}
@media (max-width: 860px) {
  :root[data-skin="dct"] .console { grid-template-columns: minmax(0, 1fr); }
  :root[data-skin="dct"] .sidebar { gap: 6px; padding-block: 8px; border-right: 0; border-bottom: 1px solid var(--dct-hair); }
  :root[data-skin="dct"] .nav { gap: 3px; }
  :root[data-skin="dct"] .nav button { border-left: 0; border-bottom: 2px solid transparent; padding: 5px 8px; }
  :root[data-skin="dct"] .nav button.active { border-bottom-color: var(--dct-blue); }
}
@media (max-width: 520px) {
  :root[data-skin="dct"] .micro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-skin="dct"] .panel { padding: 10px; }
  :root[data-skin="dct"] .nav button span { font-size: 14px; }
}
:root[data-skin="dct"] .meter .spark { display: block; width: 100%; height: 1em; max-height: 1em; font-size: 15px; color: var(--dct-blue); margin-top: 2px; }
:root[data-skin="dct"] .meter.live .spark { color: var(--dct-green); }
:root[data-skin="dct"] .meter .spark path { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
:root[data-skin="dct"] .meter .spark path.area { fill: color-mix(in srgb, currentColor 18%, transparent); stroke: none; }
/* a word instead of a number (trunk state) */
:root[data-skin="dct"] .mp b.txt { font: 600 15px/1.2 var(--font-body); }
:root[data-skin="dct"] input[type="range"] { min-height: 0; padding: 0; border: 0; background: none; }
:root[data-skin="dct"] .linekey { font-size: 14px; overflow: hidden; }
:root[data-skin="dct"] .linekey .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 520px) {
  :root[data-skin="dct"] .side-foot { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
  :root[data-skin="dct"] .side-foot [data-lang-picker] { display: flex; gap: 4px; flex-wrap: wrap; }
}
/* cards inside a glass panel need no blur of their own; the one with an open menu lies on top */
:root[data-skin="dct"] .phonecard { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 11, 22, .45); position: relative; }
:root[data-skin="dct"] .phonecard:has(.moremenu) { z-index: 30; }
:root[data-skin="dct"] .panel:has(.moremenu) { position: relative; z-index: 30; }
/* the opened list of a dropdown: Windows browsers paint it from the option colours, not from the
   (semi-transparent) select - give it the dark surface explicitly */
:where(:root[data-skin="dct"]) select { background-color: #08172a; color-scheme: dark; }
:root[data-skin="dct"] option, :root[data-skin="dct"] optgroup { background-color: #0c1b2f; color: #f3f7fc; }
:root[data-skin="dct"] option:checked { background-color: #1d4f8c; color: #fff; }
:root[data-skin="dct"] option:disabled { color: #6f819a; }

/* ------------------------------------------------------------ one icon style: outline, stroked */
:root[data-skin="dct"] .fl-glyph, :root[data-skin="dct"] .hglyph { display: none; }
:root[data-skin="dct"] .fl-svg, :root[data-skin="dct"] .hsvg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin="dct"] .fl-icon { background: transparent !important; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); }
:root[data-skin="dct"] .fl-tools .fl-pal { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
:root[data-skin="dct"] .fl-tools .fl-pal .fl-icon { border: 0; width: 16px; height: 16px; color: color-mix(in srgb, var(--c) 60%, #fff); }
:root[data-skin="dct"] td.hicon { color: var(--muted); }
:root[data-skin="dct"] td.hicon.k-inbound { color: var(--dct-green); }
:root[data-skin="dct"] td.hicon.k-outbound { color: var(--dct-blue); }
:root[data-skin="dct"] td.hicon.k-missed, :root[data-skin="dct"] td.hicon.k-change { color: var(--dct-orange); }
:root[data-skin="dct"] td.hicon.k-vm, :root[data-skin="dct"] td.hicon.k-sip { color: var(--dct-red); }
:root[data-skin="dct"] td.hicon.k-internal, :root[data-skin="dct"] td.hicon.k-trunk { color: var(--dct-violet); }
/* tables stay within 40-45 px a row: fields, badges and a second text line sit tight */
:root[data-skin="dct"] td :is(select, input:not([type="checkbox"]):not([type="radio"])) { min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
:root[data-skin="dct"] td .pill { min-height: 20px; padding-block: 0; }
:root[data-skin="dct"] td .hint, :root[data-skin="dct"] td .sub, :root[data-skin="dct"] td small { font-size: 13px; line-height: 1.2; }
:root[data-skin="dct"] td button.small, :root[data-skin="dct"] td .btn.small { min-height: 28px; }

/* ------------------------------------------------------------ no bold type: regular text, headings in the lightest display cut */
:root[data-skin="dct"] *, :root[data-skin="dct"] *::before, :root[data-skin="dct"] *::after { font-weight: 400 !important; }
:root[data-skin="dct"] :is(h1, h2, h3, .brand-name) { font-weight: 500 !important; }
/* a dangerous main action (restore, import, delete): red with white text */
:root[data-skin="dct"] button.bad:not(.quiet):not(.secondary) { background: var(--dct-red); border-color: var(--dct-red); color: #fff; }
/* one type scale: titles (also text inside them) in the display cut; names and values 15 px, buttons 13.5 px */
:root[data-skin="dct"] :is(h1, h2, h3) *:not(.info) { font-weight: 500 !important; }
:root[data-skin="dct"] :is(.setname, .lead, .setval, .setval label, .check, .switch) { font-size: 15px; }
:root[data-skin="dct"] :is(button, .btn).small, :root[data-skin="dct"] td :is(button, .btn) { font-size: 13.5px; }