/* The web client in 远程's colours (src\Ui.cs, Theme), and the pieces 远程 adds to it. */
:root {
  --rd-bg: #0c1d23;
  --rd-surface: #10252c;
  --rd-surface-2: #16303a;
  --rd-surface-3: #1e3a43;
  --rd-border: #2c4b55;
  --rd-fg: #f3f1e8;
  --rd-muted: #96afb5;
  --rd-accent: #6ee7c8;
  --rd-accent-2: #4fd3b1;
  --rd-accent-fg: #10252c;
  --rd-danger: #ff8f7a;
  --rd-ok: #6ee7c8;
  --rd-warn: #f6b756;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0c1d23;
}

#rd-root {
  height: 100vh;
  height: 100dvh;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

.yc-back {
  color: inherit;
  text-decoration: none;
}

.yc-back-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rd-surface-3);
}

.rd-wordmark {
  font-family: "Bahnschrift", "DIN Alternate", "Microsoft YaHei UI", sans-serif;
}

.yc-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.yc-connect {
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--rd-accent);
  color: var(--rd-accent-fg);
  font: 700 15px/1.2 inherit;
  cursor: pointer;
}

.yc-back-link {
  color: var(--rd-muted);
  text-align: center;
}

/* Shown while files are dragged over the remote screen. */
.yc-drop-hint {
  position: absolute;
  inset: 12px;
  z-index: 40;
  display: none;
  place-items: center;
  border: 2px dashed var(--rd-accent);
  border-radius: 16px;
  background: rgb(12 29 35 / 0.78);
  color: var(--rd-fg);
  font-size: 20px;
  pointer-events: none;
}

#rd-viewport.yc-dropping .yc-drop-hint {
  display: grid;
}