:root {
  color-scheme: dark;
  --bg: #07080b;
  --bg-accent: #0d0f14;
  --surface: #12151c;
  --surface-2: #181c25;
  --surface-3: #202633;
  --text: #eceef6;
  --muted: #a9afbf;
  --border: #2a3140;
  --border-soft: #222938;
  --link: #b4c5ff;
  --link-hover: #d2dcff;
  --primary: #7f5dff;
  --primary-hover: #9274ff;
  --primary-active: #6e4af5;
  --primary-soft: rgba(127, 93, 255, 0.2);
  --focus: #bfaeff;
  --success: #2bc48a;
  --danger: #ff6b7d;
  --overlay: rgba(5, 6, 9, 0.72);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.44);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

html,
body {
  background:
    radial-gradient(1200px 420px at 20% -20%, rgba(127, 93, 255, 0.14), transparent 56%),
    radial-gradient(900px 380px at 100% 0%, rgba(64, 83, 255, 0.08), transparent 58%),
    var(--bg) !important;
  color: var(--text) !important;
}

body,
input,
textarea,
select,
button {
  color: var(--text) !important;
}

* {
  border-color: var(--border);
}

a {
  color: var(--link) !important;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: var(--link-hover) !important;
}

/* Core shell */
#nc-root,
#nc-app,
[id^="nc-"] {
  background: transparent !important;
  color: var(--text) !important;
}

body header,
body nav,
body main,
body [class^="nc-"],
body [class*=" nc-"],
#nc-root [class*="css-"],
#nc-app [class*="css-"],
#nc-root [class*="Mui"],
#nc-app [class*="Mui"] {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Header and sidebar */
#nc-root [role="banner"],
#nc-root [role="toolbar"],
#nc-app [role="banner"],
#nc-app [role="toolbar"],
body [class*="TopBar"],
body [class*="topbar"],
body [class*="AppHeader"],
body [class*="appHeader"] {
  background: linear-gradient(180deg, #171b25 0%, #141823 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

#nc-root [role="navigation"],
#nc-app [role="navigation"],
body [class*="Sidebar"],
body [class*="sidebar"],
body [class*="CollectionSidebar"],
body [class*="collectionSidebar"] {
  background: linear-gradient(180deg, #11141c 0%, #0f1219 100%) !important;
  border-right: 1px solid var(--border-soft) !important;
}

/* Cards, panels and content blocks */
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="Panel"],
article,
section,
aside,
body [class*="Widget"],
body [class*="widget"],
body [class*="Control"],
body [class*="control"],
body [class*="Field"],
body [class*="field"] {
  background: linear-gradient(180deg, var(--surface) 0%, #11151d 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body main,
body [class*="Main"],
body [class*="main"],
body [class*="Editor"],
body [class*="editor"] {
  gap: 14px;
}

/* Comfortable spacing in common Decap wrappers */
body [class*="Widget"],
body [class*="Control"],
body [class*="Field"],
body [class*="List"],
body [class*="EditorPane"],
body [class*="editorPane"] {
  padding: 10px;
}

/* Tables and lists */
table,
[class*="table"],
[class*="Table"],
ul,
ol,
body [class*="List"],
body [class*="list"] {
  background: #10141c !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}

thead,
[class*="header"],
[class*="Header"] {
  background: #171d28 !important;
}

tbody tr,
li,
body [class*="Row"],
body [class*="row"] {
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

tbody tr:nth-child(odd),
li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

tbody tr:hover,
li:hover,
[class*="row"]:hover,
[class*="Row"]:hover {
  background: rgba(127, 93, 255, 0.13) !important;
}

/* Buttons */
button,
[role="button"],
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
#nc-root [class*="css-"] button,
#nc-app [class*="css-"] button {
  background: linear-gradient(180deg, var(--surface-2) 0%, #171c26 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  min-height: 36px;
  padding: 0 14px;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

button:hover,
[role="button"]:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: linear-gradient(180deg, #262d3b 0%, #1d2431 100%) !important;
  border-color: #3a4356 !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}

button:active,
[role="button"]:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm) !important;
}

button[class*="primary"],
[class*="primary"] button,
button[class*="Primary"],
[class*="Primary"] button,
input[type="submit"] {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-active) 100%) !important;
  border-color: #6f4df0 !important;
  color: #fbfaff !important;
}

button[class*="primary"]:hover,
[class*="primary"] button:hover,
button[class*="Primary"]:hover,
[class*="Primary"] button:hover,
input[type="submit"]:hover {
  background: linear-gradient(180deg, var(--primary-hover) 0%, #7a5cf2 100%) !important;
  border-color: #8163ff !important;
}

/* Form controls */
input,
textarea,
select,
body [class*="Input"],
body [class*="Select"],
body [class*="input"],
body [class*="select"] {
  background: linear-gradient(180deg, #10141c 0%, #0f131b 100%) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  min-height: 40px;
  padding: 8px 12px;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

textarea {
  min-height: 140px;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}

input:hover,
textarea:hover,
select:hover {
  border-color: #374059 !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
[role="button"]:focus {
  outline: 2px solid var(--focus) !important;
  outline-offset: 1px;
  border-color: #9f86ff !important;
  box-shadow: 0 0 0 3px rgba(127, 93, 255, 0.22) !important;
}

/* Markdown/editor */
body [class*="Editor"],
body [class*="editor"],
body [class*="Markdown"],
body [class*="markdown"],
body [class*="Toolbar"],
body [class*="toolbar"] {
  background: linear-gradient(180deg, #131822 0%, #10151e 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body [class*="Editor"] iframe,
body [class*="editor"] iframe,
body [class*="Markdown"] iframe,
body [class*="markdown"] iframe,
body [class*="Editor"] [contenteditable="true"],
body [class*="editor"] [contenteditable="true"],
body [class*="Markdown"] [contenteditable="true"],
body [class*="markdown"] [contenteditable="true"] {
  background: #0f131b !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}

/* Modals */
[class*="modal"],
[class*="Modal"],
[role="dialog"] {
  background: linear-gradient(180deg, #181d28 0%, #141a24 100%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

[class*="overlay"],
[class*="Overlay"],
[aria-modal="true"] {
  background: var(--overlay) !important;
  backdrop-filter: blur(2px);
}

/* Neutralize inline white backgrounds that Decap may inject */
body [style*="background: white"],
body [style*="background:white"],
body [style*="background-color: white"],
body [style*="background-color:white"],
body [style*="background: rgb(255, 255, 255)"],
body [style*="background:rgb(255,255,255)"],
body [style*="background-color: rgb(255, 255, 255)"],
body [style*="background-color:rgb(255,255,255)"],
body [style*="background:#fff"],
body [style*="background: #fff"],
body [style*="background-color:#fff"],
body [style*="background-color: #fff"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Scrollbars */
*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: #0c1017;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #394155 0%, #2f3647 100%);
  border-radius: 999px;
  border: 2px solid #0c1017;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4a5470 0%, #3a435a 100%);
}