:root {
  --nawor-black: #000000;
  --nawor-black-soft: #090909;
  --nawor-panel: #101010;
  --nawor-panel-raised: #171717;
  --nawor-red: #a60000;
  --nawor-red-bright: #c40000;
  --nawor-red-soft: #c40000;
  --nawor-white: #ffffff;
  --nawor-gray-100: #f3f3f3;
  --nawor-gray-300: #c8c8c8;
  --nawor-gray-500: #929292;
  --nawor-line: #ffffff24;
}

/* Shared dark brand foundation. Layout, sizing, glass, and motion stay untouched. */
html:not([data-theme="light"]) body {
  color: var(--nawor-white) !important;
  background: var(--nawor-black) !important;
}

html:not([data-theme="light"]) main,
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .chapter-hero,
html:not([data-theme="light"]) .content-card,
html:not([data-theme="light"]) .guide-page,
html:not([data-theme="light"]) .guide-visual,
html:not([data-theme="light"]) .welcome-paths,
html:not([data-theme="light"]) .friendly-hero,
html:not([data-theme="light"]) .faq-category,
html:not([data-theme="light"]) .search-dialog {
  border-color: var(--nawor-line) !important;
  background-color: var(--nawor-black-soft) !important;
  background-image: linear-gradient(145deg, #171717f2, #050505f5) !important;
}

html:not([data-theme="light"]) .site-header {
  border-color: #ffffff1c !important;
  background: #000000e8 !important;
}

html:not([data-theme="light"]) .guide-sidebar {
  border-color: #ffffff1c !important;
  background: linear-gradient(180deg, #090909, #000000) !important;
}

html:not([data-theme="light"]) .sidebar-intro,
html:not([data-theme="light"]) .note-card,
html:not([data-theme="light"]) .scan-journey,
html:not([data-theme="light"]) .friendly-note,
html:not([data-theme="light"]) .publish-panel {
  border-color: #a600006e !important;
  background: linear-gradient(145deg, #151515, #050505) !important;
}

html:not([data-theme="light"]) .visual-top,
html:not([data-theme="light"]) .guide-visual figcaption,
html:not([data-theme="light"]) .section-visual,
html:not([data-theme="light"]) .faq-item,
html:not([data-theme="light"]) .step-list li,
html:not([data-theme="light"]) .path-grid button,
html:not([data-theme="light"]) .scan-journey li,
html:not([data-theme="light"]) .mode-bar,
html:not([data-theme="light"]) .visual-styler,
html:not([data-theme="light"]) .styler-group,
html:not([data-theme="light"]) .social-studio,
html:not([data-theme="light"]) .module-tile,
html:not([data-theme="light"]) .status,
html:not([data-theme="light"]) pre,
html:not([data-theme="light"]) #preview {
  border-color: #ffffff20 !important;
  background-color: #0d0d0d !important;
  background-image: linear-gradient(145deg, #151515d9, #070707e8) !important;
}

html:not([data-theme="light"]) .visual-media {
  background: #050505 !important;
}

html:not([data-theme="light"]) p,
html:not([data-theme="light"]) .content-card p,
html:not([data-theme="light"]) .content-card li,
html:not([data-theme="light"]) .faq-item p,
html:not([data-theme="light"]) .page-content p {
  color: var(--nawor-gray-300) !important;
}

.eyebrow,
.chapter-number,
.brand-section,
.sidebar-intro > span,
.module-kicker,
.visual-top span,
.hud-photo figcaption span,
.guide-visual figcaption a,
.section-visual figcaption a,
.path-grid strong,
.step b,
.arrow,
.note a {
  color: var(--nawor-red-soft) !important;
}

.brand-slash,
.nav-item.active::before,
.progress-track i,
.visual-keys i,
.friendly-note > span {
  background: var(--nawor-red) !important;
}

.hero h1 em {
  color: var(--nawor-white) !important;
  background: none !important;
  -webkit-text-fill-color: var(--nawor-white) !important;
}

button:not(.secondary):not(.theme-toggle):not(.search-trigger):not(.nav-item):not(.page-actions button):not(.chapter-links button):not(.path-grid button):not(.social-destination):not(.styler-choice):not(.demo-tier),
.primary-action,
.button:not(.secondary) {
  border-color: #d12323 !important;
  background: linear-gradient(145deg, var(--nawor-red-bright), #750000) !important;
  box-shadow: inset 0 1px #ffffff36, 0 9px 24px #7d00004a !important;
  color: #ffffff !important;
}

button.active,
.segmented button.active,
.styler-choice.active,
.social-destination.active,
.nav-item.active {
  border-color: #c40000 !important;
  background-color: #121212 !important;
  background-image: linear-gradient(135deg, #171717, #050505) !important;
  box-shadow: inset 4px 0 var(--nawor-red) !important;
  color: #ffffff !important;
}

a,
#preview a,
.qr-card a,
.qr-card button {
  text-decoration-color: #a600006f;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--nawor-red);
}

/* Light mode follows the website's white header and black/red content language. */
[data-theme="light"] body {
  color: #111111 !important;
  background: #ffffff !important;
}

[data-theme="light"] .site-header {
  border-color: #00000020 !important;
  background: #fffffff2 !important;
}

[data-theme="light"] .guide-sidebar {
  border-color: #0000001f !important;
  background: #f7f7f7 !important;
}

[data-theme="light"] main,
[data-theme="light"] .card,
[data-theme="light"] .chapter-hero,
[data-theme="light"] .content-card,
[data-theme="light"] .guide-page,
[data-theme="light"] .guide-visual,
[data-theme="light"] .welcome-paths,
[data-theme="light"] .friendly-hero,
[data-theme="light"] .faq-category,
[data-theme="light"] .search-dialog,
[data-theme="light"] .visual-top,
[data-theme="light"] .guide-visual figcaption,
[data-theme="light"] .section-visual,
[data-theme="light"] .faq-item,
[data-theme="light"] .step-list li,
[data-theme="light"] .path-grid button,
[data-theme="light"] .scan-journey li,
[data-theme="light"] .mode-bar,
[data-theme="light"] .visual-styler,
[data-theme="light"] .styler-group,
[data-theme="light"] .social-studio,
[data-theme="light"] .module-tile,
[data-theme="light"] pre,
[data-theme="light"] #preview {
  border-color: #00000020 !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(145deg, #ffffff, #f2f2f2) !important;
  box-shadow: inset 0 1px #ffffff, 0 16px 42px #00000012 !important;
}

[data-theme="light"] .sidebar-intro,
[data-theme="light"] .note-card,
[data-theme="light"] .scan-journey,
[data-theme="light"] .friendly-note,
[data-theme="light"] .publish-panel {
  border-color: #a6000045 !important;
  background: linear-gradient(145deg, #ffffff, #f1f1f1) !important;
}

[data-theme="light"] .visual-media {
  background: #f3f3f3 !important;
}

[data-theme="light"] .hero h1 em {
  color: #a60000 !important;
  -webkit-text-fill-color: #a60000 !important;
}

[data-theme="light"] p,
[data-theme="light"] .content-card p,
[data-theme="light"] .content-card li,
[data-theme="light"] .faq-item p,
[data-theme="light"] .page-content p {
  color: #4d4d4d !important;
}

/* Remove legacy pink/maroon washes from feature panels and overlays. */
html:not([data-theme="light"]) body.studio-mode,
html:not([data-theme="light"]) .social-ad-space,
html:not([data-theme="light"]) .social-demo-ad-space,
html:not([data-theme="light"]) .demo-toolbar,
html:not([data-theme="light"]) .demo-addon-guide,
html:not([data-theme="light"]) .demo-feature-overlay,
html:not([data-theme="light"]) .attachment-map,
html:not([data-theme="light"]) .attachment-debugger,
html:not([data-theme="light"]) .debug-item-card,
html:not([data-theme="light"]) .debug-inline-review,
html:not([data-theme="light"]) .debug-launch-card,
html:not([data-theme="light"]) .publish-panel,
html:not([data-theme="light"]) .module-tile.unlocked,
html:not([data-theme="light"]) .styler-choice-sample,
html:not([data-theme="light"]) .generated-tag,
html:not([data-theme="light"]) .social-destination.active,
html:not([data-theme="light"]) .hashtag-source.active,
html:not([data-theme="light"]) .guide-visual:has(img[src*="/addon-"]) .visual-media {
  background-color: #090909 !important;
  background-image: linear-gradient(145deg, #171717, #050505) !important;
  border-color: #a6000066 !important;
}

html:not([data-theme="light"]) .social-ad-mark,
html:not([data-theme="light"]) .demo-toggle-card[aria-checked="true"] .demo-addon-switch::after,
html:not([data-theme="light"]) .mannequin-option.active {
  background: #111111 !important;
  border-color: var(--nawor-red) !important;
  box-shadow: inset 0 0 0 1px #ffffff14 !important;
}

html:not([data-theme="light"]) main::before {
  background: linear-gradient(110deg, #ffffff0d, transparent 30%) !important;
}

.ambient-one,
.ambient-two,
.hero-orbit {
  background-color: var(--nawor-red) !important;
  background-image: none !important;
  opacity: 0.08 !important;
}

.nawor-slash,
.step-list li::before,
.scan-journey li:not(:last-child)::after,
.faq-category > summary::after,
.faq-item > summary::after,
.path-grid i,
.demo-tier.active small {
  background-color: var(--nawor-red) !important;
  background-image: none !important;
}

.avatar-halo {
  fill: transparent !important;
}

.avatar-guide,
.avatar-centerline,
.debug-item-line {
  stroke: var(--nawor-red) !important;
}

.debug-joint {
  stroke: var(--nawor-red-bright) !important;
}

.demo-toolbar-copy .demo-plan-kicker,
.demo-only-note,
.social-ad-cta,
.demo-addon-guide b,
.social-hashtag-output,
.generated-tag::after,
.tag-restore,
.debug-item-chevron,
.bom-profile-label,
.publish-status.error,
.error,
.qr-card a,
.qr-card button {
  color: var(--nawor-red-bright) !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
}

[data-theme="light"] body.studio-mode,
[data-theme="light"] .social-ad-space,
[data-theme="light"] .social-demo-ad-space,
[data-theme="light"] .demo-toolbar,
[data-theme="light"] .demo-addon-guide,
[data-theme="light"] .demo-feature-overlay,
[data-theme="light"] .attachment-map,
[data-theme="light"] .attachment-debugger,
[data-theme="light"] .debug-item-card,
[data-theme="light"] .debug-inline-review,
[data-theme="light"] .debug-launch-card,
[data-theme="light"] .publish-panel,
[data-theme="light"] .module-tile.unlocked,
[data-theme="light"] .styler-choice-sample,
[data-theme="light"] .generated-tag,
[data-theme="light"] .social-destination.active,
[data-theme="light"] .hashtag-source.active {
  background-color: #ffffff !important;
  background-image: linear-gradient(145deg, #ffffff, #eeeeee) !important;
  border-color: #a6000055 !important;
}

html:not([data-theme="light"]) .demo-tier-switch {
  padding: 6px !important;
  border: 1px solid #ffffff2b !important;
  border-radius: 15px !important;
  background: #050505 !important;
  box-shadow: inset 0 1px #ffffff12 !important;
}

html:not([data-theme="light"]) .demo-tier.active {
  color: #ffffff !important;
  border-color: #d00000 !important;
  background: linear-gradient(135deg, #c00000, #760000) !important;
  box-shadow: inset 0 1px #ffffff2b, 0 7px 18px #00000066 !important;
}

[data-theme="light"] .demo-tier-switch {
  padding: 6px !important;
  border: 1px solid #1111112b !important;
  border-radius: 15px !important;
  background: #e8e8e8 !important;
  box-shadow: inset 0 1px #ffffff !important;
}

[data-theme="light"] .demo-tier.active {
  color: #ffffff !important;
  border-color: #9f0000 !important;
  background: linear-gradient(135deg, #c00000, #8d0000) !important;
  box-shadow: inset 0 1px #ffffff38, 0 6px 15px #7300002e !important;
}

[data-theme="light"] .demo-tier.active small {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Demo controls retain the original polished switch language in the
   current black, white, and deep-red brand palette. */
.demo-tier-switch {
  gap: 4px !important;
  padding: 5px !important;
  border-radius: 17px !important;
}

.demo-tier {
  position: relative;
  min-height: 62px !important;
  padding: 10px 16px 10px 18px !important;
  overflow: hidden;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease !important;
}

.demo-tier::before {
  content: '';
  position: absolute;
  inset: 9px auto 9px 7px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}

.demo-tier:hover { transform: translateY(-1px); }

html:not([data-theme="light"]) .demo-tier.active {
  border-color: #b400006b !important;
  background: linear-gradient(135deg, #1b1b1b, #120606) !important;
  box-shadow: inset 0 1px #ffffff14, 0 7px 18px #00000052 !important;
}

.demo-tier.active::before {
  background: var(--nawor-red);
  box-shadow: 0 0 11px #d000006b;
}

.demo-tier.active small {
  color: #e8e8e8 !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
}

.demo-toggle-card {
  border-color: #ffffff1f !important;
  background: linear-gradient(145deg, #151515, #080808) !important;
  box-shadow: inset 0 1px #ffffff10, 0 8px 20px #0000002e !important;
}

.demo-toggle-card[aria-checked="true"] {
  border-color: #b400006b !important;
  background: linear-gradient(145deg, #191919, #100505) !important;
}

.demo-addon-switch {
  color: #929292 !important;
  background: transparent !important;
  background-image: none !important;
  border-top-color: #ffffff14 !important;
}

.demo-addon-switch::after {
  width: 34px !important;
  height: 18px !important;
  flex: 0 0 34px;
  border: 1px solid #ffffff2b !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 9px 50%, #d6d6d6 0 5px, transparent 5.7px), #161616 !important;
  box-shadow: inset 0 1px #ffffff0d, 0 2px 6px #00000066 !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.demo-toggle-card[aria-checked="true"] .demo-addon-switch {
  color: #f1f1f1 !important;
}

html:not([data-theme="light"]) .demo-toggle-card[aria-checked="true"] .demo-addon-switch::after {
  border-color: #d00000 !important;
  background: radial-gradient(circle at calc(100% - 9px) 50%, #ffffff 0 5px, transparent 5.7px), #8e0000 !important;
  box-shadow: inset 0 1px #ffffff20, 0 0 10px #b4000045 !important;
}

[data-theme="light"] .demo-tier {
  color: #595959 !important;
}

[data-theme="light"] .demo-tier.active {
  color: #111111 !important;
  border-color: #9f00004f !important;
  background: linear-gradient(145deg, #ffffff, #f4eeee) !important;
  box-shadow: inset 0 1px #ffffff, 0 6px 15px #7300001c !important;
}

[data-theme="light"] .demo-tier.active small {
  color: #555555 !important;
  -webkit-text-fill-color: #555555 !important;
}

[data-theme="light"] .demo-toggle-card {
  border-color: #17171720 !important;
  background: linear-gradient(145deg, #ffffff, #f2f2f2) !important;
  box-shadow: inset 0 1px #ffffff, 0 7px 18px #2b2b2b12 !important;
}

[data-theme="light"] .demo-toggle-card[aria-checked="true"] {
  border-color: #9f000055 !important;
  background: linear-gradient(145deg, #ffffff, #f7eeee) !important;
}

[data-theme="light"] .demo-addon-switch {
  color: #646464 !important;
  border-top-color: #11111115 !important;
}

[data-theme="light"] .demo-addon-switch::after {
  border-color: #1111112e !important;
  background: radial-gradient(circle at 9px 50%, #ffffff 0 5px, transparent 5.7px), #b7b7b7 !important;
  box-shadow: inset 0 1px #ffffff80, 0 2px 5px #2222221f !important;
}

[data-theme="light"] .demo-toggle-card[aria-checked="true"] .demo-addon-switch::after {
  border-color: #9f0000 !important;
  background: radial-gradient(circle at calc(100% - 9px) 50%, #ffffff 0 5px, transparent 5.7px), #a60000 !important;
  box-shadow: inset 0 1px #ffffff28, 0 0 8px #a6000038 !important;
}

[data-theme="light"] .social-demo-banner,
[data-theme="light"] .social-demo-ad-space,
[data-theme="light"] .social-ad-brand,
[data-theme="light"] .social-ad-copy,
[data-theme="light"] .social-ad-mark,
[data-theme="light"] .social-ad-cta {
  background-image: none !important;
}

[data-theme="light"] .demo-home {
  color: #111111 !important;
  background: #ffffff !important;
  border-color: #00000026 !important;
  box-shadow: inset 0 1px #ffffff, 0 10px 26px #00000012 !important;
}

[data-theme="light"] .demo-home svg {
  stroke: var(--nawor-red) !important;
}

[data-theme="light"] .social-demo-ad-space {
  background: #ffffff !important;
  border-color: #a6000055 !important;
  box-shadow: inset 0 1px #ffffff, 0 12px 30px #00000014 !important;
}

[data-theme="light"] .social-ad-mark {
  color: #ffffff !important;
  background: var(--nawor-red) !important;
  border-color: var(--nawor-red) !important;
}

[data-theme="light"] .social-ad-copy b {
  color: #111111 !important;
}

[data-theme="light"] .social-ad-copy span {
  color: #555555 !important;
}

[data-theme="light"] .social-ad-cta {
  color: var(--nawor-red) !important;
  border-color: #a6000066 !important;
  background: #ffffff !important;
}

[data-theme="light"] .demo-toggle-card[aria-checked="true"] .demo-addon-switch::after,
[data-theme="light"] .mannequin-option.active {
  background: #ffffff !important;
  border-color: var(--nawor-red) !important;
  box-shadow: inset -12px 0 var(--nawor-red) !important;
}

[data-theme="light"] .demo-toggle-card[aria-checked="true"] .demo-addon-switch,
[data-theme="light"] .styler-tier-premium,
[data-theme="light"] .module-kicker,
[data-theme="light"] .eyebrow,
[data-theme="light"] .visual-top span {
  color: var(--nawor-red) !important;
}

/* Keep the Social Media Studio platform rail inside its rounded workspace. */
html:not([data-theme="light"]) body.studio-mode .social-studio,
[data-theme="light"] body.studio-mode .social-studio {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.studio-mode .social-studio-body {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: transparent !important;
}

.studio-mode .social-demo-ad-space,
.studio-mode .social-destination-grid,
.studio-mode .social-tool-card {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
}

.studio-mode .social-demo-ad-space {
  clip-path: inset(0 round 15px);
}

.studio-mode .social-destination-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 !important;
  padding: 8px;
  border: 1px solid #ffffff20;
  border-radius: 14px;
  background: #090909 !important;
  background-image: none !important;
  clip-path: inset(0 round 14px);
}

.studio-mode .social-destination {
  max-width: 100%;
  box-sizing: border-box;
}

.studio-mode .social-studio-tools {
  min-width: 0;
  background: transparent !important;
}

.studio-mode .social-tool-card {
  box-sizing: border-box;
  max-width: 100%;
  background: #090909 !important;
  background-image: none !important;
  clip-path: inset(0 round 13px);
}

[data-theme="light"] .studio-mode .social-destination-grid {
  border-color: #00000020;
  background: #f3f3f3 !important;
}

[data-theme="light"] .studio-mode .social-tool-card {
  border-color: #00000020 !important;
  background: #ffffff !important;
}

@media (max-width: 760px) {
  body.studio-mode {
    padding: 10px !important;
  }

  .studio-mode main {
    box-sizing: border-box !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-inline: auto !important;
  }

  .studio-mode .workspace-frame,
  .studio-mode .workspace-frame.styler-open {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

[data-theme="light"] main::before {
  background: linear-gradient(110deg, #00000008, transparent 30%) !important;
}