/* Isolated DMR skin: same monitor / 3-column grid / controls / footer hierarchy. */
.dmr365[hidden] {
  display: none !important;
}
.dmr365 {
  --accent: #7acbff;
  --line: #315a71;
  --bg: #001824;
  --monitor-height: 145px;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  color: #e5f3ff;
  font: 13px/1.3 system-ui;
  overflow: auto;
  padding: env(safe-area-inset-top, 0px)
    max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px)
    max(8px, env(safe-area-inset-left, 0px));
}
.dmr365-open {
  overflow: hidden !important;
}
.dmr365 * {
  box-sizing: border-box;
}
.dmr365 button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid var(--line);
  background: #0a293a;
  border-radius: 8px;
}
.dmr365 button:focus-visible,
.dmr365 input:focus-visible {
  outline: 2px solid #fff0b1;
  outline-offset: 2px;
}
.dmr365-shell {
  max-width: 464px;
  min-height: 640px;
  height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  padding: 8px 0;
  display: grid;
  grid-template-rows: var(--monitor-height) 29px 36px minmax(0, 1fr) 68px;
  gap: 7px;
  margin: auto;
}
.dmr365-monitor {
  border: 1px solid #357d9e;
  border-radius: 11px;
  background: linear-gradient(120deg, #082f42, #00151e);
  padding: 8px 10px;
  position: relative;
  display: grid;
  grid-template-rows: 34px 21px 3px minmax(0, 1fr) 19px;
  gap: 4px;
  overflow: hidden;
}
.dmr365-heading {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  min-width: 0;
}
.dmr365-heading small {
  font-size: 7px;
  letter-spacing: 0.09em;
  color: #9bbbd1;
  display: block;
}
.dmr365-brand strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dmr365-brand b {
  color: #7acbff;
  font-weight: 650;
}
.dmr365-brand small {
  font-size: 9px;
  margin-top: 3px;
}
.dmr365-identity {
  text-align: center;
  padding-top: 5px;
  overflow: hidden;
}
.dmr365-identity strong {
  font-size: 12px;
  color: #8fd8ff;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmr365-last {
  text-align: right;
  overflow: hidden;
}
.dmr365-last strong {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmr365-last time {
  font-size: 9px;
  color: #bfd9eb;
}
.dmr365-resets {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.dmr365-resets button {
  font-size: 10px;
  height: 21px;
  padding: 2px 6px;
  min-width: 60px;
  border-radius: 6px;
}
.dmr365-vu {
  height: 3px;
  border-radius: 3px;
  background: #153b4b;
  overflow: hidden;
}
.dmr365-vu i {
  height: 100%;
  display: block;
  width: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, #062331 4px 6px),
    linear-gradient(90deg, #70caff, #75efc1 55%, #ffe274 80%, #ff7883);
}
.dmr365-monitor canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}
.dmr365-telemetry {
  border-top: 1px solid #25586b;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-size: 10px;
  color: #b7d5e8;
}
.dmr365-telemetry [data-ok="true"]::before {
  content: "●";
  color: #7acbff;
  margin-right: 4px;
  animation: dmr365-pulse 2.4s infinite;
}
.dmr365-mode,
.dmr365-svx-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border: 1px solid #538eb3;
  background: #14384d;
  border-radius: 7px;
  color: #8fd6ff;
  padding: 5px 9px;
  font-size: 10px;
}
.dmr365-mode span {
  font-size: 9px;
  color: #b5d0e1;
}
.dmr365-svx-badge {
  grid-column: 1/-1;
  color: #8cf3c7;
  border-color: #3d7967;
  background: #0d2e2c;
  margin: 5px 0;
  font-size: 11px;
}
.dmr365-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.dmr365-tabs button {
  font-size: 12px;
  font-weight: 650;
  background: color-mix(in srgb, var(--tab) 18%, #081c2b);
  color: var(--tab);
  border-color: var(--tab);
  position: relative;
}
.dmr365-tabs [data-svx] {
  --tab: #72e6b6;
}
.dmr365-tabs [data-view="groups"] {
  --tab: #79c8ff;
}
.dmr365-tabs [data-view="log"] {
  --tab: #c797fa;
}
.dmr365-tabs [data-view="activity"] {
  --tab: #ffdb64;
}
.dmr365-tabs [aria-pressed="true"] {
  background: var(--tab);
  color: #0b2636;
  box-shadow: inset 0 -3px #ffffff70;
}
.dmr365-tabs [aria-pressed="true"]:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 30%;
  right: 30%;
  height: 2px;
  background: #10202e;
}
.dmr365-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dmr365-section-title {
  display: flex;
  justify-content: space-between;
  padding: 2px 1px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.dmr365-section-title span {
  font-size: 10px;
  letter-spacing: 0;
  color: #b8d6e5;
}
.dmr365-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.dmr365-card {
  border: 1px solid var(--tg-color, #315a71);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(120deg, #072b3b, #021923);
  display: grid;
  grid-template-rows: minmax(0, 1fr) 26px;
  min-width: 0;
  min-height: 0;
}
.dmr365-card[data-active="true"] {
  border: 2px solid #ff676f;
  box-shadow: 0 0 8px #ff514e55;
  background: linear-gradient(130deg, #502633, #112333);
}
.dmr365-select {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  position: relative;
  min-height: 0;
  min-width: 0;
  padding: 5px 6px 7px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.dmr365-select[aria-pressed="true"] {
  background: linear-gradient(125deg, #7acbff14, transparent) !important;
}
.dmr365-select small {
  font-size: 8px;
  color: #afcbe0;
}
.dmr365-select > strong {
  font-size: clamp(24px, 4dvh, 34px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.04em;
}
.dmr365-select > strong:has(+ span) {
  max-width: 100%;
}
.dmr365-name {
  font-size: 9px;
  color: #8db1c7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.dmr365-call {
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dmr365-select time {
  font-size: 8px;
  color: #a5c4d5;
}
.dmr365-level {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 2px;
  height: 3px;
  background: linear-gradient(
    90deg,
    #79c8ff var(--level, 0%),
    transparent var(--level, 0%)
  );
  border-radius: 2px;
  pointer-events: none;
}
.dmr365-controls {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #31526a;
}
.dmr365-controls button {
  border: 0;
  background: transparent;
  font-size: 14px;
  min-width: 28px;
  height: 25px;
  padding: 0;
  color: #c7dff0;
}
.dmr365-controls button:first-child {
  color: #ffd178;
  font-size: 11px;
}
.dmr365-controls input {
  width: 20px;
  height: 20px;
  padding: 3px;
  border: 1px solid #739fb8;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.dmr365-all {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  min-width: 0;
}
.dmr365-all button {
  font-size: 10px;
  font-weight: 650;
  padding: 4px;
  background: #103d4a;
  border-color: #4087a1;
}
.dmr365-all small {
  display: block;
  font-size: 8px;
  margin-top: 3px;
}
.dmr365-all [data-on="true"] {
  background: #2c7a9d;
  color: #fff;
  border: 2px solid #99dfff;
  box-shadow: 0 0 10px #7acbff33;
}
.dmr365-all [data-mute] {
  background: #492332;
  border-color: #9b4c67;
}
.dmr365-all [data-mute][data-on="true"] {
  background: #a34859;
  border-color: #ffb5ba;
}
.dmr365-footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
  border-top: 1px solid #31566b;
  padding-top: 7px;
}
.dmr365-footer button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 22px;
  border-color: transparent;
  background: transparent;
}
.dmr365-footer span {
  font-size: 12px;
}
.dmr365-footer [data-exit] {
  color: #e9b3a0;
  touch-action: none;
}
.dmr365-footer [data-settings] {
  color: #c797fa;
}
.dmr365-footer [data-play] {
  background: #594218;
  color: #ffe7b1;
  border-color: #ffc163;
}
.dmr365-footer [data-play][data-on="true"] {
  background: linear-gradient(120deg, #085031, #002b24);
  color: #d9ffe6;
  border-color: #51ee8a;
}
.dmr365[data-locked="true"] [data-lock] {
  background: #ffcf45;
  color: #3b2a00;
  border-color: #ffeeb0;
  box-shadow: 0 0 12px #ffcf4577;
}
.dmr365-hint {
  position: fixed;
  z-index: 100005;
  transform: translate(-50%, -100%);
  padding: 12px 16px;
  border: 2px solid #fff1a4;
  border-radius: 10px;
  background: #ffda43;
  color: #332601;
  font-weight: 800;
  box-shadow: 0 0 25px #ffd94355;
  white-space: nowrap;
}
.dmr365-settings {
  position: fixed;
  inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  width: min(480px, 100%);
  max-width: 100%;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  height: 100%;
  margin: auto;
  border: 1px solid #447894;
  border-radius: 14px;
  background: #062330;
  color: #dfedfa;
  padding: 16px;
  overflow: auto;
}
.dmr365-settings::backdrop {
  background: #000b;
}
.dmr365-settings header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #31576b;
  padding-bottom: 12px;
  gap: 12px;
}
.dmr365-settings h2 {
  font-size: 21px;
  margin: 0;
}
.dmr365-settings header button {
  font-size: 25px;
  width: 36px;
  height: 36px;
}
.dmr365-settings p {
  font-size: 12px;
  line-height: 1.6;
  color: #adc7d8;
}
.dmr365-volume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
}
.dmr365-volume input {
  accent-color: #7acbff;
  max-width: 65%;
}
.dmr365-program {
  display: grid;
  gap: 7px;
}
.dmr365-program-row {
  display: grid;
  grid-template-columns: 24px minmax(75px, 0.75fr) minmax(0, 1.25fr);
  gap: 7px;
  align-items: center;
  padding: 5px;
  background: #0f3042;
  border-radius: 8px;
}
.dmr365-program-row span {
  font-size: 10px;
  color: #82b7d3;
}
.dmr365-program input {
  min-width: 0;
  width: 100%;
  background: #051d2b;
  color: #e4f1ff;
  border: 1px solid #38617a;
  padding: 8px 5px;
  border-radius: 5px;
  font: 12px system-ui;
}
.dmr365-settings .dmr365-save {
  background: #7acbff;
  color: #082538;
  width: 100%;
  padding: 12px;
  font-weight: 750;
}
.dmr365-settings details {
  margin-top: 22px;
  border-top: 1px solid #36596b;
  padding-top: 15px;
}
.dmr365-settings footer {
  font-size: 11px;
  color: #88aabd;
  text-align: center;
  margin: 25px 0 10px;
}
.dmr365-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dmr365-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  overflow: auto;
  touch-action: pan-y;
}
.dmr365-column {
  min-width: 0;
  border: 1px solid #315971;
  border-radius: 9px;
  padding: 6px;
  background: #072635;
  overflow: hidden;
}
.dmr365-column h3 {
  font-size: 16px;
  margin: 3px 0 6px;
}
.dmr365-column > small {
  font-size: 9px;
  color: #9abacf;
  display: block;
  min-height: 25px;
}
.dmr365-log-row {
  display: grid;
  gap: 4px;
  padding: 9px 3px;
  border-bottom: 1px solid #31516a;
  font-size: 10px;
  min-width: 0;
}
.dmr365-log-row time,
.dmr365-log-row span {
  font-size: 9px;
  color: #9ab8cc;
}
.dmr365-log-row a,
.dmr365-log-row strong {
  color: #dcf5ff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
.dmr365-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
  font-size: 11px;
  height: 28px;
}
.dmr365-pager button {
  width: 36px;
  font-size: 20px;
}
.dmr365-pager button:disabled {
  opacity: 0.3;
}
.dmr365-activity {
  flex: 1;
  overflow: auto;
  border: 1px solid #6c6543;
  border-radius: 10px;
  padding: 6px;
}
.dmr365-activity .dmr365-log-row {
  grid-template-columns: 58px 52px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 7px;
  padding: 11px 3px;
}
.dmr365-activity b {
  color: #f1d987;
  font-size: 10px;
}
@keyframes dmr365-pulse {
  50% {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dmr365-telemetry [data-ok="true"]::before {
    animation: none;
  }
}
@media (max-height: 730px) {
  .dmr365-shell {
    min-height: 620px;
    gap: 5px;
    grid-template-rows: 120px 26px 32px minmax(0, 1fr) 60px;
  }
  .dmr365-select > strong {
    font-size: 25px;
  }
  .dmr365-name {
    font-size: 8px;
  }
  .dmr365-select {
    gap: 1px;
  }
  .dmr365-card {
    grid-template-rows: minmax(0, 1fr) 24px;
  }
}
@media (min-width: 740px) and (min-height: 600px) {
  .dmr365-shell {
    max-width: 1180px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--monitor-height) 30px 38px minmax(0, 1fr) 70px;
    gap: 10px;
  }
  .dmr365-monitor,
  .dmr365-mode,
  .dmr365-tabs,
  .dmr365-content,
  .dmr365-footer {
    grid-column: 1/-1;
  }
  .dmr365-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 25px minmax(0, 1fr);
    gap: 10px;
  }
  .dmr365-section-title {
    grid-column: 1/-1;
  }
  .dmr365-grid {
    grid-column: 1;
    grid-row: 2;
    display: grid !important;
  }
  .dmr365-log {
    grid-column: 2;
    grid-row: 2;
    display: flex !important;
  }
  .dmr365-activity:not([hidden]) {
    grid-column: 2;
    grid-row: 2;
    z-index: 1;
    background: #062230;
  }
  .dmr365-heading {
    max-width: 700px;
    margin: auto;
    width: 100%;
  }
  .dmr365-resets button {
    min-width: 70px;
  }
  .dmr365-footer {
    max-width: 650px;
    width: 100%;
    margin: auto;
    height: 100%;
  }
  .dmr365-select > strong {
    font-size: 36px;
  }
  .dmr365-call {
    font-size: 12px;
  }
  .dmr365-name {
    font-size: 11px;
  }
  .dmr365-select time {
    font-size: 10px;
  }
}
/* Fixed text tracks prevent flex shrinking from clipping a call or timestamp. */
.dmr365-select {
  display: grid;
  grid-template-rows: 8px 26px 10px 12px 10px;
  gap: 1px;
  padding: 4px 6px 6px;
  align-content: start;
}
.dmr365-select > strong {
  font-size: 26px;
  line-height: 26px;
}
.dmr365-select > small {
  line-height: 8px;
}
.dmr365-name {
  line-height: 10px;
}
.dmr365-call {
  line-height: 12px;
}
.dmr365-select > time {
  line-height: 10px;
}
.dmr365-heading {
  min-height: 0;
  height: 34px;
}
.dmr365-footer [data-play] svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex: none;
}
@media (max-width: 350px) {
  .dmr365-name {
    font-size: 8px;
  }
  .dmr365-call {
    font-size: 9px;
  }
  .dmr365-select > strong {
    font-size: 24px;
  }
}
.dmr365-identity [data-owncall] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dmr365-identity img {
  width: 16px;
  height: 12px;
  object-fit: cover;
  flex: none;
}
.dmr365-identity b {
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dmr365-resets [data-lock] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dmr365-resets svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.dmr365-palette {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 25px;
  cursor: pointer;
}
.dmr365-palette svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #99c5dc;
  stroke-width: 1.6;
}
.dmr365-palette input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
@media (min-width: 740px) and (min-height: 600px) {
  .dmr365-select {
    grid-template-rows: 7px 23px 9px 10px 8px;
    gap: 0;
    padding: 3px 6px 8px;
  }
  .dmr365-select > strong {
    font-size: 23px;
    line-height: 23px;
  }
  .dmr365-select small {
    line-height: 7px;
  }
  .dmr365-name {
    font-size: 9px;
    line-height: 9px;
  }
  .dmr365-call {
    font-size: 10px;
    line-height: 10px;
  }
  .dmr365-select time {
    font-size: 8px;
    line-height: 8px;
  }
}

/* Long presses belong to the app, not text selection or browser panning. */
.dmr365 [data-lock], .dmr365 [data-exit] {
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.dmr365 .dmr366-holding { outline: 2px solid #fff1a4; outline-offset: 2px; }

.dmr368-pages{display:flex;justify-content:center;gap:8px;margin:12px 0}
.dmr368-pages button{min-width:38px;min-height:36px;border-radius:9px;border:1px solid #477389;background:#092c40;color:#bbdded}
.dmr368-pages button[aria-current="page"]{background:#75caff;color:#042536;font-weight:800;box-shadow:0 0 12px #75caff55}
.dmr365-grid{touch-action:pan-y}
.dmr368-page-title{grid-column:1/-1;color:#91d9ff;font-size:16px;margin:20px 0 4px}
.dmr365-program{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.dmr365-program-row{display:flex;flex-direction:column;gap:6px;border:1px solid #355c71;border-radius:10px;padding:10px;min-width:0}
.dmr365-program-row input{width:100%;min-width:0;box-sizing:border-box}
.dmr368-settings{border:1px solid #315469;border-radius:12px;padding:14px;margin:14px 0}
.dmr368-settings summary{font-weight:700;color:#9bdbff;cursor:pointer}
.dmr368-settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}
.dmr368-settings input:not([type=checkbox]),.dmr368-settings select{max-width:65%;min-width:0}
.dmr368-settings button{padding:10px;border:1px solid #52778b;border-radius:8px;color:#d8f0ff;background:#163b4d;margin:5px 5px 5px 0}
.dmr368-settings small{display:block;color:#a7c8dc;line-height:1.5}
.dmr368-toast{position:fixed;left:16px;right:16px;top:env(safe-area-inset-top,12px);z-index:100010;padding:16px;background:#123e3b;border:2px solid #68f0b3;border-radius:12px;color:#eafff7}
@media(max-width:400px){.dmr365-program{grid-template-columns:repeat(2,minmax(0,1fr))}}

.dmr365-card{position:relative}
.dmr368-edit{position:absolute;top:5px;right:5px;border:1px solid #77cfff;border-radius:8px;background:#174657;color:#c4f0ff;width:32px;height:32px;font-size:19px;z-index:2}
.dmr368-manual{background:#0d3342;color:#90ddff;border:1px dashed #75caff;font-size:16px;min-height:100px}
.dmr368-empty{min-height:100px;border:1px dashed #254657;border-radius:12px;opacity:.3}
.dmr368-manual-dialog{max-width:min(360px,calc(100vw - 32px));box-sizing:border-box;border:1px solid #75caff;background:#092736;color:#e3f5ff;border-radius:16px;padding:24px}
.dmr368-manual-dialog label{display:block;margin:15px 0}.dmr368-manual-dialog input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:10px;background:#041d2b;color:#e3f5ff;border:1px solid #567c91;border-radius:7px}.dmr368-manual-dialog button{padding:10px;border:1px solid #75caff;border-radius:8px;background:#15445a;color:#fff;margin-right:8px}

/* The editable SVX slot retains the original card dimensions. */
#dispatchApp .phone-card{position:relative}
#dispatchApp .svx368-edit{position:absolute;right:3px;top:2px;width:30px;height:28px;padding:0;border:1px solid #4e91a2;border-radius:7px;background:#092b38;color:#92f1d9;font-size:19px;z-index:3}
#dispatchApp .svx368-edit:focus-visible{outline:2px solid #90ffe4;outline-offset:2px}