/* SugarCube 2026 light visual system
   Loaded after page-level styles so every public surface shares one language. */

:root {
  color-scheme: light;
  --primary: #6558e8;
  --primary-dark: #5145cd;
  --primary-light: #8377f4;
  --primary-hover: #5145cd;
  --secondary: #ff7a59;
  --accent: #f4b942;
  --success: #168a67;
  --bg-dark: #f7f6fb;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfaff;
  --card-dark: #ffffff;
  --card-mid: #f3f1fa;
  --border: #e3e0ec;
  --border-strong: #cbc5db;
  --text-primary: #211d2b;
  --text-secondary: #6e687b;
  --text-muted: #9690a2;
  --gradient-primary: linear-gradient(135deg, #6558e8 0%, #8975ed 52%, #ff7a59 100%);
  --gradient-accent: linear-gradient(135deg, #ff7a59 0%, #f4b942 100%);
  --shadow-sm: 0 2px 8px rgba(52, 43, 76, 0.06);
  --shadow-md: 0 12px 32px rgba(52, 43, 76, 0.09);
  --shadow-lg: 0 28px 70px rgba(52, 43, 76, 0.13);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

html { background: #f7f6fb; }

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(101, 88, 232, 0.10), transparent 30rem),
    radial-gradient(circle at 92% 7%, rgba(255, 122, 89, 0.10), transparent 27rem),
    linear-gradient(180deg, #fbfaff 0%, #f7f6fb 58%, #f4f2f8 100%) !important;
  color: var(--text-primary) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  accent-color: var(--primary);
}

::selection { color: #fff; background: #6558e8; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1eff6 !important; }
::-webkit-scrollbar-thumb { background: #c8c1dc !important; border: 2px solid #f1eff6; border-radius: 999px; }

:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid rgba(101, 88, 232, 0.22) !important;
  outline-offset: 3px;
}

/* Shared typography, panels and controls */
.section-title,
.generator-header h1,
.hero-logo h1 {
  color: #211d2b;
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -0.04em;
}

.section-subtitle,
.hero-subtitle,
.generator-tagline,
.page-content p,
.page-content ul { color: var(--text-secondary); }

.section-badge,
.hero-badge,
.gen-badge {
  color: #5145cd;
  background: #efedff;
  border-color: #d9d4ff;
}

.gen-card,
.generator-card,
.pricing-card,
.api-feature,
.showcase-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(216, 211, 229, 0.95) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: blur(18px);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  color: #2b2635 !important;
  background: #fbfaff !important;
  border-color: #dcd7e7 !important;
}

input::placeholder,
textarea::placeholder { color: #a39dad !important; }

input:focus,
textarea:focus,
select:focus {
  border-color: #6558e8 !important;
  box-shadow: 0 0 0 4px rgba(101, 88, 232, 0.11) !important;
}

.generate-btn,
.download-btn,
.pricing-btn {
  color: #fff !important;
  background: var(--gradient-primary) !important;
  box-shadow: 0 10px 24px rgba(101, 88, 232, 0.20) !important;
}

.clear-btn,
.retry-btn,
.history-action-btn {
  color: #6e687b !important;
  background: #fff !important;
  border-color: #ddd8e7 !important;
}

.upload-btn,
.img-upload-area,
.upload-zone {
  color: #6e687b !important;
  background: linear-gradient(145deg, #fbfaff, #f5f2ff) !important;
  border-color: #cfc8e6 !important;
}

.upload-btn:hover,
.img-upload-area:hover,
.upload-zone:hover,
.upload-zone:focus-visible {
  color: #5145cd !important;
  background: #f1eeff !important;
  border-color: #6558e8 !important;
}

.status-bar.loading,
.status-bar.success {
  color: #286f59 !important;
  background: #edf9f4 !important;
  border-color: #b9e4d4 !important;
}

.status-bar.error {
  color: #b23a48 !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

/* Header: porcelain surface with ink navigation and lavender actions */
sugarcube-header .sc-header {
  color: #3d3748 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(45, 38, 62, 0.10) !important;
  box-shadow: 0 6px 24px rgba(52, 43, 76, 0.06);
}

sugarcube-header .sc-brand { color: #211d2b !important; }
sugarcube-header .sc-brand-tag { color: #8e879a !important; }
sugarcube-header .sc-nav-link,
sugarcube-header .sc-nav-trigger { color: #6c6678 !important; }
sugarcube-header .sc-nav-link:hover,
sugarcube-header .sc-nav-trigger:hover,
sugarcube-header .sc-nav-trigger[aria-expanded="true"],
sugarcube-header .sc-nav-item.is-active > .sc-nav-trigger,
sugarcube-header .sc-nav-link.is-active {
  color: #312a45 !important;
  background: #f1eff8 !important;
}

sugarcube-header .sc-mega,
sugarcube-header .gh-user-dropdown,
sugarcube-header .gh-mobile-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #e2deeb !important;
  box-shadow: 0 24px 60px rgba(52, 43, 76, 0.15) !important;
}

sugarcube-header .sc-tool-link { color: #312a45 !important; }
sugarcube-header .sc-tool-name { color: #211d2b !important; }
sugarcube-header .sc-tool-desc,
sugarcube-header .gh-dd-email,
sugarcube-header .gh-mobile-dd-email { color: #8a8495 !important; }
sugarcube-header .sc-tool-link:hover,
sugarcube-header .sc-tool-link.is-active {
  background: #f3f0ff !important;
  border-color: #dad4ff !important;
}

sugarcube-header .sc-tool-link:hover .sc-tool-arrow { color: #6558e8 !important; }
sugarcube-header .sc-cube-link {
  color: #5145cd !important;
  background: #f0edff !important;
  border-color: #d9d3ff !important;
}
sugarcube-header .sc-cube-link:hover,
sugarcube-header .sc-cube-link.is-active { color: #4035b2 !important; background: #e7e2ff !important; }
sugarcube-header .sc-cube-dot { background: #7768ef !important; box-shadow: 0 0 0 3px rgba(101, 88, 232, 0.12) !important; }
sugarcube-header .gh-google-btn-desktop,
sugarcube-header .gh-google-btn-mobile {
  color: #fff !important;
  background: #6558e8 !important;
  box-shadow: 0 8px 18px rgba(101, 88, 232, 0.18);
}
sugarcube-header .gh-user-trigger,
sugarcube-header .gh-mobile-trigger,
sugarcube-header .gh-menu-toggle {
  color: #514b5e !important;
  background: #f8f7fb !important;
  border-color: #ded9e8 !important;
}
sugarcube-header .gh-user-name-el,
sugarcube-header .gh-mobile-name-el,
sugarcube-header .gh-logout-desktop,
sugarcube-header .gh-logout-mobile,
sugarcube-header .gh-account-link { color: #514b5e !important; }
sugarcube-header .gh-mobile-menu { background: #fbfaff !important; border-color: #e5e1ec !important; }
sugarcube-header .sc-mobile-home,
sugarcube-header .sc-mobile-tool {
  color: #312a45 !important;
  background: #fff !important;
  border-color: #e3dfeb !important;
}
sugarcube-header .sc-mobile-heading,
sugarcube-header .sc-mobile-tool small { color: #8e879a !important; }

/* Footer */
.footer {
  color: #514b5e !important;
  background: #eeebf4 !important;
  border-top: 1px solid #ddd8e6 !important;
}
.footer h4,
.footer .nav-brand-text { color: #2b2635 !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.footer p,
.footer a { color: #756e81 !important; }
.footer a:hover { color: #5145cd !important; }
.footer-bottom { border-color: #d9d4e2 !important; }
.footer .lang-switcher { background: #fff !important; border-color: #d9d4e2 !important; }
.footer .lang-btn { color: #756e81 !important; }
.footer .lang-btn:hover { color: #312a45 !important; background: #f1eff7 !important; }
.footer .lang-btn.active { color: #fff !important; background: #6558e8 !important; }

/* Landing page */
body > div:first-child[style*="linear-gradient"] {
  color: #4e3f2f !important;
  background: linear-gradient(90deg, #fff0d8, #ffe6ee, #eee9ff) !important;
  border-bottom: 1px solid #eadfd8;
}

body > main,
main { color: #2b2635; }

main h1,
main h2,
main h3,
main h4 { color: #2b2635 !important; }

main > section[style*="background:#"],
body > section[style*="background:#"] {
  background: transparent !important;
  border-color: #e4dfeb !important;
}
main[style*="background:#0"],
main > div.relative.overflow-hidden > div.absolute {
  background: transparent !important;
}

main section[style*="#0a0a0a"],
section[style*="#0a0a0a"] {
  background: transparent !important;
  border-color: #e4dfeb !important;
}

main [style*="background:#111111"],
main [style*="background:#111"],
main [style*="background:#1a1a1a"],
main [style*="background:#0f1815"] {
  background: #fff !important;
  border-color: #e1dce9 !important;
  box-shadow: var(--shadow-sm);
}

main [class*="rounded"][style*="background:#0"],
main [class*="rounded"][style*="background:#1"] {
  background: #fff !important;
  border-color: #e1dce9 !important;
  box-shadow: var(--shadow-sm);
}

main [style*="color:#d1d5db"],
main [style*="color:#9ca3af"],
main [style*="color:#a3a3a3"],
main [style*="color:#6b7280"] { color: #746d80 !important; }

main [style*="color:#10B981"],
main [style*="color:#10b981"],
main [style*="color:#00FF88"],
main [style*="color:#00ff88"] { color: #6558e8 !important; }

main [style*="background:#10B981"],
main [style*="background:#10b981"],
main [style*="background:#00FF88"],
main [style*="background:#00ff88"] {
  color: #fff !important;
  background: #6558e8 !important;
}

main [style*="border-color:#10B981"],
main [style*="border-color:#10b981"],
main [style*="border-color:#00FF88"],
main [style*="border-color:#00ff88"] { border-color: #6558e8 !important; }

main svg[stroke="#10B981"],
main svg[stroke="#10b981"],
main svg[stroke="#00FF88"],
main svg[stroke="#00ff88"],
main svg[stroke="#34d399"] { stroke: #6558e8 !important; }

main [style*="color:white"],
main [style*="color:#fff"],
main .text-white { color: #2b2635 !important; }

main a[style*="linear-gradient"],
main button[style*="linear-gradient"] { color: #fff !important; background: var(--gradient-primary) !important; }
main a[style*="background:transparent"] { color: #5145cd !important; border-color: #cfc8e6 !important; background: #fff !important; }
.tool-card {
  color: #2b2635 !important;
  background: rgba(255,255,255,.92) !important;
  border-color: #ddd8e8 !important;
  box-shadow: 0 14px 36px rgba(52,43,76,.08) !important;
}
.tool-card:hover {
  border-color: #aaa0ef !important;
  box-shadow: 0 22px 48px rgba(52,43,76,.13) !important;
}
.tool-card > div:first-child {
  background: linear-gradient(135deg, #eeeaff, #fff0ea) !important;
  border-color: #ddd5f2 !important;
}
.tool-card > div:last-child { color: #6558e8 !important; }
.highlight-item {
  color: #5f586a !important;
  background: #fff !important;
  border-color: #e1dce9 !important;
  box-shadow: var(--shadow-sm);
}
main details {
  background: #fff !important;
  border-color: #e1dce9 !important;
  box-shadow: var(--shadow-sm);
}
main summary { color: #2b2635 !important; }
main section:last-of-type > div[style*="linear-gradient"] {
  background: linear-gradient(135deg, #eeeaff, #fff0ea) !important;
  border-color: #dcd5f1 !important;
  box-shadow: var(--shadow-md);
}

/* AI image generator */
.gen-card input[type="text"],
.gen-card input[type="password"],
.gen-card textarea,
.img-upload-area { background: #fbfaff !important; }
.img-upload-area.has-images,
.history-panel,
.history-item,
.result-card,
.image-preview-item { background: #fff !important; border-color: #e1dce9 !important; }
.img-preview-card { background: #f5f2fa !important; }
.progress-track { background: #e8e3f2 !important; }
.progress-fill { background: var(--gradient-primary) !important; }
.progress-label,
.history-toggle:hover,
.highlight-icon { color: #6558e8 !important; }
.spinner { border-color: rgba(101, 88, 232, 0.20) !important; border-top-color: #6558e8 !important; }
.studio-heading h1,
.panel-title,
.studio-label,
.upload-title,
.model-name,
.canvas-head h2,
.canvas-empty h3 { color: #2b2635 !important; }
.studio-heading p,
.studio-shell .upload-hint,
.prompt-meta,
.model-status,
.credit-line,
.canvas-head span,
.canvas-empty p { color: #817a8c !important; }
.studio-shell {
  background: #fff !important;
  border-color: #ddd8e7 !important;
  box-shadow: 0 24px 70px rgba(52,43,76,.13) !important;
}
.studio-rail {
  background: #f3f0f8 !important;
  border-color: #ded9e7 !important;
}
.rail-item { color: #817a8c !important; }
.rail-item:hover { color: #5145cd !important; background: #e9e5f4 !important; }
.rail-item.active { color: #fff !important; background: #6558e8 !important; }
.studio-panel,
.panel-actions {
  background: #fbfaff !important;
  border-color: #ded9e7 !important;
}
.studio-shell .panel-actions {
  background: #f1f5f3 !important;
  border-top-color: #d6e5dd !important;
}
.studio-shell .credit-line { color: #5f6f67 !important; }
.studio-shell .credit-line strong { color: #102019 !important; }
.studio-shell .generate-btn.quota-link,
.generate-btn.quota-link { cursor: pointer !important; opacity: 1 !important; }
.mode-tabs { background: #ede9f3 !important; }
.mode-tab { color: #7e7689 !important; }
.mode-tab.active { color: #312a45 !important; background: #fff !important; box-shadow: var(--shadow-sm) !important; }
.prompt-box,
.model-row,
.studio-shell .img-upload-area {
  background: #fff !important;
  border-color: #dcd7e6 !important;
}
.studio-shell .gen-card textarea#promptInput { color: #2b2635 !important; background: transparent !important; }
.studio-canvas {
  background: radial-gradient(circle at 50% 0%, rgba(101,88,232,.10), transparent 38%), #f4f2f8 !important;
}
.canvas-stage {
  border-color: #d9d4e2 !important;
  background-color: #ebe8f1 !important;
  background-image:
    linear-gradient(45deg,#f7f5fa 25%,transparent 25%),
    linear-gradient(-45deg,#f7f5fa 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f7f5fa 75%),
    linear-gradient(-45deg,transparent 75%,#f7f5fa 75%) !important;
}
.empty-orb {
  color: #6558e8 !important;
  background: linear-gradient(145deg,#eeeaff,#fff0ea) !important;
  border-color: #d9d2f2 !important;
  box-shadow: 0 16px 38px rgba(52,43,76,.10) !important;
}
.studio-shell .progress-container { background: rgba(255,255,255,.90) !important; }
.studio-shell .result-area { background: #f1eef5 !important; }
.below-fold { background: transparent !important; }

/* Realism enhancer */
.hero-section {
  background:
    radial-gradient(ellipse at center top, rgba(101, 88, 232, 0.11), transparent 58%),
    linear-gradient(180deg, #fbfaff 0%, #f7f6fb 100%) !important;
}
.top-banner {
  color: #4b3b2d !important;
  background: linear-gradient(90deg, #fff0d8, #ffe4ec, #eee9ff) !important;
}
.workspace .step-num { color: #fff !important; background: #6558e8 !important; }
.step-title,
.template-name,
.result-title { color: #2b2635 !important; }
.step-hint,
.upload-hint-sub,
.template-desc { color: #8b8497 !important; }
.template-card,
.result-panel,
.api-key-section,
.advanced-options {
  background: #fbfaff !important;
  border-color: #dfdae8 !important;
}
.template-card:hover { border-color: #a99ff0 !important; background: #f6f3ff !important; }
.template-card.selected {
  border-color: #6558e8 !important;
  background: #efedff !important;
  box-shadow: 0 0 0 3px rgba(101, 88, 232, 0.10) !important;
}
.template-preview { background: #edeaf3 !important; }
.upload-plus { color: #6558e8 !important; border-color: #6558e8 !important; background: #fff !important; }

/* Anime to real life */
:root {
  --atr-bg: #f7f6fb;
  --atr-surface: #ffffff;
  --atr-surface-2: #f5f2fa;
  --atr-surface-3: #ece8f4;
  --atr-text: #251f2f;
  --atr-muted: #726b7d;
  --atr-dim: #9992a4;
  --atr-line: rgba(54, 44, 72, 0.12);
  --atr-green: #6558e8;
  --atr-green-soft: #7668ea;
  --atr-green-dark: #5145cd;
  --atr-orange: #ff7a59;
  --atr-shadow: 0 28px 70px rgba(52, 43, 76, 0.13);
}
.atr-page { color: var(--atr-text); }
.atr-breadcrumb a,
.atr-kicker { color: #6558e8 !important; }
.atr-gradient-text {
  color: #211d2b !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.atr-hero-meta { color: #5f586a !important; }
.atr-workspace,
.atr-how-card,
.atr-compare-card,
.atr-faq details,
.atr-history-card {
  background: #fff !important;
  border-color: #dfdae8 !important;
  box-shadow: var(--shadow-sm);
}
.atr-workspace-head,
.atr-upload-side,
.atr-result,
.atr-history { background: #fbfaff !important; }
.atr-upload-preview { background: #eeeaf3 !important; }
.atr-preview-toolbar { color: #fff !important; background: rgba(43,38,53,.78) !important; }
.atr-control-label { color: #2b2635 !important; }
.atr-copy { color: #5145cd !important; background: #eeebff !important; }
.atr-status { color: #6e687b !important; background: #f6f3fa !important; border-color: #ddd8e7 !important; }
.atr-status.error { color: #b23a48 !important; background: #fff1f2 !important; border-color: #fecdd3 !important; }
.atr-status.success { color: #286f59 !important; background: #edf9f4 !important; border-color: #b9e4d4 !important; }
.atr-upload-board,
.atr-prompt-wrap textarea,
.atr-history-media,
.atr-result-frame { background: #f3f0f8 !important; border-color: #dcd6e7 !important; }
.atr-upload-title,
.atr-controls h2,
.atr-result-copy h2,
.atr-section-head h2,
.atr-showcase-copy h2,
.atr-faq-title h2,
.atr-faq summary,
.atr-how-body h3,
.atr-history-prompt { color: #2b2635 !important; }
.atr-preset,
.atr-history-action { color: #625b6e !important; background: #fff !important; border-color: #ddd8e7 !important; }
.atr-preset.active { color: #5145cd !important; background: #efedff !important; border-color: #bdb4f7 !important; }
.atr-section-soft { background: rgba(255,255,255,.46) !important; border-color: #e2deea !important; }
.atr-final-card { background: linear-gradient(135deg, #eeeaff, #fff1ea) !important; border-color: #ddd5f4 !important; }
.atr-result-frame { min-height: 420px; }

/* Watermark remover and Tailwind-heavy surfaces */
.bg-white,
.dark\:bg-gray-800,
.dark\:bg-gray-900 { background-color: #fff !important; }
.bg-gray-50 { background-color: #f8f7fb !important; }
.text-gray-900,
.text-gray-800,
.text-gray-700,
.dark\:text-white,
.dark\:text-gray-100,
.dark\:text-gray-200,
.dark\:text-gray-300 { color: #2b2635 !important; }
.text-gray-400,
.text-gray-500,
.text-gray-600,
.dark\:text-gray-400,
.dark\:text-gray-500 { color: #7d7588 !important; }
.dark\:border-gray-700,
.dark\:border-gray-600 { border-color: #ded9e7 !important; }
#uploadArea {
  color: #6558e8 !important;
  background: #f6f3ff !important;
  border-color: #a99ff0 !important;
}
.step-item { background: #fff !important; border-color: #e2deea !important; box-shadow: var(--shadow-sm); }
.faq-item { background: #fff !important; border-color: #e0dbe8 !important; }
.faq-item.open { background: #f8f6ff !important; border-color: #9e93ed !important; }
.faq-item span,
.faq-item p { color: #655e70 !important; }
.faq-item button > span { color: #2b2635 !important; }
.faq-icon { stroke: #6558e8 !important; }
.medium-zoom-overlay { background: rgba(245, 242, 250, 0.94) !important; }

/* Legal pages */
.page-wrapper { padding-top: 30px; }
.page-header { padding-top: 50px; }
.page-header h1,
.page-content h2 { color: #2b2635 !important; }
.page-content a { color: #6558e8 !important; text-underline-offset: 3px; }
.page-content {
  margin-bottom: 70px;
  padding: 42px clamp(22px, 5vw, 64px) 64px;
  background: rgba(255,255,255,.84);
  border: 1px solid #e2deea;
  border-radius: 28px;
  box-shadow: var(--shadow-md);
}

/* My Cube: retain its playful character, align its shell with the site palette */
#mc-perm,
#mc-loading,
#mc-app,
.mc-chat-overlay,
.mc-exp-overlay { background-color: #f8f6fc !important; }
.mc-intro-title,
.mc-genesis-title { color: #2b2635 !important; }
.mc-intro-kicker,
.mc-genesis-kicker { color: #6558e8 !important; }
.mc-intro-cta,
.mc-btn-primary,
.mc-genesis-summon,
.mc-idcard-confirm {
  color: #fff !important;
  background: linear-gradient(135deg, #6558e8, #9b6ee8 56%, #ff8b72) !important;
  box-shadow: 0 12px 28px rgba(101, 88, 232, 0.22) !important;
}
.mc-intro-step,
.mc-intro-realm,
.mc-pet-companion,
.mc-env-card,
.mc-exp-item,
.mc-chat-msg-card,
.mc-chat-msg-photo-card {
  background-color: #fff !important;
  border-color: #e4dfee !important;
  box-shadow: 0 8px 24px rgba(52, 43, 76, 0.06);
}
.mc-bottom-nav {
  background: rgba(255,255,255,.94) !important;
  border-color: #e1dce9 !important;
  box-shadow: 0 -8px 28px rgba(52, 43, 76, 0.06);
}
.mc-nav-tab.active { color: #5145cd !important; background: #eeebff !important; }

@media (max-width: 768px) {
  :root { --radius-xl: 22px; }
  .page-content { border-radius: 20px; margin-inline: 12px; }
  .gen-card,
  .generator-card { border-radius: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Emerald brand alignment: keep the light system consistent with SugarCube. */
:root {
  --primary: #10b981;
  --primary-dark: #087f5b;
  --primary-light: #34d399;
  --primary-hover: #059669;
  --success: #087f5b;
  --gradient-primary: linear-gradient(135deg, #059669 0%, #10b981 58%, #34d399 100%);
}

::selection { background: #10b981; }
:where(button, a, input, textarea, select, summary):focus-visible { outline-color: rgba(16, 185, 129, 0.24) !important; }
.generate-btn,
.download-btn,
.pricing-btn { background: var(--gradient-primary) !important; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.20) !important; }
.section-badge,
.hero-badge,
.gen-badge { color: #087f5b; background: #e8f8f0; border-color: #bfe7d3; }
.progress-fill { background: var(--gradient-primary) !important; }

sugarcube-header .sc-nav-link:hover,
sugarcube-header .sc-nav-trigger:hover,
sugarcube-header .sc-nav-trigger[aria-expanded="true"],
sugarcube-header .sc-nav-item.is-active > .sc-nav-trigger,
sugarcube-header .sc-nav-link.is-active { color: #075f46 !important; background: #eaf8f1 !important; }
sugarcube-header .sc-tool-link:hover,
sugarcube-header .sc-tool-link.is-active { background: #eef9f3 !important; border-color: #b9e2cc !important; }
sugarcube-header .sc-tool-link:hover .sc-tool-arrow { color: #10b981 !important; }
sugarcube-header .sc-cube-link { color: #087f5b !important; background: #edf9f3 !important; border-color: #bfe5d2 !important; }
sugarcube-header .sc-cube-link:hover,
sugarcube-header .sc-cube-link.is-active { color: #065f46 !important; background: #dff5e9 !important; }
sugarcube-header .sc-cube-dot { background: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.13) !important; }
sugarcube-header .gh-google-btn-desktop,
sugarcube-header .gh-google-btn-mobile { background: #10b981 !important; box-shadow: 0 8px 18px rgba(16,185,129,.2); }
.footer .lang-btn.active { background: #10b981 !important; }
.footer a:hover { color: #087f5b !important; }

.workspace .step-num,
.rail-item.active { background: #10b981 !important; }
.template-card.selected { border-color: #10b981 !important; background: #eaf8f1 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.10) !important; }
.upload-plus,
.progress-label,
.history-toggle:hover,
.highlight-icon { color: #087f5b !important; }

:root {
  --atr-green: #10b981;
  --atr-green-soft: #34d399;
  --atr-green-dark: #087f5b;
}
.atr-breadcrumb a,
.atr-kicker { color: #087f5b !important; }
.atr-copy { color: #087f5b !important; background: #e8f8f0 !important; }
.atr-preset.active { color: #087f5b !important; background: #eaf8f1 !important; border-color: #9ed7ba !important; }