@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Syne:wght@600;700;800&display=swap');

:root {
  --ink: #f4f1ff;
  --muted: #9aa0b8;
  --dim: #6d738c;
  --line: rgba(255,255,255,.12);
  --glass: rgba(14, 12, 28, .62);
  --glass-2: rgba(255,255,255,.06);
  --cyan: #5ce1ff;
  --violet: #b47cff;
  --pink: #ff5d9a;
  --lime: #7dffb3;
  --danger: #ff6b7a;
  --ok: #2ee59d;
  --bg: #07060d;
  --bg-2: #0b0914;
  --bg-3: #09070f;
  --glow-1: rgba(92, 225, 255, .18);
  --glow-2: rgba(180, 124, 255, .22);
  --glow-3: rgba(255, 93, 154, .12);
  --cta-1: #5ce1ff;
  --cta-2: #8ae0ff;
  --cta-3: #b47cff;
  --cta-4: #ff5d9a;
  --mark-ink: #061018;
  --scheme: dark;
}
html[data-theme] { color-scheme: var(--scheme); }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { color-scheme: dark; }
body {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--cyan); text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { opacity: .42; cursor: default; }
.err {
  background: rgba(255, 80, 100, .14);
  color: #ffc4cc;
  border: 1px solid rgba(255, 90, 110, .28);
  padding: 10px 14px;
  margin: 0 auto 16px;
  border-radius: 14px;
  max-width: 560px;
}
.muted { color: var(--muted); }

body.um {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 8% -10%, var(--glow-1), transparent 55%),
    radial-gradient(800px 520px at 108% 0%, var(--glow-2), transparent 50%),
    radial-gradient(700px 420px at 50% 110%, var(--glow-3), transparent 50%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 55%, var(--bg-3) 100%);
  overflow-x: hidden;
}
body.um::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 20%, #000 30%, transparent 80%);
}
body.um::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: overlay;
}
body.um > * { position: relative; z-index: 1; }

.um-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 8px;
  flex-wrap: wrap;
}
.um-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Syne, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.04em;
  color: #fff;
}
.um-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--mark-ink);
  background: linear-gradient(135deg, var(--cyan), var(--violet) 55%, var(--pink));
  font-family: Syne, sans-serif;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(180,124,255,.35);
  animation: markPulse 4.5s ease-in-out infinite;
}
@keyframes markPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(180,124,255,.28); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 12px 36px rgba(92,225,255,.4); }
}
.um-nav-right { display: flex; align-items: center; gap: 10px; }
.um-pill, .um-chip {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(16px);
  color: #e8e6f5;
}
.um-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.um-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(46,229,157,.15), 0 0 12px var(--ok);
  animation: liveDot 1.6s ease-in-out infinite;
}
@keyframes liveDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: .7; }
}
.um-staff {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: #d7d3ea;
  transition: background .15s, border-color .15s;
}
.um-staff:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.um-filter { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #eee; }
.um-filter select {
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 6px 8px;
  background: rgba(8,8,16,.7);
  color: #fff;
}

.um-hero { max-width: 780px; margin: 0 auto; padding: 18px 18px 72px; text-align: center; }
.um-chip { display: inline-block; margin-bottom: 18px; color: #c9c6db; font-weight: 600; }
.um-hero h1 {
  font-family: Syne, sans-serif;
  font-size: clamp(36px, 7vw, 72px);
  line-height: .94;
  letter-spacing: -0.05em;
  margin: 0 0 16px;
  font-weight: 800;
}
.um-hero h1 em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 50%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.um-sub { color: var(--muted); font-size: 17px; margin: 0 auto 28px; max-width: 520px; line-height: 1.5; }
.um-q { color: #b8bdd2; margin: 26px 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.um-hint, .um-legal { color: var(--dim); font-size: 13px; margin: 10px 0 0; }
.um-form { max-width: 560px; margin: 0 auto; }
.um-grid { display: grid; gap: 12px; }
.um-grid-2 { grid-template-columns: 1fr 1fr; }
.um-grid-4 { grid-template-columns: repeat(4, 1fr); }
.um-grid-5 { grid-template-columns: repeat(5, 1fr); }
.um-card { display: block; cursor: pointer; }
.um-card input { position: absolute; opacity: 0; pointer-events: none; }
.um-card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 14px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
.um-card:hover .um-card-face {
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.um-card-sm .um-card-face { min-height: 52px; padding: 10px 6px; font-size: 14px; }
.um-card-left { align-items: flex-start; text-align: left; }
.um-card-left small { color: var(--muted); font-size: 13px; }
.um-card input:checked + .um-card-face {
  background: linear-gradient(180deg, rgba(92,225,255,.16), rgba(180,124,255,.1));
  border-color: rgba(92,225,255,.55);
  box-shadow: 0 0 0 4px rgba(92,225,255,.1), inset 0 1px 0 rgba(255,255,255,.12);
}
.um-ico { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 10px rgba(92,225,255,.25)); }
.um-cta {
  margin-top: 28px;
  width: min(360px, 100%);
  border-radius: 999px;
  padding: 15px 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mark-ink);
  background: linear-gradient(90deg, var(--cta-1), var(--cta-2) 35%, var(--cta-3) 75%, var(--cta-4));
  background-size: 160% 100%;
  box-shadow: 0 14px 40px rgba(92,225,255,.22), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .15s, filter .15s, background-position .4s;
}
.um-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  background-position: 100% 0;
}
.um-login { max-width: 480px; }
.um-login-card {
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  padding: 22px;
  background: rgba(12,10,22,.72);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
}
.um-login-card label { margin: 0 0 14px; display: block; color: #b8bdd2; font-size: 14px; }
.um-login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: #fff;
}
.um-login-card input:focus {
  outline: none;
  border-color: rgba(92,225,255,.5);
  box-shadow: 0 0 0 4px rgba(92,225,255,.12);
}
.um-login-card .um-cta { width: 100%; margin-top: 8px; }
.um-err { display: inline-block; border-radius: 12px; margin-bottom: 16px; }
.um-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 56px;
  text-align: left;
}
.um-features article {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
}
.um-features h3 { margin: 8px 0 6px; font-size: 16px; font-family: Syne, sans-serif; }
.um-features p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.um-f-ico {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(92,225,255,.12);
  border: 1px solid rgba(92,225,255,.2);
  font-size: 16px;
}

/* Chat stage */
.um-chat { background: #05040a; }
.um-chat .um-nav-over {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 8;
  background: linear-gradient(180deg, rgba(0,0,0,.62), transparent);
}
.um-chat .um-nav-over .um-logo,
.um-chat .um-nav-over .um-filter { color: #fff; }
.um-chat .um-app {
  position: relative;
  height: 100vh;
  margin: 0;
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(180,124,255,.12), transparent 50%),
    #05040a;
}
.um-stage {
  position: relative;
  height: 100%;
  background: #0a0812;
  overflow: hidden;
}
.um-stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  z-index: 2;
  pointer-events: none;
}
.um-remote,
#remote,
#remote.um-remote {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block !important;
  object-fit: cover;
  background:
    radial-gradient(circle at 50% 40%, #1a1630 0%, #0a0812 70%);
  opacity: 1;
}
.um-tag-remote { display: none !important; }
.tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  top: auto;
  height: auto;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.um-dock {
  position: absolute;
  left: 16px;
  bottom: 18px;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: calc(100% - 32px);
}
.um-chatpop {
  width: min(360px, 42vw);
  height: 340px;
  background: rgba(8, 8, 16, .48);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  backdrop-filter: blur(18px);
}
.um-pip {
  position: relative;
  width: min(168px, 18vw);
  height: min(280px, 34vw);
  min-width: 130px;
  min-height: 210px;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(92,225,255,.2);
  cursor: pointer;
  transition: width .2s ease, height .2s ease;
}
.um-pip.um-pip-lg {
  width: min(220px, 24vw);
  height: min(380px, 46vw);
}
.um-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.um-log { flex: 1; overflow-y: auto; padding: 12px 14px; font-size: 14px; line-height: 1.4; color: #fff; }
.um-log p { margin: 0 0 8px; color: #fff; }
.um-log .sys { color: rgba(255,255,255,.72); font-size: 13px; }
.um-log .you { color: var(--cyan); }
.um-log .stranger { color: #ffc4e0; }
.um-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.12);
  background: transparent;
}
.um-new, .um-stop, .um-start, .um-compose button { font-weight: 700; color: #fff; }
.um-new {
  min-width: 64px;
  background: linear-gradient(180deg, #5ce1ff, #7a6dff);
  font-size: 13px;
  color: #061018;
}
.um-new small { display: block; font-weight: 500; font-size: 10px; opacity: .9; }
.um-stop { min-width: 52px; background: #4a4f63; }
.um-start { min-width: 52px; background: linear-gradient(180deg, #3be89a, #1ea86a); color: #042214; }
.um-compose {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  min-width: 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.um-compose input {
  flex: 1; border: 0; padding: 8px 10px; background: transparent; outline: none; min-width: 0;
  color: #fff;
}
.um-compose input::placeholder { color: rgba(255,255,255,.55); }
.um-compose button { min-width: 58px; background: #16141f; }
.um-foot { display: none !important; }
.um-textonly .um-remote,
.um-textonly .um-pip { display: none; }
.um-textonly .um-app {
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(92,225,255,.16), transparent 50%),
    radial-gradient(800px 500px at 100% 20%, rgba(180,124,255,.18), transparent 50%),
    #07060d;
}
.um-textonly .um-dock { inset: 80px 16px 16px; max-width: none; }
.um-textonly .um-chatpop { width: min(560px, 100%); height: min(70vh, 640px); }

.box, .wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.top { padding: 10px 16px; background: #000; color: #eee; }
.top a { color: var(--cyan); }
h1, h2 { margin: 12px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; border-bottom: 1px solid #333; padding: 6px; vertical-align: top; }
.live-card { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; border: 1px solid #444; background: #1a1a1a; padding: 12px; margin: 8px 0; }
.watch-btn { display: inline-block; background: #1b7f3a; color: #fff; text-decoration: none; padding: 10px 16px; font-weight: 700; }
.brand-mini img { height: 28px; width: auto; display: block; }
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.pane { position: relative; background: #000; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; }
.pane video { width: 100%; height: 100%; object-fit: cover; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.admin-ui, body.watch-ui { background: #0a0812; color: #eee; }
body.admin-ui a, body.watch-ui a { color: var(--cyan); }
body.admin-ui button, body.watch-ui button { background: #c45c2d; color: #fff; padding: 8px 14px; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.vault-card { background: #16141f; border: 1px solid var(--line); padding: 8px; border-radius: 14px; }
.vault-thumb { display: block; width: 100%; padding: 0; background: #000; border-radius: 10px; overflow: hidden; }
.vault-thumb img { display: block; width: 100%; height: 180px; object-fit: cover; }
.vault-meta { padding: 8px 4px 2px; font-size: 13px; }
.vault-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.vault-actions form { display: inline; margin: 0; }
.vault-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; z-index: 40; padding: 20px;
}
.vault-modal[hidden] { display: none !important; }
.vault-modal-box { max-width: min(920px, 100%); text-align: center; }
.vault-modal-box img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto 10px; }

@media (max-width: 800px) {
  .um-grid-4, .um-grid-5 { grid-template-columns: 1fr 1fr; }
  .um-features { grid-template-columns: 1fr; }
  .um-chat .um-app { height: 100vh; }
  .um-dock { left: 8px; bottom: 8px; gap: 8px; }
  .um-chatpop { width: min(240px, 54vw); height: 220px; }
  .um-pip { width: 110px; height: 168px; min-width: 100px; min-height: 150px; }
  .um-pip.um-pip-lg { width: 150px; height: 230px; }
  .um-foot { display: none !important; }
}

.theme-studio { margin: 28px 0 40px; }
.theme-studio h2 { font-family: Syne, sans-serif; margin: 18px 0 8px; }
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 8px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  background: var(--glass-2);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}
.theme-card strong { font-size: 14px; }
.theme-card small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.theme-card em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--mark-ink);
  background: linear-gradient(90deg, var(--cta-1), var(--cta-3));
  border-radius: 999px;
  padding: 2px 8px;
}
.theme-card.is-on, .theme-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.theme-swatches { display: flex; gap: 6px; margin-bottom: 4px; }
.theme-swatches i {
  width: 22px; height: 22px; border-radius: 999px;
  display: block; border: 1px solid rgba(255,255,255,.2);
}

html[data-theme="ember"] {
  --ink:#fff4ea; --muted:#c9b09a; --dim:#8f7462; --line:rgba(255,180,120,.16);
  --cyan:#ffb020; --violet:#ff6a3d; --pink:#ff3d6e; --ok:#ffb020;
  --bg:#140804; --bg-2:#1c0b06; --bg-3:#120704;
  --glow-1:rgba(255,176,32,.22); --glow-2:rgba(255,106,61,.2); --glow-3:rgba(255,61,110,.12);
  --cta-1:#ffb020; --cta-2:#ffd36a; --cta-3:#ff6a3d; --cta-4:#ff3d6e; --mark-ink:#2a1004;
}
html[data-theme="ocean"] {
  --ink:#e8fbff; --muted:#8eb8c6; --dim:#5d8490; --line:rgba(80,220,220,.16);
  --cyan:#3ee0c6; --violet:#4aa3ff; --pink:#7ad7ff; --ok:#3ee0c6;
  --bg:#041018; --bg-2:#071824; --bg-3:#031018;
  --glow-1:rgba(62,224,198,.2); --glow-2:rgba(74,163,255,.2); --glow-3:rgba(122,215,255,.12);
  --cta-1:#3ee0c6; --cta-2:#7ad7ff; --cta-3:#4aa3ff; --cta-4:#2ec4b6; --mark-ink:#031018;
}
html[data-theme="forest"] {
  --ink:#eefbe8; --muted:#9ab896; --dim:#62806a; --line:rgba(140,255,106,.16);
  --cyan:#8cff6a; --violet:#3dcc8b; --pink:#c6f27a; --ok:#8cff6a;
  --bg:#06140a; --bg-2:#0a1c10; --bg-3:#051208;
  --glow-1:rgba(140,255,106,.2); --glow-2:rgba(61,204,139,.18); --glow-3:rgba(198,242,122,.12);
  --cta-1:#8cff6a; --cta-2:#c6f27a; --cta-3:#3dcc8b; --cta-4:#7ad0a0; --mark-ink:#06200c;
}
html[data-theme="rose"] {
  --ink:#fff0f6; --muted:#c99aac; --dim:#8f6274; --line:rgba(255,122,184,.18);
  --cyan:#ff7ab8; --violet:#ff4d8d; --pink:#ffd0e6; --ok:#ff7ab8;
  --bg:#16050e; --bg-2:#1e0814; --bg-3:#12040c;
  --glow-1:rgba(255,122,184,.22); --glow-2:rgba(255,77,141,.18); --glow-3:rgba(255,208,230,.1);
  --cta-1:#ff7ab8; --cta-2:#ffd0e6; --cta-3:#ff4d8d; --cta-4:#ff9ac8; --mark-ink:#3a0a1c;
}
html[data-theme="grape"] {
  --ink:#f6edff; --muted:#b49ad0; --dim:#7a6296; --line:rgba(192,132,255,.18);
  --cyan:#c084ff; --violet:#8b5cf6; --pink:#f0abfc; --ok:#c084ff;
  --bg:#0e0618; --bg-2:#160a24; --bg-3:#0c0514;
  --glow-1:rgba(192,132,255,.22); --glow-2:rgba(139,92,246,.2); --glow-3:rgba(240,171,252,.12);
  --cta-1:#c084ff; --cta-2:#f0abfc; --cta-3:#8b5cf6; --cta-4:#d8b4fe; --mark-ink:#1e0a36;
}
html[data-theme="neon"] {
  --ink:#f4ffe8; --muted:#b0c48a; --dim:#6f8058; --line:rgba(212,255,0,.2);
  --cyan:#d4ff00; --violet:#ff2bd6; --pink:#00f0ff; --ok:#d4ff00;
  --bg:#050505; --bg-2:#0c0c0c; --bg-3:#000;
  --glow-1:rgba(212,255,0,.18); --glow-2:rgba(255,43,214,.2); --glow-3:rgba(0,240,255,.14);
  --cta-1:#d4ff00; --cta-2:#00f0ff; --cta-3:#ff2bd6; --cta-4:#d4ff00; --mark-ink:#101400;
}
html[data-theme="sunset"] {
  --ink:#fff3ea; --muted:#c9aa96; --dim:#8f7462; --line:rgba(255,122,69,.18);
  --cyan:#ff7a45; --violet:#ffb347; --pink:#ff5d8f; --ok:#ffb347;
  --bg:#160b06; --bg-2:#1e1208; --bg-3:#120804;
  --glow-1:rgba(255,122,69,.22); --glow-2:rgba(255,179,71,.18); --glow-3:rgba(255,93,143,.12);
  --cta-1:#ff7a45; --cta-2:#ffb347; --cta-3:#ff5d8f; --cta-4:#ffd08a; --mark-ink:#2a1206;
}
html[data-theme="arctic"] {
  --ink:#eef8ff; --muted:#93b3c6; --dim:#5d7a8c; --line:rgba(155,231,255,.18);
  --cyan:#9be7ff; --violet:#67a8ff; --pink:#e8f6ff; --ok:#9be7ff;
  --bg:#0a1218; --bg-2:#101820; --bg-3:#080e14;
  --glow-1:rgba(155,231,255,.2); --glow-2:rgba(103,168,255,.18); --glow-3:rgba(232,246,255,.08);
  --cta-1:#9be7ff; --cta-2:#e8f6ff; --cta-3:#67a8ff; --cta-4:#b8deff; --mark-ink:#062030;
}
html[data-theme="mono"] {
  --ink:#f4f4f4; --muted:#a3a3a3; --dim:#737373; --line:rgba(255,255,255,.14);
  --cyan:#ffffff; --violet:#c8c8c8; --pink:#888888; --ok:#ffffff;
  --bg:#080808; --bg-2:#111; --bg-3:#000;
  --glow-1:rgba(255,255,255,.1); --glow-2:rgba(200,200,200,.08); --glow-3:rgba(255,255,255,.05);
  --cta-1:#ffffff; --cta-2:#e8e8e8; --cta-3:#c8c8c8; --cta-4:#a0a0a0; --mark-ink:#111;
}
html[data-theme="gold"] {
  --ink:#fff6d8; --muted:#c9b27a; --dim:#8f7a48; --line:rgba(230,193,90,.2);
  --cyan:#e6c15a; --violet:#f3e0a6; --pink:#b8892a; --ok:#e6c15a;
  --bg:#0c0a04; --bg-2:#161208; --bg-3:#0a0802;
  --glow-1:rgba(230,193,90,.2); --glow-2:rgba(243,224,166,.12); --glow-3:rgba(184,137,42,.12);
  --cta-1:#e6c15a; --cta-2:#f3e0a6; --cta-3:#b8892a; --cta-4:#ffe08a; --mark-ink:#2a2208;
}
html[data-theme="bloodmoon"] {
  --ink:#ffe8e8; --muted:#c99a9a; --dim:#8f6262; --line:rgba(255,59,59,.2);
  --cyan:#ff3b3b; --violet:#ff7a5c; --pink:#ffb4a2; --ok:#ff7a5c;
  --bg:#120606; --bg-2:#1a0808; --bg-3:#0e0404;
  --glow-1:rgba(255,59,59,.2); --glow-2:rgba(255,122,92,.16); --glow-3:rgba(255,180,162,.1);
  --cta-1:#ff3b3b; --cta-2:#ff7a5c; --cta-3:#ffb4a2; --cta-4:#ff5d5d; --mark-ink:#2a0808;
}
html[data-theme="matrix"] {
  --ink:#d4ffe4; --muted:#7ab894; --dim:#4a8060; --line:rgba(0,255,106,.2);
  --cyan:#00ff6a; --violet:#9affc2; --pink:#00b347; --ok:#00ff6a;
  --bg:#020804; --bg-2:#041208; --bg-3:#000;
  --glow-1:rgba(0,255,106,.18); --glow-2:rgba(154,255,194,.1); --glow-3:rgba(0,179,71,.12);
  --cta-1:#00ff6a; --cta-2:#9affc2; --cta-3:#00b347; --cta-4:#6aff9a; --mark-ink:#03140a;
}
html[data-theme="aurora"] {
  --ink:#eefcff; --muted:#96b8c2; --dim:#62808a; --line:rgba(93,255,178,.16);
  --cyan:#5dffb2; --violet:#ff7ad9; --pink:#7acbff; --ok:#5dffb2;
  --bg:#070b12; --bg-2:#0b1220; --bg-3:#06080e;
  --glow-1:rgba(93,255,178,.18); --glow-2:rgba(255,122,217,.16); --glow-3:rgba(122,203,255,.14);
  --cta-1:#5dffb2; --cta-2:#7acbff; --cta-3:#ff7ad9; --cta-4:#b8ffd8; --mark-ink:#04140e;
}
html[data-theme="candy"] {
  --scheme: light;
  --ink:#2a1830; --muted:#74607a; --dim:#9a889e; --line:rgba(80,40,70,.12);
  --cyan:#ff6b9d; --violet:#7c6bff; --pink:#4ecbff; --ok:#ff6b9d;
  --bg:#fff4fa; --bg-2:#ffe8f4; --bg-3:#fff;
  --glow-1:rgba(255,107,157,.22); --glow-2:rgba(124,107,255,.18); --glow-3:rgba(78,203,255,.16);
  --cta-1:#ff6b9d; --cta-2:#ff9ec0; --cta-3:#7c6bff; --cta-4:#4ecbff; --mark-ink:#fff;
}
html[data-theme="cotton"] {
  --scheme: light;
  --ink:#24183a; --muted:#6e6288; --dim:#948aa8; --line:rgba(80,60,140,.14);
  --cyan:#7a5cff; --violet:#ff8ec8; --pink:#6ad0c6; --ok:#7a5cff;
  --bg:#f6f1ff; --bg-2:#efe8ff; --bg-3:#fff;
  --glow-1:rgba(122,92,255,.18); --glow-2:rgba(255,142,200,.16); --glow-3:rgba(106,208,198,.14);
  --cta-1:#7a5cff; --cta-2:#ff8ec8; --cta-3:#6ad0c6; --cta-4:#b8a6ff; --mark-ink:#fff;
}
html[data-theme="matcha"] {
  --scheme: light;
  --ink:#243018; --muted:#6a7458; --dim:#8c9478; --line:rgba(60,80,30,.14);
  --cyan:#5a8f3a; --violet:#c4d36a; --pink:#e2b04a; --ok:#5a8f3a;
  --bg:#f4f0e0; --bg-2:#ece6cc; --bg-3:#faf7ec;
  --glow-1:rgba(90,143,58,.16); --glow-2:rgba(196,211,106,.16); --glow-3:rgba(226,176,74,.12);
  --cta-1:#5a8f3a; --cta-2:#c4d36a; --cta-3:#e2b04a; --cta-4:#8cb85a; --mark-ink:#fff8e8;
}
html[data-theme="copper"] {
  --ink:#fff1e6; --muted:#c9aa96; --dim:#8f7462; --line:rgba(224,122,61,.18);
  --cyan:#e07a3d; --violet:#2ec4b6; --pink:#f2c14e; --ok:#2ec4b6;
  --bg:#120a07; --bg-2:#1a100a; --bg-3:#0e0806;
  --glow-1:rgba(224,122,61,.2); --glow-2:rgba(46,196,182,.16); --glow-3:rgba(242,193,78,.12);
  --cta-1:#e07a3d; --cta-2:#f2c14e; --cta-3:#2ec4b6; --cta-4:#ffb080; --mark-ink:#2a1208;
}

html[data-theme="candy"] .um-logo,
html[data-theme="cotton"] .um-logo,
html[data-theme="matcha"] .um-logo { color: var(--ink); }
html[data-theme="candy"] .um-pill,
html[data-theme="cotton"] .um-pill,
html[data-theme="matcha"] .um-pill,
html[data-theme="candy"] .um-staff,
html[data-theme="cotton"] .um-staff,
html[data-theme="matcha"] .um-staff {
  background: rgba(255,255,255,.7);
  color: var(--ink);
}
html[data-theme="candy"] .um-card-face,
html[data-theme="cotton"] .um-card-face,
html[data-theme="matcha"] .um-card-face,
html[data-theme="candy"] .um-features article,
html[data-theme="cotton"] .um-features article,
html[data-theme="matcha"] .um-features article {
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
}
html[data-theme="candy"] .um-login-card,
html[data-theme="cotton"] .um-login-card,
html[data-theme="matcha"] .um-login-card {
  background: rgba(255,255,255,.8);
}
html[data-theme="candy"] .um-login-card input,
html[data-theme="cotton"] .um-login-card input,
html[data-theme="matcha"] .um-login-card input {
  background: #fff;
  color: var(--ink);
  border-color: rgba(0,0,0,.12);
}