:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #192b29;
  background: #f3f5f2;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid #d4ddd6;
  background: white;
  border-radius: 8px;
  padding: 10px 16px;
  color: inherit;
}
button:hover {
  background: #e8eee8;
}
.primary {
  background: #225c48;
  color: white;
  border-color: #225c48;
}
.primary:hover {
  background: #174432;
}
.danger {
  color: #a23e36;
}
input,
select {
  padding: 11px;
  border: 1px solid #d3dcd5;
  border-radius: 7px;
  background: white;
  width: 100%;
}
label {
  display: grid;
  gap: 7px;
  color: #566960;
  margin-bottom: 16px;
  font-size: 12px;
}
h1 {
  font-size: 30px;
  letter-spacing: -1px;
  margin: 8px 0 12px;
}
h2 {
  font-size: 18px;
}
p {
  line-height: 1.6;
  color: #758079;
}
.muted {
  color: #7b8981;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #73877a;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 700;
}
.mark {
  display: grid;
  place-items: center;
  background: #225c48;
  color: #fff;
  border-radius: 10px;
  width: 36px;
  height: 36px;
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.intro {
  background: #1b3e33;
  color: #fff;
  padding: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.intro h1 {
  font-size: 54px;
  max-width: 500px;
  line-height: 1.1;
}
.intro p {
  color: #a8c0b2;
  max-width: 400px;
}
.intro .eyebrow {
  color: #afc8b9;
}
.login-side {
  display: grid;
  place-items: center;
  padding: 35px;
}
.login-form {
  width: 350px;
}
.login-form button {
  width: 100%;
  margin-top: 10px;
}
.shell {
  display: grid;
  grid-template-columns: 235px 1fr;
  min-height: 100vh;
}
aside {
  border-right: 1px solid #dce3dc;
  background: #f9faf7;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
nav {
  display: grid;
  gap: 8px;
}
nav button {
  text-align: left;
  background: transparent;
  border: 0;
}
nav .selected {
  background: #e3ece3;
  color: #225c48;
  font-weight: 600;
}
.aside-bottom {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.8;
  color: #7b8981;
}
.content {
  padding: 38px 44px;
  min-width: 0;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  gap: 15px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}
.card,
.panel {
  background: #fff;
  border: 1px solid #dce3dc;
  border-radius: 12px;
  padding: 24px;
}
.number {
  font-size: 32px;
  margin-top: 14px;
}
.panel {
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.tag {
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 20px;
  background: #e5efe6;
  color: #32684b;
}
.tag.off {
  background: #f6e9df;
  color: #9b623c;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}
th {
  color: #8a958d;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}
td,
th {
  padding: 16px 10px;
  border-bottom: 1px solid #edf0eb;
}
td small {
  display: block;
  color: #8a958d;
  margin-top: 5px;
}
td button {
  padding: 6px 10px;
  margin-right: 5px;
  font-size: 12px;
}
.empty {
  text-align: center;
  padding: 40px;
  color: #86928a;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.notice {
  border: 1px solid #dedccb;
  background: #f9f7ed;
  padding: 15px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: #7a7050;
}
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}
.toolbar input {
  max-width: 400px;
}
.browser {
  background: #e3e7e1;
  border: 1px solid #ccd6ce;
  border-radius: 10px;
  min-height: 400px;
  overflow: hidden;
  position: relative;
}
.browser img {
  display: block;
  width: 100%;
  outline: none;
}
.browser-error {
  padding: 70px 30px;
  text-align: center;
}
.browser-error h2 {
  margin-bottom: 10px;
}
dialog {
  border: 1px solid #dce3dc;
  border-radius: 14px;
  padding: 30px;
  width: 460px;
  max-width: 95vw;
}
dialog::backdrop {
  background: #152c2670;
}
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: #183f32;
  color: white;
  padding: 14px 20px;
  border-radius: 9px;
  display: none;
  max-width: 450px;
}
.error {
  color: #ab4337;
  font-size: 12px;
  min-height: 20px;
}
.online {
  color: #66846c;
}
.table-wrap {
  overflow-x: auto;
}
@media (max-width: 850px) {
  .shell {
    grid-template-columns: 1fr;
  }
  aside {
    padding: 16px;
  }
  .aside-bottom {
    display: none;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
  }
  .content {
    padding: 22px;
  }
  .cards {
    gap: 8px;
  }
  .card {
    padding: 15px;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .intro {
    padding: 30px;
    min-height: 280px;
  }
  .intro h1 {
    font-size: 36px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  header {
    align-items: flex-start;
  }
}
.remote-mode {
  overflow: hidden;
  background: #e8ece7;
}
.remote-shell {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #e8ece7;
}
.remote-bar {
  height: 54px;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px;
  background: #fcfdfb;
  border-bottom: 1px solid #d5dfd6;
}
.remote-bar .brand {
  font-size: 15px;
}
.remote-bar .mark {
  width: 30px;
  height: 30px;
  font-size: 14px;
}
.remote-status {
  font-size: 12px;
  color: #52745f;
  flex: 1;
}
.remote-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.remote-controls button {
  font-size: 12px;
  padding: 8px 11px;
}
#workspace-sign-out {
  border-color: #a23e36;
  white-space: nowrap;
}
.remote-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.remote-stage #screen {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: none;
  outline: 0;
  touch-action: none;
  user-select: none;
}
.remote-message {
  position: absolute;
  padding: 25px;
  max-width: 650px;
  text-align: center;
  line-height: 1.7;
}
.remote-stage textarea {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border: 0;
  font-size: 16px;
}
.network-health {
  margin-top: 24px;
  border-top: 1px solid #dce3dc;
  padding-top: 20px;
}
.network-health dl {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 12px;
  font-size: 12px;
}
.network-health dt {
  color: #7b8981;
}
.network-health dd {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .remote-bar {
    gap: 8px;
    padding: 6px 8px;
    flex-wrap: wrap;
    height: auto;
    min-height: 54px;
  }
  .remote-status {
    font-size: 10px;
  }
  .remote-bar .brand > span:nth-child(2) {
    display: none;
  }
  .remote-controls {
    gap: 3px;
  }
  .remote-controls button {
    padding: 7px;
    font-size: 11px;
  }
}
.remote-user {
  font-size: 12px;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.button-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 13px;
}
.button-link[hidden] {
  display: none;
}
@media (max-width: 700px) {
  .remote-user {
    max-width: 120px;
  }
}
.remote-status[data-state="warning"] {
  color: #986927;
}
.remote-status[data-state="unknown"] {
  color: #758079;
}
.remote-status[data-state="connected"] {
  color: #32684b;
}
.remote-status::before {
  content: "●";
  display: inline-block;
  margin-right: 6px;
}
.remote-status[data-state="connecting"] {
  color: #32684b;
}
.remote-status[data-state="connecting"]::before {
  animation: connection-pulse 1s ease-in-out infinite;
}
@keyframes connection-pulse {
  50% {
    opacity: 0.2;
  }
}
.session-countdown {
  font:
    600 13px ui-monospace,
    monospace;
  color: #466350;
  min-width: 42px;
}
.session-countdown.ending {
  color: #b34e35;
}
.remote-tabs {
  display: flex;
  gap: 5px;
  min-height: 36px;
  background: #e4e9e2;
  border-bottom: 1px solid #cfd8ce;
  padding: 5px 10px 0;
  overflow-x: auto;
  flex-shrink: 0;
}
.remote-tab {
  display: flex;
  max-width: 260px;
  align-items: center;
  background: #dce3d9;
  border-radius: 7px 7px 0 0;
}
.remote-tab.active {
  background: #fff;
}
.remote-tab button {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 7px 12px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remote-tab .close-tab {
  padding: 5px 9px;
}
.remote-tab.active button[role="tab"] {
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .remote-status::before {
    animation: none !important;
  }
}

#disconnect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a23e36;
}
#disconnect .session-countdown,
#disconnect .session-countdown.ending {
  color: inherit;
}
.remote-stage.reconnecting #screen {
  opacity: 0.65;
  pointer-events: none;
}
.remote-stage.reconnecting .remote-message {
  top: 14px;
  z-index: 2;
  background: #fffdf3;
  border: 1px solid #e1dac2;
  border-radius: 9px;
  padding: 12px 18px;
  font-size: 13px;
  color: #756044;
}
.monitor-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.monitor-cards .number {
  font-size: 27px;
}
.monitor-cards small {
  color: #7b8981;
  font-size: 11px;
  line-height: 1.7;
  display: block;
  margin-top: 8px;
}
.monitor-cards .metric-number {
  font-size: 22px;
}
.metric-chart {
  width: 100%;
  height: 55px;
  color: #45856a;
  margin-top: 14px;
  display: block;
}
.monitor-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.monitor-stats div {
  display: grid;
  gap: 7px;
}
.monitor-stats strong {
  font-size: 20px;
}
@media (max-width: 1050px) {
  .monitor-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .monitor-cards {
    grid-template-columns: 1fr;
  }
}

.page-loading-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 2px solid #cbd8d1;
  border-top-color: #245d49;
  border-radius: 50%;
  animation: mplus-page-spin .75s linear infinite;
}
.page-loading-spinner[hidden] { display: none; }
@keyframes mplus-page-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-loading-spinner { animation-duration: 2s; } }

.remote-picker {width:min(92vw,520px);max-height:85vh;overflow:auto;}
.remote-picker select {width:100%;min-height:150px;max-height:50vh;overflow:auto;font-size:16px;}
.remote-picker button {margin:6px 6px 0 0;}

.remote-controls button:disabled {opacity:.45;cursor:not-allowed;}

dialog {max-height:90vh;overflow-y:auto;}
.mplus-preset {border:1px solid #dce3dc;border-radius:9px;margin:16px 0;padding:14px;}
.mplus-preset legend {font-weight:600;padding:0 5px;}
.check-label {display:flex;align-items:center;gap:8px;}
.check-label input[type=checkbox] {width:auto;margin:0;}
.remote-stage.auto-signin #screen, .remote-stage.auto-signin #browser-error {visibility:hidden;}
.mplus-signin-status:not([hidden]) {display:block;z-index:5;}

#mplus-signin {background:#f59e0b;border-color:#d97706;color:#3b2505;font-weight:600;}
#mplus-signin:hover:not(:disabled) {background:#fbbf24;border-color:#b45309;}
#mplus-signin:focus-visible {outline:2px solid #92400e;outline-offset:2px;}

.mplus-saved-status {text-align:center;}
.mplus-saved-status span {font-size:18px;font-weight:600;color:#245d49;}

.remote-picker .transfer-status {margin:18px 0;color:#52665c;}
.remote-picker .transfer-progress {display:block;width:100%;height:8px;margin:18px 0 24px;accent-color:#235f4c;}
.remote-picker .transfer-download {display:block;width:100%;margin:18px 0 12px;padding:13px 20px;background:#235f4c;border-color:#235f4c;color:white;font-weight:600;}
.remote-picker .transfer-download:hover {background:#194b3a;}
.remote-picker .transfer-download:disabled {opacity:.65;cursor:wait;}

.transfer-upload-state {padding:16px 18px;margin:18px 0;border-radius:10px;background:#f1f6f3;border:1px solid #d9e5dd;}
.transfer-upload-state[hidden] {display:none;}
.transfer-upload-state p {margin:0;font-size:14px;overflow-wrap:anywhere;}
.transfer-upload-state .transfer-progress {margin:16px 0 0;}
.transfer-upload-state[data-state="success"] {background:#edf7ef;border-color:#bcdcc7;color:#235f4c;}
.transfer-upload-state[data-state="error"] {background:#fff6e5;border-color:#eacb8c;color:#88570b;}
.remote-picker .transfer-upload-ok {min-width:110px;background:#235f4c;border-color:#235f4c;color:white;font-weight:600;}
.remote-picker .transfer-upload-error {min-width:110px;background:#fff0d1;border-color:#dfb764;color:#80520c;}

.people-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.people-lane{border:1px solid #e1e7e3;border-radius:14px;padding:18px;background:#fafcfb;--ring:#9aa5a0}.people-lane.signed{--ring:#d49a35}.people-lane.viewing{--ring:#338965}.people-heading{display:flex;align-items:center;justify-content:space-between}.people-heading h3{margin:0;font-size:15px}.people-heading>span{color:var(--ring);font-weight:700}.people-list{display:flex;flex-wrap:wrap;gap:16px 10px;min-height:145px;padding:24px 0}.person{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:90px;padding:0;background:none;border:0;color:inherit}.person-circle{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--ring);font-weight:700;font-size:17px;box-shadow:0 0 0 4px #fff}.person-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.person small{font-size:11px}.person-admin .person-circle{animation:admin-glow 3s ease-in-out infinite}.person-tooltip{display:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:20;width:270px;background:#203b31;color:white;padding:15px;border-radius:12px;box-shadow:0 8px 30px #0003;text-align:left;pointer-events:none;font-size:12px;overflow-wrap:anywhere}.person-tooltip span{display:block;margin-top:6px}.person:hover .person-tooltip,.person:focus .person-tooltip{display:block}.people-empty{color:#829189;font-size:13px}.traffic-flow{display:grid;grid-template-columns:1fr 1.5fr 1fr 1.8fr 1fr;align-items:center;gap:14px;padding:20px 0}.flow-node,.flow-link{text-align:center;display:flex;flex-direction:column;gap:8px}.flow-node{font-size:25px}.flow-node strong{font-size:14px}.flow-node small,.flow-link small{font-size:11px;color:#7d8c84}.flow-link{font-size:12px;border-bottom:2px solid #dce5df;padding-bottom:12px}.flow-link strong{font-size:15px}.flow-active{border-color:#338965}.flow-active span{animation:flow-pulse 2s ease-in-out infinite}@keyframes admin-glow{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ring) 25%,transparent)}}@keyframes flow-pulse{50%{opacity:.5}}@media(prefers-reduced-motion:reduce){.person-admin .person-circle,.flow-active span{animation:none}}@media(max-width:800px){.people-board{grid-template-columns:1fr}.traffic-flow{grid-template-columns:1fr}.person-tooltip{left:0;transform:none}.people-list{min-height:80px}}

.support-preview{width:min(1000px,90vw);max-height:90vh;border:1px solid #d8e4dc;border-radius:16px;padding:24px}.support-screen{background:#eef2ef;min-height:180px}.support-screen img{width:100%;height:auto;pointer-events:none}.support-preview::backdrop{background:#142d2766}

#night-settings fieldset{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid #dbe5df;border-radius:10px;margin:16px 0;padding:16px}#night-settings label{display:flex;align-items:center;gap:8px}#night-settings input[type=checkbox]{width:auto}#night-settings legend{font-weight:600}

.person[aria-disabled=true]{cursor:default}.vpn-line{border-bottom-width:3px}.vpn-paused{border-color:#d29a26}.vpn-using{border-color:#268660;animation:vpn-line-pulse 1.8s ease-in-out infinite}.vpn-connected{border-color:#268660}.vpn-lost{border-color:#c13e35}.vpn-unknown{border-color:#a5b0aa}@keyframes vpn-line-pulse{50%{border-bottom-color:transparent}}@media(prefers-reduced-motion:reduce){.vpn-line{animation:none}}

.flow-legend{display:flex;flex-wrap:wrap;gap:14px 24px;margin:16px 0 22px;font-size:12px;color:#50665b}.flow-legend>span{display:inline-flex;align-items:center;gap:9px}.legend-line{display:inline-block;width:28px;border-bottom-width:3px;border-bottom-style:solid;flex-shrink:0}@media(prefers-reduced-motion:reduce){.legend-line{animation:none}}

/* Keep navigation anchored while the administration content scrolls. */
.shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.shell>aside{min-height:0;overflow:hidden}
.shell>.content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-width:850px){.shell{grid-template-rows:auto minmax(0,1fr)}.shell>aside{gap:12px}.shell>.content{min-height:0}}
@media(min-width:851px) and (max-height:650px){.shell>aside{gap:14px;padding-top:16px;padding-bottom:16px}.shell nav{gap:3px}.shell .aside-bottom{line-height:1.4}}

.monitor-content>header{gap:16px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}.monitor-content>header>div:first-child{flex:0 1 190px}.monitor-content>header h1{font-size:27px;margin:5px 0}.monitor-content>header>div:first-child>.muted{font-size:12px}.monitor-content>header .toolbar{margin-left:auto}#monitor-summary{flex:1;min-width:460px}#monitor-summary .monitor-cards{gap:9px;margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}#monitor-summary .card{padding:12px;min-height:114px}#monitor-summary .muted{font-size:11px}#monitor-summary .number{font-size:22px;margin:5px 0}#monitor-summary .metric-number{font-size:16px}#monitor-summary small{font-size:10px;line-height:1.3;margin-top:4px}#monitor-summary .metric-chart{height:22px;margin-top:7px}.monitor-content #view>.panel-head{margin-bottom:12px}.monitor-content #monitor-time{font-size:11px;margin:5px 0}.tunnel-badge{display:inline-block;align-self:center;font-size:12px;border-radius:20px;padding:5px 9px;background:#e5efe8;color:#22664b}.tunnel-badge.other{background:#fff1d4;color:#8b6316}.tunnel-badge.lost{background:#fce7e4;color:#ab3b31}.tunnel-badge.unknown{background:#edf0ed;color:#68766d}@media(max-width:1100px){#monitor-summary{order:3;flex-basis:100%;min-width:0}.monitor-content>header>div:first-child{flex:1}.monitor-content>header .toolbar{order:2}}@media(max-width:600px){#monitor-summary .monitor-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#monitor-summary .card{min-height:100px}}

.performance-details{width:94vw;max-width:1600px;max-height:90vh;border:1px solid #dce5df;border-radius:14px;padding:24px}.performance-details table{font-size:12px}.perf-url{min-width:220px;max-width:340px;overflow-wrap:anywhere}.performance-details::backdrop{background:#183d3266}

.person-circle.person-pet{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:30px;line-height:1}.person-pet>span{display:block;line-height:1}

.remote-zoom{display:inline-flex;align-items:center;gap:2px}.remote-zoom button{padding:7px 8px;min-width:28px}.remote-zoom #zoom-reset{min-width:48px;font-variant-numeric:tabular-nums}

.remote-zoom #zoom-auto[aria-pressed="true"]{background:#e3eee7;border-color:#9cb6a8;color:#225b46}

.mplus-loading-hint{position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:24px;padding:24px 36px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(0,0,0,.15);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 22px #00000014;color:#08783e;pointer-events:none;font-size:24px}
.mplus-loading-hint[hidden],.remote-stage.reconnecting .mplus-loading-hint{display:none}

@media(max-width:480px){.mplus-loading-hint{top:70px;gap:14px;padding:20px 24px;font-size:19px}}

.remote-table-picker {width:min(94vw,1000px);}
.remote-table-scroll {max-height:52vh;overflow:auto;border:1px solid #d9e0dd;}
.remote-table-scroll table {width:100%;border-collapse:separate;border-spacing:0;}
.remote-table-scroll th {position:sticky;top:0;background:#edf3ef;z-index:1;}
.remote-table-scroll th,.remote-table-scroll td {padding:8px 10px;text-align:left;white-space:nowrap;}
.remote-table-scroll td {border-top:1px solid #e5ebe8;}
.remote-table-scroll input {width:auto;margin:0;accent-color:#235f4c;}
.remote-table-scroll tr:focus-within,.remote-table-scroll tbody tr:hover {background:#edf3ef;}


#remote-text-editor { padding: 0; overflow: hidden; max-height: 85vh; }
#remote-text-editor.remote-form-picker { width: min(94vw, 680px); }
#remote-text-editor form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(85vh - 2px);
}
.remote-editor-heading { padding: 20px 24px 14px; border-bottom: 1px solid #e2e9e4; }
#remote-text-editor h2 { margin: 0; font-size: 18px; }
.remote-editor-heading p { margin: 6px 0 0; font-size: 13px; color: #566960; }
.remote-editor-fields {
  display: grid;
  align-content: start;
  gap: 14px 16px;
  padding: 16px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.remote-form-picker .remote-editor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remote-editor-field { min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.remote-editor-field[data-kind="textarea"] { grid-column: 1 / -1; }
.remote-editor-field[data-kind="checkbox"] {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; border: 1px solid #dce3dc; border-radius: 7px;
  align-self: end; min-height: 38px;
}
#remote-text-editor .remote-editor-field input:not([type="checkbox"]),
#remote-text-editor .remote-editor-field select,
#remote-text-editor .remote-editor-field textarea {
  min-width: 0; width: 100%; padding: 8px 10px; min-height: 38px;
  max-height: none; border: 1px solid #d3dcd5; border-radius: 7px;
  font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.35;
  color: #192b29; background: #fff;
}
#remote-text-editor .remote-editor-field textarea { min-height: 5rem; resize: vertical; }
.remote-editor-field input[type="checkbox"] { width: auto; margin: 0; accent-color: #225c48; }
.remote-editor-field.edited > span { color: #225c48; }
#remote-text-editor .remote-editor-field.edited :is(input, select, textarea) { border-color: #81a995; }
#remote-text-editor :is(input, select, textarea, button):focus-visible { outline: 2px solid #326a54; outline-offset: 2px; }
.remote-editor-footer { border-top: 1px solid #e2e9e4; padding: 10px 24px; background: #f7faf8; }
.remote-editor-footer .error { margin: 0 0 6px; }
.remote-editor-footer .error:empty { display: none; }
.remote-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.remote-editor-summary { margin-inline-end: auto; font-size: 12px; color: #566960; }
.remote-editor-footer button { margin: 0; padding: 6px 11px; font-size: 12px; white-space: nowrap; }
@media (max-width: 540px) {
  .remote-form-picker .remote-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .remote-editor-heading, .remote-editor-fields, .remote-editor-footer { padding-inline: 16px; }
}

.remote-scroll-preview { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; background: white; }
.remote-scroll-preview img { display: block; margin: 0 auto; user-select: none; cursor: zoom-in; }
#smooth-scroll[aria-pressed="true"] { background: #e3efe8; border-color: #8cb6a3; }