:root {
  --rokid-black: #101010;
  --rokid-black-soft: #191919;
  --rokid-paper: #f4f4f1;
  --rokid-white: #ffffff;
  --rokid-cream: #f7f4ef;
  --rokid-line: #dcdedb;
  --rokid-muted: #666a68;
  --rokid-green: #55f28a;
  --rokid-green-ink: #087540;
  --rokid-green-soft: #e8faee;
  --rokid-blue: #4b9dff;
  --blue: var(--rokid-black);
  --blue-strong: #000000;
  --blue-soft: #efefec;
  --green: var(--rokid-green-ink);
  --green-soft: var(--rokid-green-soft);
  --ink: var(--rokid-black);
  --muted: var(--rokid-muted);
  --muted-strong: #404442;
  --line: var(--rokid-line);
  --line-strong: #c7cac7;
  --canvas: var(--rokid-paper);
  --surface: var(--rokid-white);
  --surface-soft: var(--rokid-cream);
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.07);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 30px;
}

html,
body {
  background: var(--rokid-paper);
  color: var(--rokid-black);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: rgba(8, 117, 64, 0.42);
}

/* Top navigation: thin, direct and product-like, matching the Rokid site. */
.global-header,
.topbar {
  border-bottom: 1px solid var(--rokid-line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
  backdrop-filter: none;
}

.global-nav,
.nav {
  gap: 6px;
}

.global-nav a,
.nav button {
  border-radius: 999px;
  color: #555956;
}

.global-nav a[aria-current="page"],
.nav button.active {
  border-color: var(--rokid-black);
  background: var(--rokid-black);
  color: var(--rokid-white);
  box-shadow: none;
}

.brand img,
.brand-symbol img,
.screen-brand img {
  filter: none;
}

.page-kicker,
.card-eyebrow,
.eyebrow {
  color: var(--rokid-green-ink);
}

.page-header h1,
.large-title,
.activity h1 {
  color: var(--rokid-black);
  font-weight: 900;
  letter-spacing: -0.055em;
}

.page-header h1,
.large-title {
  font-size: clamp(42px, 5.8vw, 78px);
}

.page-summary,
.lead {
  color: var(--rokid-muted);
}

.primary-button,
.primary,
.activity-actions .primary-button {
  border-color: var(--rokid-black);
  border-radius: 999px;
  background: var(--rokid-black);
  color: var(--rokid-white);
  box-shadow: none;
}

.primary-button:hover,
.primary:hover,
.activity-actions .primary-button:hover {
  border-color: #000;
  background: #000;
}

.primary-button:active,
.primary:active {
  transform: scale(0.985);
}

.secondary-button,
.quiet-button,
.text-button,
.score-buttons button {
  border-color: var(--rokid-line);
  border-radius: 999px;
  background: var(--rokid-white);
  color: var(--rokid-black);
  box-shadow: none;
}

.secondary-button:hover,
.quiet-button:hover,
.text-button:hover,
.score-buttons button:hover {
  border-color: var(--rokid-black);
  background: var(--rokid-white);
  color: var(--rokid-black);
}

.segmented {
  background: #e8e9e6;
}

.segmented button[aria-selected="true"] {
  background: var(--rokid-black);
  color: var(--rokid-white);
  box-shadow: none;
}

.training-card,
.template-card,
.task-card,
.surface-card,
.metric-card,
.state-card,
.simple-panel,
.output-card,
.team-card,
.people-team,
.rank-card {
  border-color: var(--rokid-line);
  background: var(--rokid-white);
  box-shadow: none;
}

.training-card,
.template-card,
.task-card,
.surface-card,
.metric-card,
.state-card {
  border-radius: 22px;
}

.training-card:hover,
.template-card:hover,
.task-card:hover,
.team-card:hover {
  border-color: #aeb1ae;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.card-link,
.metric-card b,
.live-team strong,
.rank-row strong {
  color: var(--rokid-black);
}

.status-pill.live,
.status-pill.ready,
.status-pill.complete,
.status,
.personal-scan-note,
.success-mark {
  background: var(--rokid-green-soft);
  color: var(--rokid-green-ink);
}

/* Live operations: white workbench around a black, high-contrast focus stage. */
.live-canvas {
  border-color: var(--rokid-line);
  border-radius: 30px;
  background: var(--rokid-white);
  box-shadow: none;
}

.activity-hero,
.activity {
  border: 0;
  border-radius: 28px;
  background: var(--rokid-black);
  color: var(--rokid-white);
  box-shadow: none;
}

.activity::after {
  display: none;
}

.activity-hero .eyebrow,
.activity .eyebrow,
.activity-hero .live-time,
.activity .timer {
  color: var(--rokid-green);
}

.activity-hero h2,
.activity h1,
.activity .activity-title {
  color: var(--rokid-white);
}

.activity-progress p,
.activity .activity-title {
  color: #b9bdb9;
}

.progress-track,
.screen-progress {
  background: #343634;
}

.progress-track i,
.screen-progress span {
  background: var(--rokid-green);
}

.live-team.selected,
.team-card.selected {
  border-color: var(--rokid-black);
  box-shadow: 0 0 0 2px var(--rokid-black);
}

.screen-preview {
  border: 1px solid #2d302e;
  background: var(--rokid-black);
}

.preview-brand {
  border-color: #3c3f3d;
  background: #1d1f1e;
}

.glasses-preview {
  border: 1px solid #252825;
  background: #000;
  color: var(--rokid-green);
}

.scorebar {
  border-color: var(--rokid-line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px);
}

.score-buttons button {
  color: var(--rokid-green-ink);
  font-weight: 900;
}

.metric,
.member-chip,
.pulse-item,
.training-meta div,
.empty-note {
  background: #f0f0ed;
}

/* Mobile join and login. */
.join-shell {
  width: min(100%, 680px);
}

.brand-header {
  margin-bottom: 42px;
}

.join-card {
  border-color: var(--rokid-line);
  border-radius: 28px;
  box-shadow: none;
}

.join-card h1 {
  color: var(--rokid-black);
  font-weight: 900;
  letter-spacing: -0.055em;
}

input,
select,
textarea {
  border-color: #c9ccc9;
  background: var(--rokid-white);
  color: var(--rokid-black);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rokid-black);
}

.scan-guidance,
.claim-block,
.success-team {
  border-color: var(--rokid-line);
  background: var(--rokid-cream);
  color: #454946;
}

.person-button:hover,
.person-button:focus-visible {
  border-color: var(--rokid-black);
  background: #f7f7f4;
}

.team-reveal {
  background: var(--rokid-black);
  color: var(--rokid-white);
}

.team-reveal span,
.team-reveal strong {
  color: inherit;
}

/* Public room screen: the black highlight band from the official Rokid site. */
html:has(.screen-shell),
body:has(.screen-shell) {
  background: var(--rokid-black);
  color: var(--rokid-white);
}

.screen-shell {
  background: var(--rokid-black);
}

.screen-shell::after {
  display: none;
}

.screen-header {
  border-bottom: 1px solid #2a2c2a;
}

.screen-brand small,
.connection,
.waiting span,
.training-context,
.ranking-heading > span,
.join-strip span,
.join-strip small {
  color: #aeb3af;
}

.connection span,
.connection.online span {
  background: var(--rokid-green);
  box-shadow: 0 0 14px rgba(85, 242, 138, 0.62);
}

.waiting p,
.celebration > p,
.activity-copy p,
.ranking-heading p {
  color: var(--rokid-green);
}

.waiting-join,
.activity-stage,
.ranking-stage,
.winner-grid article {
  border-color: #303330;
  background: var(--rokid-black-soft);
  box-shadow: none;
  backdrop-filter: none;
}

.activity-stage {
  border-radius: 30px;
}

.ranking-stage {
  border-radius: 28px;
}

.training-context span:last-child,
.timer,
.rank-row > b,
.winner-grid b {
  color: var(--rokid-green);
}

.rank-row {
  border-bottom-color: #303330;
}

.screen-shell .rank-row > strong {
  color: var(--rokid-white);
}

.screen-shell .rank-row > span {
  color: #8f9490;
}

.rank-row:first-child > span,
.rank-row:first-child > b {
  color: var(--rokid-green);
}

.join-strip {
  background: #242624;
}

.progress-track {
  background: #353835;
}

/* Keep motion restrained and purposeful. */
@media (prefers-reduced-motion: no-preference) {
  .training-card,
  .template-card,
  .task-card,
  .team-card,
  .primary-button,
  .primary {
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  }
}

@media (max-width: 820px) {
  .global-header,
  .topbar {
    background: var(--rokid-white);
  }

  .global-nav a,
  .nav button {
    border-radius: 12px;
  }

  .page-header h1,
  .large-title {
    font-size: clamp(38px, 12vw, 54px);
  }

  .activity-hero,
  .activity,
  .join-card {
    border-radius: 22px;
  }
}

@media (max-width: 560px) {
  .brand-header {
    margin-bottom: 28px;
  }

  .join-card {
    border-radius: 22px;
  }
}