:root {
    --theme-background: #f7f8fc;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f2f0ff;
    --theme-line: rgba(38, 42, 69, 0.12);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f0efff;
    --muted: #b0b2c7;
    --purple: #a89cff;
    --purple-light: #302b4d;
    --theme-background: #11121c;
    --theme-surface: #1a1c2a;
    --theme-surface-soft: #222438;
    --theme-line: rgba(231, 232, 255, 0.14);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .learn-page,
:root[data-theme="dark"] .dashboard-page,
:root[data-theme="dark"] .privacy-page,
:root[data-theme="dark"] .templates-page {
    background:
        radial-gradient(ellipse at 80% 12%, rgba(104, 86, 232, 0.14), transparent 32rem),
        var(--theme-background) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] header {
    border-color: var(--theme-line);
    background: rgba(17, 18, 28, 0.92);
    color: var(--ink);
}

:root[data-theme="dark"] .hero-note,
:root[data-theme="dark"] .hero-copy:nth-child(2),
:root[data-theme="dark"] .community-section,
:root[data-theme="dark"] .founder-card,
:root[data-theme="dark"] .learn-float-tag,
:root[data-theme="dark"] .learning-card,
:root[data-theme="dark"] .learn-bottom-note,
:root[data-theme="dark"] .join-community,
:root[data-theme="dark"] .community-card,
:root[data-theme="dark"] .app-icon-card,
:root[data-theme="dark"] .app-art-badge,
:root[data-theme="dark"] .dashboard-feature,
:root[data-theme="dark"] .dashboard-download,
:root[data-theme="dark"] .privacy-content,
:root[data-theme="dark"] .privacy-toc a,
:root[data-theme="dark"] .templates-hero,
:root[data-theme="dark"] .project-sidebar,
:root[data-theme="dark"] .project-detail,
:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .project-search,
:root[data-theme="dark"] .project-search kbd,
:root[data-theme="dark"] .readme-preview {
    border-color: var(--theme-line);
    background: var(--theme-surface);
    color: var(--ink);
}

:root[data-theme="dark"] .community-section,
:root[data-theme="dark"] .hero-copy:nth-child(2),
:root[data-theme="dark"] .learn-bottom-note,
:root[data-theme="dark"] .join-community,
:root[data-theme="dark"] .dashboard-download,
:root[data-theme="dark"] .project-search kbd {
    background: var(--theme-surface-soft);
}

:root[data-theme="dark"] .learn-nav,
:root[data-theme="dark"] .dashboard-nav,
:root[data-theme="dark"] .privacy-nav,
:root[data-theme="dark"] .templates-nav,
:root[data-theme="dark"] .page-footer,
:root[data-theme="dark"] .learn-footer,
:root[data-theme="dark"] .dashboard-footer,
:root[data-theme="dark"] .privacy-footer,
:root[data-theme="dark"] .templates-footer {
    color: var(--muted);
}

:root[data-theme="dark"] .learn-nav a,
:root[data-theme="dark"] .dashboard-nav a,
:root[data-theme="dark"] .privacy-nav > a,
:root[data-theme="dark"] .templates-nav a,
:root[data-theme="dark"] .privacy-back-link,
:root[data-theme="dark"] .page-footer a,
:root[data-theme="dark"] .privacy-content h3,
:root[data-theme="dark"] .project-card-name,
:root[data-theme="dark"] .founder-details strong {
    color: var(--ink);
}

:root[data-theme="dark"] .header-note,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .learn-eyebrow,
:root[data-theme="dark"] .learn-caption,
:root[data-theme="dark"] .learning-level,
:root[data-theme="dark"] .learning-card-bottom,
:root[data-theme="dark"] .app-icon-caption,
:root[data-theme="dark"] .dashboard-eyebrow,
:root[data-theme="dark"] .dashboard-disclaimer,
:root[data-theme="dark"] .privacy-eyebrow,
:root[data-theme="dark"] .privacy-updated,
:root[data-theme="dark"] .templates-eyebrow,
:root[data-theme="dark"] .project-card-author,
:root[data-theme="dark"] .project-card-description,
:root[data-theme="dark"] .project-card-footer,
:root[data-theme="dark"] .project-list-status,
:root[data-theme="dark"] .not-found p,
:root[data-theme="dark"] .hero-note p,
:root[data-theme="dark"] .privacy-footer > span,
:root[data-theme="dark"] .page-footer {
    color: var(--muted);
}

:root[data-theme="dark"] .hero-note strong {
    color: var(--ink);
}

:root[data-theme="dark"] .hero-description,
:root[data-theme="dark"] .learn-lead,
:root[data-theme="dark"] .community-description,
:root[data-theme="dark"] .dashboard-lead,
:root[data-theme="dark"] .privacy-intro,
:root[data-theme="dark"] .project-description,
:root[data-theme="dark"] .readme-preview {
    color: var(--muted);
}

:root[data-theme="dark"] .note-icon,
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .learn-float-icon,
:root[data-theme="dark"] .learn-bottom-icon,
:root[data-theme="dark"] .app-icon-symbol,
:root[data-theme="dark"] .feature-icon,
:root[data-theme="dark"] .download-icon {
    border-color: var(--theme-line);
    background: var(--theme-surface-soft);
    color: var(--purple);
}

:root[data-theme="dark"] .founder-avatar,
:root[data-theme="dark"] .founder-avatar-alt {
    border-color: var(--theme-line);
    background: var(--theme-surface-soft);
    color: var(--purple);
    box-shadow: 0 0 0 3px var(--theme-surface), 0 0 0 4px var(--theme-line);
}

:root[data-theme="dark"] .founder-link:hover {
    color: var(--purple);
}

:root[data-theme="dark"] .preview-open-link:hover,
:root[data-theme="dark"] .privacy-toc a:hover {
    border-color: #7867f3;
    background: #302b4d;
    color: #ded9ff;
}

:root[data-theme="dark"] .footer-divider {
    background: #756b9e;
}

:root[data-theme="dark"] .privacy-content section + section,
:root[data-theme="dark"] .project-card-footer {
    border-color: var(--theme-line);
}

:root[data-theme="dark"] .share-dialog {
    border: 1px solid var(--theme-line);
    background: var(--theme-surface);
    color: var(--ink);
}

:root[data-theme="dark"] .share-dialog .share-cancel-button {
    border-color: var(--theme-line) !important;
    background: var(--theme-surface-soft) !important;
    color: var(--ink) !important;
}

:root[data-theme="dark"] .learn-code-window,
:root[data-theme="dark"] .source-editor,
:root[data-theme="dark"] .editor-code-panel,
:root[data-theme="dark"] .editor-explorer,
:root[data-theme="dark"] .editor-titlebar,
:root[data-theme="dark"] .editor-tabs,
:root[data-theme="dark"] .repository-files,
:root[data-theme="dark"] .preview-state,
:root[data-theme="dark"] .preview-placeholder {
    border-color: var(--theme-line);
    background-color: #171923;
    color: #e6e8f3;
}

:root[data-theme="dark"] .license-notice {
    border-color: rgba(244, 214, 153, 0.25);
    background: #332b1d;
    color: #f0d89e;
}

:root[data-theme="dark"] .project-count,
:root[data-theme="dark"] .learning-tags,
:root[data-theme="dark"] .community-card-label {
    border-color: var(--theme-line);
    background: var(--theme-surface-soft);
    color: var(--purple);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    border-color: var(--theme-line);
    background-color: var(--theme-surface-soft);
    color: var(--ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--muted);
}

.site-theme-toggle {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1000;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #6856e8;
    border-radius: 11px;
    background: #ebe8ff;
    color: #5142c4;
    box-shadow: 3px 3px 0 rgba(65, 51, 177, 0.25);
    font: inherit;
    font-size: 19px;
    cursor: pointer;
}

.site-theme-toggle:hover {
    transform: translateY(-2px);
}

:root[data-theme="dark"] .site-theme-toggle {
    border-color: #7867f3;
    background: #302b4d;
    color: #ded9ff;
}

.btn:not(.btn-start),
.btn-share,
.editor-files-button,
.editor-run-button {
    border-color: #6856e8;
    background: #ebe8ff;
    color: #5142c4;
}

.btn-start,
.learn-primary-button,
.apkpure-button,
.preview-open-link {
    border-color: #6856e8;
    background: #6856e8;
    color: #ffffff;
}

:root[data-theme="dark"] .btn:not(.btn-start),
:root[data-theme="dark"] .btn-share,
:root[data-theme="dark"] .editor-files-button,
:root[data-theme="dark"] .editor-run-button {
    border-color: #7867f3;
    background: #302b4d;
    color: #ded9ff;
}

:root[data-theme="dark"] .btn-start,
:root[data-theme="dark"] .learn-primary-button,
:root[data-theme="dark"] .apkpure-button,
:root[data-theme="dark"] .preview-open-link {
    border-color: #7867f3;
    background: #7867f3;
    color: #ffffff;
}

:root[data-theme="dark"] .not-found h1,
:root[data-theme="dark"] .privacy-heading h2,
:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .learn-hero h1,
:root[data-theme="dark"] .dashboard-copy h1 {
    color: var(--ink);
}

:root[data-theme="dark"] .not-found p,
:root[data-theme="dark"] .privacy-intro,
:root[data-theme="dark"] .project-list-status {
    color: var(--muted);
}

@media (max-width: 600px) {
    .site-theme-toggle {
        right: 15px;
        bottom: 15px;
    }
}
/* Disable the browser blue tap/click highlight across the site. */
html, body, button, a, input, textarea, select, label, summary { -webkit-tap-highlight-color: transparent !important; }

/* Keep the catalogue and Learn More surfaces aligned with the active site theme. */
:root[data-theme="dark"] .templates-page:not(.template-detail-page) .templates-hero,
:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-search,
:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-card,
:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-count,
:root[data-theme="dark"] .learn-page .learning-card,
:root[data-theme="dark"] .learn-page .community-card,
:root[data-theme="dark"] .learn-page .learning-icon,
:root[data-theme="dark"] .learn-page .learning-level,
:root[data-theme="dark"] .learn-page .community-card-label,
:root[data-theme="dark"] .learn-page .community-card-brand img,
:root[data-theme="dark"] .learn-page .community-join-link {
    border-color: var(--theme-line) !important;
    background-color: var(--theme-surface) !important;
    color: var(--ink);
}

:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-search kbd,
:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-card-heading > i,
:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-count,
:root[data-theme="dark"] .learn-page .learning-level,
:root[data-theme="dark"] .learn-page .community-card-label,
:root[data-theme="dark"] .learn-page .community-join-link {
    background-color: var(--theme-surface-soft) !important;
}

:root[data-theme="dark"] .templates-page:not(.template-detail-page) .project-card:hover,
:root[data-theme="dark"] .learn-page .learning-card:hover,
:root[data-theme="dark"] .learn-page .community-card:hover {
    border-color: rgba(168, 156, 255, .55) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

:root[data-theme="dark"] .learn-page .community-join-link {
    color: var(--ink) !important;
}

/* Unified custom scrollbar across the whole site. */
:root {
  scrollbar-color: #9a8cff #ececf5;
  scrollbar-width: thin;
}
* { scrollbar-width: thin; scrollbar-color: #9a8cff #ececf5; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track {
  background: #ececf5;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a99cff 0%, #7665e8 100%);
  border: 3px solid #ececf5;
  border-radius: 999px;
  min-height: 34px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8f7fff 0%, #5f4bd4 100%); }
*::-webkit-scrollbar-corner { background: transparent; }
:root[data-theme="dark"] { scrollbar-color: #7464d9 #171925; }
:root[data-theme="dark"] *,
:root[data-theme="dark"] * { scrollbar-color: #7464d9 #171925; }
:root[data-theme="dark"] *::-webkit-scrollbar-track {
  background: #171925; border-color: #171925;
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a397ff 0%, #6755d2 100%);
  border-color: #171925;
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #b4aaff 0%, #806ff0 100%);
}

/* D-code Light Mode: permanen, dengan permukaan sedikit lebih gelap dari latar. */
:root {
  color-scheme: light !important;
  --bg: #f5f6fb;
  --background: #f5f6fb;
  --panel: #ffffff;
  --panel2: #f0f1f8;
  --surface: #ffffff;
  --surface-muted: #f0f1f7;
  --line: #dfe2ee;
  --border: #dfe2ee;
  --text: #25283b;
  --ink: #25283b;
  --muted: #747991;
  --purple: #6757d9;
  --purple-light: #e9e6ff;
}
html, body { background-color: #f5f6fb; color: #25283b; }
/* Jangan biarkan preferensi sistem/browser memaksa komponen ke palet gelap. */
:root[data-theme="dark"] { color-scheme: light !important; }
:root[data-theme="dark"] body,
:root[data-theme="dark"] .learn-page,
:root[data-theme="dark"] .dashboard-page,
:root[data-theme="dark"] .privacy-page,
:root[data-theme="dark"] .templates-page { background: #f5f6fb !important; color: #25283b !important; }
/* Kartu dan panel dibedakan dari latar dengan border dan bayangan lembut. */
.project-card, .project-detail, .project-sidebar, .readme-preview,
.learning-card, .dashboard-feature, .dashboard-download, .community-card,
.founder-card, .app-icon-card, .privacy-content, .templates-hero,
.share-dialog, .cl-card, .cl-modalContent {
  border-color: #dfe2ee;
  box-shadow: 0 8px 24px rgba(39, 43, 78, .055);
}
.project-card, .project-detail, .project-sidebar, .readme-preview,
.learning-card, .dashboard-feature, .dashboard-download, .community-card,
.founder-card, .app-icon-card, .privacy-content {
  background-color: #fff;
}
input, select, textarea, .project-search {
  background-color: #f0f1f7;
  border-color: #d9dceb;
  color: #25283b;
}
input:focus, select:focus, textarea:focus, .project-search:focus-within {
  background-color: #fff;
  border-color: #9b90ee;
  box-shadow: 0 0 0 3px rgba(103, 87, 217, .12);
}
/* Custom scrollbar light mode. */
:root, * { scrollbar-color: #8b7de0 #e7e8f1; scrollbar-width: thin; }
*::-webkit-scrollbar-track { background: #e7e8f1; border-color: #e7e8f1; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a69bed, #7667d5); border-color: #e7e8f1; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #9385e7, #5e4dc3); }
/* Hilangkan tombol tema yang mungkin tersisa dari markup/style lama. */
.site-theme-toggle, .theme-toggle, .theme-toggle-floating,
[data-theme-toggle], [aria-label*="mode gelap" i], [aria-label*="mode terang" i] { display: none !important; }