/**
 * ---
 * Project      : Coding Campus Platform
 * Module       : Static / Css
 * File         : playlab_content_dark.css
 *
 * Description  : Project css source for Playlab Content Dark.
 *
 * Author       : Jihun Kang
 * Organization : Coding Campus / OrbiSync
 * Contact      : makers.dev.ci@gmail.com
 *
 * Copyright (c) 2026 Jihun Kang. All rights reserved.
 * ---
 */
.play-lab-page--dark-content {
  --pl-content-bg: #050816;
  --pl-content-surface: rgba(15, 23, 42, 0.88);
  --pl-content-surface-strong: rgba(2, 6, 23, 0.92);
  --pl-content-surface-soft: rgba(15, 23, 42, 0.64);
  --pl-content-border: rgba(34, 211, 238, 0.22);
  --pl-content-border-soft: rgba(148, 163, 184, 0.18);
  --pl-content-text: #f8fafc;
  --pl-content-muted: #94a3b8;
  --pl-content-subtle: #cbd5e1;
  --pl-content-cyan: #22d3ee;
  --pl-content-blue: #38bdf8;
  --pl-content-green: #34d399;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.14), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(59, 130, 246, 0.13), transparent 34%),
    linear-gradient(165deg, #0a0e1c 0%, #050810 48%, #080c18 100%);
}

.play-lab-page--dark-content .play-lab-main {
  background: transparent;
}

.play-lab-page--dark-content .play-lab-content-panel {
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .playlab-missions,
.play-lab-page--dark-content .plg-page {
  background: transparent;
  color: var(--pl-content-text);
  min-height: auto;
}

.play-lab-page--dark-content .plm-hero,
.play-lab-page--dark-content .plg-hero {
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
  border: 1px solid var(--pl-content-border);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(34, 211, 238, 0.08);
}

.play-lab-page--dark-content .plg-hero--runner {
  background:
    radial-gradient(circle at 78% 16%, rgba(249, 115, 22, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
}

.play-lab-page--dark-content .plm-kicker,
.play-lab-page--dark-content .plg-kicker,
.play-lab-page--dark-content .plg-question-meta {
  color: var(--pl-content-cyan);
}

.play-lab-page--dark-content .plm-hero h1,
.play-lab-page--dark-content .plg-hero h1,
.play-lab-page--dark-content .plg-result-card h1,
.play-lab-page--dark-content .plm-mission-summary__line,
.play-lab-page--dark-content .plm-section h2,
.play-lab-page--dark-content .plg-game-card h2,
.play-lab-page--dark-content .plg-level-card h2,
.play-lab-page--dark-content .plg-question-card h2,
.play-lab-page--dark-content .plg-note-panel__head h2,
.play-lab-page--dark-content .plm-lesson-main strong {
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-hero__desc,
.play-lab-page--dark-content .plm-mission-summary__note,
.play-lab-page--dark-content .plg-hero p,
.play-lab-page--dark-content .plm-card p,
.play-lab-page--dark-content .plm-card__meta,
.play-lab-page--dark-content .plm-card__bullets,
.play-lab-page--dark-content .plm-step p,
.play-lab-page--dark-content .plm-practice,
.play-lab-page--dark-content .plg-game-card p,
.play-lab-page--dark-content .plg-level-card p,
.play-lab-page--dark-content .plg-mini-meta,
.play-lab-page--dark-content .plm-lesson-main small,
.play-lab-page--dark-content .plm-lesson-arrow,
.play-lab-page--dark-content .plg-note-item small,
.play-lab-page--dark-content .plg-note-message,
.play-lab-page--dark-content .plm-section p,
.play-lab-page--dark-content .plm-learn-list,
.play-lab-page--dark-content .plm-checklist {
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .plm-card,
.play-lab-page--dark-content .plm-mission-summary,
.play-lab-page--dark-content .plm-section,
.play-lab-page--dark-content .plg-game-card,
.play-lab-page--dark-content .plg-level-card,
.play-lab-page--dark-content .plg-play-shell,
.play-lab-page--dark-content .plg-result-card,
.play-lab-page--dark-content .plg-note-panel {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.88));
  border: 1px solid var(--pl-content-border-soft);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.25);
}

.play-lab-page--dark-content .plm-card:hover,
.play-lab-page--dark-content .plg-game-card:hover,
.play-lab-page--dark-content .plg-level-card:hover,
.play-lab-page--dark-content .plm-lesson-row:hover {
  border-color: rgba(34, 211, 238, 0.34);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 26px rgba(34, 211, 238, 0.08);
}

.play-lab-page--dark-content .plm-card.is-completed,
.play-lab-page--dark-content .plg-level-card.is-completed {
  border-color: rgba(52, 211, 153, 0.5);
}

.play-lab-page--dark-content .plm-progress-card,
.play-lab-page--dark-content .plg-runner-icon,
.play-lab-page--dark-content .plg-score-board span,
.play-lab-page--dark-content .plg-result-stats span,
.play-lab-page--dark-content .plg-login-note {
  background: rgba(2, 6, 23, 0.48);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .plm-progress-card__label {
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .plm-progress-bar,
.play-lab-page--dark-content .plg-progress-line {
  background: rgba(148, 163, 184, 0.18);
}

.play-lab-page--dark-content .plm-progress-bar span,
.play-lab-page--dark-content .plg-progress-line span {
  background: linear-gradient(90deg, var(--pl-content-cyan), #3b82f6, var(--pl-content-green));
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.32);
}

.play-lab-page--dark-content .plm-level,
.play-lab-page--dark-content .plg-badge,
.play-lab-page--dark-content .plm-lesson-check,
.play-lab-page--dark-content .plg-mini-meta--chips li,
.play-lab-page--dark-content .plg-level-summary span {
  background: rgba(34, 211, 238, 0.14);
  border: 1px solid rgba(34, 211, 238, 0.26);
  color: #67e8f9;
}

.play-lab-page--dark-content .plm-status,
.play-lab-page--dark-content .plg-status {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--pl-content-muted);
}

.play-lab-page--dark-content .plm-status--done,
.play-lab-page--dark-content .plm-complete-badge,
.play-lab-page--dark-content .plg-status--done,
.play-lab-page--dark-content .plm-lesson-row.is-completed .plm-lesson-check {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.28);
  color: #86efac;
}

.play-lab-page--dark-content .plm-btn,
.play-lab-page--dark-content .plg-btn {
  background: linear-gradient(135deg, #06b6d4, #2563eb);
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
  color: #ecfeff;
}

.play-lab-page--dark-content .plm-btn:hover,
.play-lab-page--dark-content .plg-btn:hover {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #fff;
}

.play-lab-page--dark-content .plm-btn:disabled,
.play-lab-page--dark-content .plg-btn:disabled {
  background: rgba(71, 85, 105, 0.8);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: none;
  color: #cbd5e1;
}

.play-lab-page--dark-content .plm-btn--ghost,
.play-lab-page--dark-content .plg-btn--ghost,
.play-lab-page--dark-content .plg-btn--light,
.play-lab-page--dark-content .plm-link-list a {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.24);
  color: #67e8f9;
}

.play-lab-page--dark-content .plm-btn--ghost:hover,
.play-lab-page--dark-content .plg-btn--ghost:hover,
.play-lab-page--dark-content .plg-btn--light:hover,
.play-lab-page--dark-content .plm-link-list a:hover {
  background: rgba(34, 211, 238, 0.18);
  color: #ecfeff;
}

.play-lab-page--dark-content .plm-breadcrumb,
.play-lab-page--dark-content .plm-breadcrumb span {
  color: var(--pl-content-muted);
}

.play-lab-page--dark-content .plm-breadcrumb a {
  color: #67e8f9;
}

.play-lab-page--dark-content .plm-step,
.play-lab-page--dark-content .plm-run-placeholder,
.play-lab-page--dark-content .plm-quiz,
.play-lab-page--dark-content .plm-lesson-row,
.play-lab-page--dark-content .plg-note-item,
.play-lab-page--dark-content .plg-answer-btn,
.play-lab-page--dark-content .plg-order-item,
.play-lab-page--dark-content .plg-fill-input {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid var(--pl-content-border-soft);
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-practice {
  background: rgba(34, 211, 238, 0.08);
  border-left-color: var(--pl-content-cyan);
}

.play-lab-page--dark-content .plm-concept-text {
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .plm-concept-examples {
  background: rgba(15, 23, 42, 0.68);
  border-color: var(--pl-content-border-soft);
}

.play-lab-page--dark-content .plm-concept-examples__label {
  color: #67e8f9;
}

.play-lab-page--dark-content .plm-concept-examples__line {
  background: rgba(2, 6, 23, 0.56);
  border-color: rgba(34, 211, 238, 0.2);
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-practice-intro,
.play-lab-page--dark-content .plm-practice-note {
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .plm-practice-note {
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid var(--pl-content-border-soft);
}

.play-lab-page--dark-content .plm-input-practice {
  border-color: var(--pl-content-border-soft);
}

.play-lab-page--dark-content .plm-input-practice__head {
  background: rgba(2, 6, 23, 0.88);
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-input-practice__item {
  background: rgba(15, 23, 42, 0.68);
  border-color: var(--pl-content-border-soft);
}

.play-lab-page--dark-content .plm-input-practice__label {
  color: #67e8f9;
}

.play-lab-page--dark-content .plm-input-practice__text {
  background: rgba(2, 6, 23, 0.56);
  border-color: rgba(34, 211, 238, 0.2);
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-options label,
.play-lab-page--dark-content .plm-checklist label {
  background: rgba(2, 6, 23, 0.42);
  border-color: var(--pl-content-border-soft);
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .plm-fill-input {
  background: rgba(2, 6, 23, 0.56);
  border-color: var(--pl-content-border-soft);
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-quiz__q,
.play-lab-page--dark-content .plg-note-item p {
  color: var(--pl-content-text);
}

.play-lab-page--dark-content .plm-quiz__feedback,
.play-lab-page--dark-content .plg-feedback,
.play-lab-page--dark-content .plm-complete-message {
  color: var(--pl-content-cyan);
}

.play-lab-page--dark-content .mission-complete-message {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.28);
}

.play-lab-page--dark-content .mission-complete-message strong {
  color: #86efac;
}

.play-lab-page--dark-content .mission-complete-message p {
  color: var(--pl-content-subtle);
}

.play-lab-page--dark-content .mission-next-button {
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.32);
}

.play-lab-page--dark-content .plm-code-card {
  border: 1px solid rgba(34, 211, 238, 0.18);
}

.play-lab-page--dark-content .plm-code-card__head,
.play-lab-page--dark-content .plg-play-head {
  background: rgba(2, 6, 23, 0.76);
  border-bottom: 1px solid rgba(34, 211, 238, 0.16);
}

.play-lab-page--dark-content .plm-code-card pre,
.play-lab-page--dark-content .plg-code {
  background: #020617;
  color: #e2e8f0;
}

.play-lab-page--dark-content .plm-tag-list span,
.play-lab-page--dark-content .plm-subtitle {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: #67e8f9;
}

.play-lab-page--dark-content .plg-answer-btn:hover,
.play-lab-page--dark-content .plg-answer-btn.is-selected,
.play-lab-page--dark-content .plg-order-item.is-picked {
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.48);
}

.play-lab-page--dark-content .plg-answer-btn.is-correct {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.5);
}

.play-lab-page--dark-content .plg-answer-btn.is-wrong {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.5);
}

.play-lab-page--dark-content .plg-result-score {
  color: var(--pl-content-cyan);
  text-shadow: 0 0 28px rgba(34, 211, 238, 0.24);
}

.play-lab-page--dark-content .plg-note-item.is-wrong {
  border-left-color: #fb7185;
}

.play-lab-page--dark-content .plg-note-item.is-correct {
  border-left-color: var(--pl-content-green);
}