:root {
  --r2-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r2-bg: #f8f7f3;
  --r2-bg-2: #efede6;
  --r2-ink: #181611;
  --r2-muted: #6c675d;
  --r2-soft: #8d8679;
  --r2-surface: rgba(255,255,255,.66);
  --r2-surface-solid: #fffefa;
  --r2-field: rgba(255,255,255,.74);
  --r2-line: rgba(38,33,24,.13);
  --r2-line-strong: rgba(38,33,24,.22);
  --r2-accent: #1e1a14;
  --r2-accent-hover: #3a3328;
  --r2-accent-muted: #ece6d9;
  --r2-shadow: 0 18px 54px rgba(40,34,24,.12);
  --r2-shadow-soft: 0 8px 24px rgba(40,34,24,.08);
  --r2-glass-edge: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(38,33,24,.04);
  --text-base: var(--r2-ink);
  --text-secondary: #3f3a32;
  --text-muted: var(--r2-muted);
  --text-highlight: var(--r2-accent);
  --primary-soft: var(--r2-accent-muted);
  --surface-base: var(--r2-bg);
  --surface-lower: var(--r2-bg-2);
  --surface-raised: var(--r2-surface-solid);
  --surface-subtle: #f1eee7;
  --neutral-50: var(--r2-bg);
  --border-default: rgba(38,33,24,.14);
  --border-intense: rgba(38,33,24,.28);
  --btn-primary: var(--r2-accent);
  --btn-primary-hover: var(--r2-accent-hover);
  --btn-subtle-hover: rgba(38,33,24,.07);
  --background: 42 27% 96%;
  --foreground: 38 20% 8%;
  --card: 42 30% 99%;
  --card-foreground: 38 20% 8%;
  --popover: 42 30% 99%;
  --popover-foreground: 38 20% 8%;
  --primary: 38 20% 10%;
  --primary-foreground: 42 30% 99%;
  --secondary: 42 20% 91%;
  --secondary-foreground: 38 20% 12%;
  --muted: 42 18% 91%;
  --muted-foreground: 35 8% 43%;
  --accent: 42 20% 91%;
  --accent-foreground: 38 20% 12%;
  --ring: 38 20% 20%;
  --sidebar-background: 42 30% 98%;
  --sidebar-foreground: 35 8% 43%;
  --sidebar-primary: 38 20% 10%;
  --sidebar-primary-foreground: 42 30% 99%;
  --sidebar-accent: 42 20% 92%;
  --sidebar-accent-foreground: 38 20% 12%;
  --sidebar-border: 38 15% 84%;
  --sidebar-ring: 38 20% 20%;
  --color-bg-primary: var(--r2-surface-solid);
  --color-bg-secondary: #f8f6ef;
  --color-bg-tertiary: #f1eee7;
  --color-bg-inverse: var(--r2-accent);
  --color-brand-primary: var(--r2-accent);
  --color-brand-secondary: var(--r2-accent-hover);
  --color-brand-hover: var(--r2-accent-hover);
  --color-brand-pressed: #0f0d0a;
  --color-brand-subtle: var(--r2-accent-muted);
  --color-text-primary: var(--r2-ink);
  --color-text-secondary: #504a40;
  --color-text-tertiary: var(--r2-muted);
  --color-text-inverse: #fffefa;
  --color-text-brand: var(--r2-accent);
  --color-border-primary: rgba(38,33,24,.13);
  --color-border-secondary: rgba(38,33,24,.22);
  --color-border-focus: var(--r2-accent);
  --ds-ring: var(--r2-accent);
  --tw-ring-color: rgba(38,33,24,.28);
}

html.dark,
html.r2-theme-dark {
  --r2-bg: #0f0f0d;
  --r2-bg-2: #171510;
  --r2-ink: #f6f0e5;
  --r2-muted: #b5aa98;
  --r2-soft: #8d8271;
  --r2-surface: rgba(30,28,23,.68);
  --r2-surface-solid: #1b1915;
  --r2-field: rgba(31,29,24,.76);
  --r2-line: rgba(246,240,229,.13);
  --r2-line-strong: rgba(246,240,229,.24);
  --r2-accent: #f1e8d8;
  --r2-accent-hover: #fff7ea;
  --r2-accent-muted: rgba(241,232,216,.12);
  --r2-shadow: 0 18px 58px rgba(0,0,0,.34);
  --r2-shadow-soft: 0 8px 26px rgba(0,0,0,.24);
  --r2-glass-edge: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.20);
  --text-base: var(--r2-ink);
  --text-secondary: #ded6c8;
  --text-muted: var(--r2-muted);
  --text-highlight: var(--r2-accent);
  --primary-soft: var(--r2-accent-muted);
  --surface-base: #11100d;
  --surface-lower: #0b0b09;
  --surface-raised: var(--r2-surface-solid);
  --surface-subtle: #232018;
  --neutral-50: #15130f;
  --border-default: rgba(246,240,229,.13);
  --border-intense: rgba(246,240,229,.26);
  --btn-primary: var(--r2-accent);
  --btn-primary-hover: var(--r2-accent-hover);
  --btn-subtle-hover: rgba(246,240,229,.09);
  --background: 45 8% 6%;
  --foreground: 39 35% 93%;
  --card: 40 13% 9%;
  --card-foreground: 39 35% 93%;
  --popover: 40 13% 9%;
  --popover-foreground: 39 35% 93%;
  --primary: 39 35% 90%;
  --primary-foreground: 45 8% 6%;
  --secondary: 40 12% 14%;
  --secondary-foreground: 39 35% 93%;
  --muted: 40 12% 14%;
  --muted-foreground: 38 15% 66%;
  --accent: 40 12% 15%;
  --accent-foreground: 39 35% 93%;
  --ring: 39 35% 82%;
  --sidebar-background: 45 8% 7%;
  --sidebar-foreground: 38 15% 70%;
  --sidebar-primary: 39 35% 90%;
  --sidebar-primary-foreground: 45 8% 6%;
  --sidebar-accent: 40 12% 15%;
  --sidebar-accent-foreground: 39 35% 93%;
  --sidebar-border: 40 12% 18%;
  --sidebar-ring: 39 35% 82%;
  --color-bg-primary: #171510;
  --color-bg-secondary: #11100d;
  --color-bg-tertiary: #232018;
  --color-bg-inverse: #f6f0e5;
  --color-brand-primary: var(--r2-accent);
  --color-brand-secondary: var(--r2-accent-hover);
  --color-brand-hover: var(--r2-accent-hover);
  --color-brand-pressed: #d9ccb8;
  --color-brand-subtle: var(--r2-accent-muted);
  --color-text-primary: var(--r2-ink);
  --color-text-secondary: #ded6c8;
  --color-text-tertiary: var(--r2-muted);
  --color-text-inverse: #11100d;
  --color-text-brand: var(--r2-accent);
  --color-border-primary: rgba(246,240,229,.13);
  --color-border-secondary: rgba(246,240,229,.24);
  --color-border-focus: var(--r2-accent);
  --ds-ring: var(--r2-accent);
  --tw-ring-color: rgba(241,232,216,.34);
}

@media (max-width: 1023px) {
  :root {
    --rai-brand-50: var(--r2-accent-muted);
    --rai-brand-100: #e5decf;
    --rai-brand-200: #d8cfbd;
    --rai-brand-600: var(--r2-accent);
    --rai-brand-700: var(--r2-accent-hover);
    --rai-border-subtle: var(--r2-line);
    --rai-border-default: var(--r2-line-strong);
    --rai-fg-primary: var(--r2-ink);
    --rai-fg-secondary: var(--r2-muted);
    --rai-fg-tertiary: var(--r2-soft);
  }
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--r2-font) !important;
}

body #root,
body #root *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon),
.r2-app-editor-screen,
.r2-app-editor-screen *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon) {
  font-family: var(--r2-font) !important;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.72), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(70,58,37,.12), transparent 30%),
    linear-gradient(135deg, var(--r2-bg), var(--r2-bg-2)) !important;
  color: var(--r2-ink) !important;
}

[class*="text-text-base"],
[class*="text-color-text-primary"],
[class*="text-foreground"] {
  color: var(--r2-ink) !important;
}

[class*="text-text-secondary"],
[class*="text-color-text-secondary"] {
  color: var(--r2-muted) !important;
}

[class*="text-text-muted"],
[class*="text-text-tertiary"],
[class*="text-color-text-tertiary"],
[class*="text-muted-foreground"] {
  color: var(--r2-soft) !important;
}

[class*="bg-surface-raised"],
[class*="bg-surface-base"],
[class*="bg-card"],
[class*="bg-popover"] {
  background-color: var(--r2-surface-solid) !important;
  color: var(--r2-ink) !important;
}

[class*="bg-surface-subtle"],
[class*="bg-surface-lower"],
[class*="bg-muted"],
[class*="bg-secondary"] {
  background-color: var(--r2-bg-2) !important;
  color: var(--r2-ink) !important;
}

[class*="border-border"],
[class*="border-default"],
[class*="border-input"] {
  border-color: var(--r2-line) !important;
}

[class*="shadow-"] {
  --tw-shadow-color: rgba(40,34,24,.12) !important;
}

html.dark [class*="shadow-"],
html.r2-theme-dark [class*="shadow-"] {
  --tw-shadow-color: rgba(0,0,0,.34) !important;
}

aside,
[data-sidebar="sidebar"],
[class*="bg-sidebar"],
[class*="group/sidebar-wrapper"] {
  background: var(--r2-surface-solid) !important;
  color: var(--r2-ink) !important;
  border-color: var(--r2-line) !important;
}

html.dark body,
html.r2-theme-dark body {
  background:
    radial-gradient(circle at 12% 10%, rgba(241,232,216,.10), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(137,118,86,.12), transparent 34%),
    linear-gradient(135deg, #0b0b09, #171510 54%, #0f0f0d) !important;
}

button,
[role="button"],
a,
input,
select,
textarea {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--r2-accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--r2-accent-muted) !important;
}

.r2-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999998;
  min-width: 116px;
  height: 38px;
  border: 1px solid var(--r2-line);
  border-radius: 999px;
  background: var(--r2-surface);
  color: var(--r2-ink);
  box-shadow: var(--r2-shadow-soft), var(--r2-glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.r2-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--r2-line-strong);
}

.r2-theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--r2-accent);
  box-shadow: 0 0 0 4px var(--r2-accent-muted);
}

.r2-theme-icon {
  display: none;
}

.r2-app-editor-screen[hidden] {
  display: none !important;
}

.r2-app-editor-screen {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 18px 34px;
  color: var(--r2-ink);
}

.r2-app-editor-card,
.r2-project-editor-option {
  border: 1px solid var(--r2-line);
  border-radius: 16px;
  background: var(--r2-surface);
  box-shadow: var(--r2-shadow), var(--r2-glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
  overflow: hidden;
}

#r2ProjectEditorOption {
  display: none !important;
}

.r2-app-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--r2-line);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
}

html.dark .r2-app-editor-head,
html.r2-theme-dark .r2-app-editor-head {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.r2-app-kicker,
.r2-app-field label {
  margin-bottom: 6px;
  color: var(--r2-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.r2-app-editor-head h1 {
  margin: 0;
  color: var(--r2-ink);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.r2-app-editor-head p,
.r2-project-editor-option span {
  margin: 7px 0 0;
  max-width: 680px;
  color: var(--r2-muted);
  font-size: 13px;
  line-height: 1.55;
}

.r2-app-chip,
.r2-app-btn,
.r2-project-editor-option button,
.r2-side-editor-icon {
  background: var(--r2-accent);
  color: var(--r2-bg);
}

.r2-app-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--r2-shadow-soft);
}

.r2-app-editor-body {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: calc(100vh - 184px);
}

.r2-app-controls {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  border-right: 1px solid var(--r2-line);
  background: rgba(255,255,255,.22);
}

html.dark .r2-app-controls,
html.r2-theme-dark .r2-app-controls {
  background: rgba(255,255,255,.03);
}

.r2-app-field {
  display: grid;
  gap: 6px;
}

.r2-app-field select,
.r2-app-field textarea,
.r2-file-label {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--r2-line);
  border-radius: 10px;
  background: var(--r2-field);
  color: var(--r2-ink);
  outline: none;
  padding: 10px 11px;
  font-size: 13px;
}

.r2-app-field textarea {
  min-height: 108px;
  resize: vertical;
}

.r2-file-label {
  display: flex !important;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 750;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.r2-file-label input {
  display: none;
}

.r2-app-actions {
  display: grid;
  gap: 8px;
}

.r2-app-btn,
.r2-project-editor-option button {
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--r2-shadow-soft);
}

.r2-app-btn:hover,
.r2-project-editor-option button:hover {
  transform: translateY(-1px);
  background: var(--r2-accent-hover);
}

.r2-app-btn.secondary,
.r2-app-history button,
.r2-app-result-card button {
  background: var(--r2-field);
  color: var(--r2-ink);
  border: 1px solid var(--r2-line);
  box-shadow: none;
}

.r2-app-paid,
.r2-app-note,
.r2-app-history-item,
.r2-app-result-card {
  border: 1px solid var(--r2-line);
  border-radius: 12px;
  background: rgba(255,255,255,.42);
  color: var(--r2-muted);
}

html.dark .r2-app-paid,
html.dark .r2-app-note,
html.dark .r2-app-history-item,
html.dark .r2-app-result-card,
html.r2-theme-dark .r2-app-paid,
html.r2-theme-dark .r2-app-note,
html.r2-theme-dark .r2-app-history-item,
html.r2-theme-dark .r2-app-result-card {
  background: rgba(255,255,255,.04);
}

.r2-app-paid,
.r2-app-note {
  padding: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.r2-app-paid strong {
  display: block;
  margin-bottom: 4px;
  color: var(--r2-ink);
}

.r2-app-history {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.r2-app-history-item {
  padding: 4px;
}

.r2-app-history img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.r2-app-history button,
.r2-app-result-card button {
  width: 100%;
  height: 31px;
  margin-top: 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.r2-app-output {
  min-height: 86px;
  max-height: 154px;
  overflow: auto;
  border: 1px solid var(--r2-line);
  border-radius: 12px;
  background: #17140f;
  color: #f3ead8;
  padding: 10px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
}

.r2-app-result-card {
  margin-top: 10px;
  padding: 7px;
}

.r2-app-result-card img {
  width: 100%;
  border: 1px solid var(--r2-line);
  border-radius: 11px;
  background: var(--r2-surface-solid);
}

.r2-app-editor-wrap {
  min-width: 0;
  padding: 10px;
  background: rgba(255,255,255,.18);
}

html.dark .r2-app-editor-wrap,
html.r2-theme-dark .r2-app-editor-wrap {
  background: rgba(255,255,255,.025);
}

.r2-app-editor-box {
  height: calc(100vh - 220px);
  min-height: 600px;
  overflow: hidden;
  border: 1px solid var(--r2-line);
  border-radius: 12px;
  background: #111;
}

.r2-side-editor-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  padding: 9px 11px;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.r2-side-editor-item:hover,
.r2-side-editor-item.r2-active {
  background: var(--r2-accent-muted);
}

.r2-side-editor-icon {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
}

.r2-side-editor-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.r2-app-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 999999;
  transform: translateX(-50%);
  display: none;
  border: 1px solid var(--r2-line);
  border-radius: 999px;
  background: var(--r2-surface);
  color: var(--r2-ink);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--r2-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

.r2-app-toast.show {
  display: block;
}

.r2-project-editor-option {
  width: calc(100% - 36px);
  max-width: 1160px;
  margin: 0 auto 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--r2-ink);
}

.r2-project-editor-option strong {
  display: block;
  font-size: 14px;
  font-weight: 850;
}

#r2AppEditorBox,
#r2AppEditorBox * {
  --primary: var(--r2-accent) !important;
  --accent: var(--r2-accent) !important;
  --color-primary: var(--r2-accent) !important;
  --fie-primary-color: var(--r2-accent) !important;
  --accent-primary: var(--r2-accent) !important;
  accent-color: var(--r2-accent) !important;
}

#r2AppEditorBox button[style*="blue"],
#r2AppEditorBox button[style*="rgb(0"],
#r2AppEditorBox button[style*="rgb(25"],
#r2AppEditorBox button[style*="#00"],
#r2AppEditorBox button[style*="#2196"],
#r2AppEditorBox button[style*="#1976"],
#r2AppEditorBox [style*="#1976"],
#r2AppEditorBox [style*="#2196"],
#r2AppEditorBox [style*="rgb(25, 118, 210)"],
#r2AppEditorBox [style*="rgb(0, 122, 255)"],
#r2AppEditorBox .FIE_topbar-save-button,
#r2AppEditorBox .SfxButton-root,
#r2AppEditorBox button[style*="rgb(104, 121, 235)"],
#r2AppEditorBox [style*="rgb(104, 121, 235)"],
#r2AppEditorBox button[style*="#6879"],
#r2AppEditorBox [style*="#6879"] {
  background: var(--r2-accent) !important;
  background-color: var(--r2-accent) !important;
  border-color: var(--r2-accent) !important;
  color: var(--r2-bg) !important;
}

html.dark #r2AppEditorScreen,
html.r2-theme-dark #r2AppEditorScreen {
  color: #162033 !important;
}

html.dark #r2AppEditorScreen .r2-app-editor-card,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-card {
  background: #f8f5ee !important;
  border-color: rgba(31, 41, 55, .16) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, .34) !important;
}

html.dark #r2AppEditorScreen .r2-app-editor-head,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-head {
  background: linear-gradient(180deg, #fffdf8, #f2ede3) !important;
  border-color: rgba(31, 41, 55, .12) !important;
}

html.dark #r2AppEditorScreen .r2-app-editor-head h1,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-head h1 {
  color: #151412 !important;
}

html.dark #r2AppEditorScreen .r2-app-editor-head p,
html.dark #r2AppEditorScreen .r2-app-editor-head .r2-app-kicker,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-head p,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-head .r2-app-kicker {
  color: #6b665f !important;
}

html.dark #r2AppEditorScreen .r2-app-editor-body,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-body,
html.dark #r2AppEditorScreen .r2-app-editor-wrap,
html.r2-theme-dark #r2AppEditorScreen .r2-app-editor-wrap {
  background: #f3efe7 !important;
}

html.dark #r2AppEditorBox,
html.r2-theme-dark #r2AppEditorBox {
  background: #dcecff !important;
  border-color: rgba(37, 99, 235, .20) !important;
  color: #18324b !important;
}

html.dark #r2AppEditorBox *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(canvas):not(img),
html.r2-theme-dark #r2AppEditorBox *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(canvas):not(img) {
  color: #18324b !important;
}

html.dark #r2AppEditorBox button,
html.dark #r2AppEditorBox [role="button"],
html.r2-theme-dark #r2AppEditorBox button,
html.r2-theme-dark #r2AppEditorBox [role="button"] {
  background: #e8f3ff !important;
  border-color: rgba(37, 99, 235, .16) !important;
  color: #18324b !important;
}

html.dark #r2AppEditorBox button:hover,
html.dark #r2AppEditorBox [role="button"]:hover,
html.r2-theme-dark #r2AppEditorBox button:hover,
html.r2-theme-dark #r2AppEditorBox [role="button"]:hover {
  background: #dbeafe !important;
}

a[class*="bg-brand-50"],
a[class*="!text-primary"],
a[class*="peer/menu-button"],
button[class*="bg-brand-100"],
button[class*="hover:bg-primary"],
button[class*="hover:bg-surface"],
a[href*="consultations"],
a[href*="pricing"] button,
[class*="text-primary"],
[class*="text-brand"],
[class*="bg-primary"],
[class*="bg-brand"],
[class*="border-primary"],
[class*="ring-primary"] {
  border-color: var(--r2-line) !important;
  color: var(--r2-ink) !important;
}

[class*="bg-primary"],
[class*="bg-brand"] {
  background-color: var(--r2-accent-muted) !important;
}

.bg-hero-gradient {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(139,122,88,.62), rgba(87,74,52,.50) 24%, rgba(42,36,28,.96) 55%, #17140f 100%) !important;
  background-color: #17140f !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 48px rgba(40,34,24,.18), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

html.dark .bg-hero-gradient,
html.r2-theme-dark .bg-hero-gradient {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(241,232,216,.18), rgba(68,57,39,.28) 26%, rgba(20,18,14,.98) 58%, #090908 100%) !important;
  background-color: #090908 !important;
}

[class*="bg-blue"],
[class*="text-blue"],
[class*="border-blue"],
[class*="ring-blue"] {
  border-color: var(--r2-line) !important;
  color: var(--r2-ink) !important;
}

[class*="bg-blue"] {
  background-color: var(--r2-accent-muted) !important;
}

[class*="from-blue"],
[class*="via-blue"],
[class*="to-blue"] {
  background-image: linear-gradient(135deg, var(--r2-accent), var(--r2-accent-hover)) !important;
  color: var(--r2-bg) !important;
}

a[href*="consultations"] {
  background: var(--r2-surface) !important;
  border-color: var(--r2-line) !important;
  box-shadow: var(--r2-shadow-soft), var(--r2-glass-edge) !important;
  color: var(--r2-ink) !important;
}

a[class*="bg-brand-50"] svg,
a[class*="!text-primary"] svg,
button[class*="bg-brand-100"] svg,
button[class*="hover:bg-surface"] svg,
[class*="text-primary"] svg,
[class*="text-brand"] svg {
  color: var(--r2-ink) !important;
  stroke: currentColor !important;
}

button[data-step-3-button],
button[class*="bg-primary"][class*="text-white"],
a[class*="bg-primary"][class*="text-white"] {
  background: var(--r2-accent) !important;
  color: var(--r2-bg) !important;
  box-shadow: var(--r2-shadow-soft) !important;
}

@media (max-width: 980px) {
  .r2-app-editor-body {
    grid-template-columns: 1fr;
  }

  .r2-app-controls {
    border-right: 0;
    border-bottom: 1px solid var(--r2-line);
  }

  .r2-app-editor-box {
    height: 620px;
    min-height: 520px;
  }

  .r2-app-editor-head {
    flex-direction: column;
  }

  .r2-app-chip {
    align-self: flex-start;
  }

  .r2-theme-toggle {
    right: 12px;
    bottom: 12px;
  }
}

body #root main > div.sticky.top-0.z-10.flex.items-center.justify-between {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body #root main > div.sticky.top-0.z-10.flex.items-center.justify-between > img[alt="ArqAI"],
body #root main > div.sticky.top-0.z-10.flex.items-center.justify-between > img[src="/logo.png"] {
  display: none !important;
}

@media (min-width: 1024px) {
  body #root main > div.sticky.top-0.z-10.flex.items-center.justify-between {
    display: none !important;
  }

  body #root main > div.sticky.top-0.z-10.flex.items-center.justify-between > button[aria-label*="mode" i] {
    display: none !important;
  }

  #r2ThemeToggle.r2-theme-toggle--sidebar {
    position: static !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin-left: 6px !important;
    padding: 0 !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    background: rgba(38,33,24,.07) !important;
    border: 1px solid rgba(38,33,24,.10) !important;
    box-shadow: none !important;
    color: var(--r2-ink) !important;
    gap: 0 !important;
  }

  #r2ThemeToggle.r2-theme-toggle--sidebar:hover {
    background: rgba(38,33,24,.11) !important;
    transform: none !important;
  }

  #r2ThemeToggle.r2-theme-toggle--sidebar .r2-theme-dot {
    display: none !important;
  }

  #r2ThemeToggle.r2-theme-toggle--sidebar [data-r2-theme-label] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  #r2ThemeToggle.r2-theme-toggle--sidebar .r2-theme-icon {
    display: none;
    width: 18px;
    height: 18px;
  }

  #r2ThemeToggle.r2-theme-toggle--sidebar[aria-pressed="false"] .r2-theme-icon-moon,
  #r2ThemeToggle.r2-theme-toggle--sidebar[aria-pressed="true"] .r2-theme-icon-sun {
    display: block;
  }

  html.dark #r2ThemeToggle.r2-theme-toggle--sidebar,
  html.r2-theme-dark #r2ThemeToggle.r2-theme-toggle--sidebar {
    background: rgba(246,240,229,.10) !important;
    border-color: rgba(246,240,229,.14) !important;
    color: var(--r2-ink) !important;
  }
}