:root {
  --font-family-primary: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --survey-radius: 8px;
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --primary: #0f766e;
  --secondary: #2563eb;
  --accent: #0f766e;
  --primary-fg: #ffffff;

  --body-bg: #f4f7fb;
  --body-fg: #172033;
  --body-quiet-color: #64748b;
  --body-medium-color: #475569;
  --body-loud-color: #0f172a;

  --header-bg: #102033;
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-link-color: #dbeafe;

  --breadcrumbs-bg: #172a3f;
  --breadcrumbs-fg: #dbeafe;
  --breadcrumbs-link-fg: #ffffff;

  --link-fg: #0f766e;
  --link-hover-color: #2563eb;
  --link-selected-fg: #0f766e;

  --hairline-color: #e2e8f0;
  --border-color: #cbd5e1;
  --darkened-bg: #eef3f8;
  --selected-bg: #e2f5f2;
  --selected-row: #ecfdf5;

  --button-fg: #ffffff;
  --button-bg: #0f766e;
  --button-hover-bg: #115e59;
  --default-button-bg: #2563eb;
  --default-button-hover-bg: #1d4ed8;
  --close-button-bg: #475569;
  --close-button-hover-bg: #334155;
  --delete-button-bg: #dc2626;
  --delete-button-hover-bg: #b91c1c;
  --object-tools-fg: #ffffff;
  --object-tools-bg: #0f766e;
  --object-tools-hover-bg: #115e59;

  --message-success-bg: #dcfce7;
  --message-warning-bg: #fef3c7;
  --message-error-bg: #fee2e2;
  --error-fg: #b91c1c;

  --survey-surface: #ffffff;
  --survey-surface-muted: #f8fafc;
  --survey-input-bg: #ffffff;
  --survey-input-border: #cbd5e1;
  --survey-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --survey-focus: rgba(37, 99, 235, 0.18);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #0f766e;
  --secondary: #3b82f6;
  --accent: #2dd4bf;
  --primary-fg: #f8fafc;

  --body-bg: #0b1020;
  --body-fg: #e5edf7;
  --body-quiet-color: #9aa8ba;
  --body-medium-color: #cbd5e1;
  --body-loud-color: #ffffff;

  --header-bg: #0b1020;
  --header-color: #f8fafc;
  --header-branding-color: #ffffff;
  --header-link-color: #cbd5e1;

  --breadcrumbs-bg: #111827;
  --breadcrumbs-fg: #cbd5e1;
  --breadcrumbs-link-fg: #ffffff;

  --link-fg: #5eead4;
  --link-hover-color: #93c5fd;
  --link-selected-fg: #7dd3fc;

  --hairline-color: #243044;
  --border-color: #334155;
  --darkened-bg: #111827;
  --selected-bg: #172033;
  --selected-row: #12342f;

  --button-fg: #ffffff;
  --button-bg: #0f766e;
  --button-hover-bg: #0d9488;
  --default-button-bg: #2563eb;
  --default-button-hover-bg: #1d4ed8;
  --close-button-bg: #334155;
  --close-button-hover-bg: #475569;
  --delete-button-bg: #dc2626;
  --delete-button-hover-bg: #b91c1c;
  --object-tools-fg: #ffffff;
  --object-tools-bg: #0f766e;
  --object-tools-hover-bg: #0d9488;

  --message-success-bg: #064e3b;
  --message-warning-bg: #78350f;
  --message-error-bg: #7f1d1d;
  --error-fg: #fca5a5;

  --survey-surface: #111827;
  --survey-surface-muted: #0f172a;
  --survey-input-bg: #0b1220;
  --survey-input-border: #475569;
  --survey-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --survey-focus: rgba(59, 130, 246, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  html[data-theme="auto"] {
    color-scheme: dark;
    --primary: #0f766e;
    --secondary: #3b82f6;
    --accent: #2dd4bf;
    --primary-fg: #f8fafc;
    --body-bg: #0b1020;
    --body-fg: #e5edf7;
    --body-quiet-color: #9aa8ba;
    --body-medium-color: #cbd5e1;
    --body-loud-color: #ffffff;
    --header-bg: #0b1020;
    --header-color: #f8fafc;
    --header-branding-color: #ffffff;
    --header-link-color: #cbd5e1;
    --breadcrumbs-bg: #111827;
    --breadcrumbs-fg: #cbd5e1;
    --breadcrumbs-link-fg: #ffffff;
    --link-fg: #5eead4;
    --link-hover-color: #93c5fd;
    --link-selected-fg: #7dd3fc;
    --hairline-color: #243044;
    --border-color: #334155;
    --darkened-bg: #111827;
    --selected-bg: #172033;
    --selected-row: #12342f;
    --button-fg: #ffffff;
    --button-bg: #0f766e;
    --button-hover-bg: #0d9488;
    --default-button-bg: #2563eb;
    --default-button-hover-bg: #1d4ed8;
    --close-button-bg: #334155;
    --close-button-hover-bg: #475569;
    --delete-button-bg: #dc2626;
    --delete-button-hover-bg: #b91c1c;
    --object-tools-fg: #ffffff;
    --object-tools-bg: #0f766e;
    --object-tools-hover-bg: #0d9488;
    --message-success-bg: #064e3b;
    --message-warning-bg: #78350f;
    --message-error-bg: #7f1d1d;
    --error-fg: #fca5a5;
    --survey-surface: #111827;
    --survey-surface-muted: #0f172a;
    --survey-input-bg: #0b1220;
    --survey-input-border: #475569;
    --survey-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --survey-focus: rgba(59, 130, 246, 0.28);
  }
}

html,
body {
  background: var(--body-bg);
}

body {
  color: var(--body-fg);
  font-family: var(--font-family-primary);
}

#container,
.main {
  background: var(--body-bg);
}

#header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
  min-height: 64px;
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited,
#site-name,
#site-name a:link,
#site-name a:visited {
  color: var(--header-branding-color);
  font-weight: 800;
  letter-spacing: 0;
}

#user-tools,
#user-tools a,
#logout-form button {
  color: var(--header-link-color);
}

div.breadcrumbs {
  background: var(--breadcrumbs-bg);
  border: 0;
  color: var(--breadcrumbs-fg);
}

div.breadcrumbs a {
  color: var(--breadcrumbs-link-fg);
}

#content {
  padding: 28px;
}

.module,
.inline-group,
.submit-row,
#changelist,
.paginator,
fieldset.module.aligned,
#content-related,
#changelist-filter {
  background: var(--survey-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--survey-radius);
  box-shadow: var(--survey-shadow);
  color: var(--body-fg);
  overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2,
#changelist-filter h2 {
  background: var(--survey-surface-muted);
  border-bottom: 1px solid var(--hairline-color);
  color: var(--body-loud-color);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.module table,
#changelist table {
  background: var(--survey-surface);
}

table thead th,
thead th,
tfoot td {
  background: var(--survey-surface-muted);
  border-bottom: 1px solid var(--hairline-color);
  color: var(--body-medium-color);
}

td,
th {
  border-bottom-color: var(--hairline-color);
}

tr.row1,
tbody tr {
  background: var(--survey-surface);
}

tr.row2,
tbody tr:nth-child(even) {
  background: var(--survey-surface-muted);
}

tbody tr:hover,
tbody tr:focus-within {
  background: var(--selected-row);
}

.form-row,
.aligned .form-row {
  border-bottom-color: var(--hairline-color);
  padding: 14px 12px;
}

label,
.aligned label,
.required label,
td,
th,
.module p,
.module ul,
.module ol {
  color: var(--body-fg);
}

.help,
p.help,
form p.help,
div.help,
form div.help,
div.help li,
.quiet,
.small,
.mini,
.helptext,
.datetime span,
.timezonewarning,
.deletelink-box {
  color: var(--body-quiet-color);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select,
.vTextField,
.vURLField,
.vIntegerField,
.vBigIntegerField,
.vForeignKeyRawIdAdminField,
.vDateField,
.vTimeField {
  background: var(--survey-input-bg);
  border: 1px solid var(--survey-input-border);
  border-radius: 6px;
  box-shadow: none;
  color: var(--body-fg);
  min-height: 36px;
}

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

input:focus,
textarea:focus,
select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px var(--survey-focus);
  outline: none;
}

select option {
  background: var(--survey-input-bg);
  color: var(--body-fg);
}

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  border-radius: 6px;
  font-weight: 750;
  letter-spacing: 0;
}

input[type="submit"],
input[type="button"],
.submit-row input.default,
.button.default {
  background: var(--default-button-bg);
  color: var(--button-fg);
}

input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input.default:hover,
.button.default:hover {
  background: var(--default-button-hover-bg);
}

.object-tools a,
.object-tools a:link,
.object-tools a:visited {
  background: var(--object-tools-bg);
  border-radius: 6px;
  color: var(--object-tools-fg);
  font-weight: 800;
}

.object-tools a:hover {
  background: var(--object-tools-hover-bg);
  color: var(--object-tools-fg);
}

.submit-row {
  background: var(--survey-surface-muted);
  border-color: var(--border-color);
}

.submit-row a.deletelink,
.submit-row a.deletelink:link,
.submit-row a.deletelink:visited {
  background: var(--delete-button-bg);
  color: #ffffff;
}

.submit-row a.deletelink:hover {
  background: var(--delete-button-hover-bg);
}

#changelist-filter {
  border-left: 1px solid var(--border-color);
}

#changelist-filter a,
#changelist-filter details > summary {
  color: var(--body-medium-color);
}

#changelist-filter li.selected a,
#changelist-filter a:hover {
  color: var(--link-fg);
}

#toolbar,
#changelist-search,
#changelist .actions {
  background: var(--survey-surface-muted);
  border-color: var(--hairline-color);
}

.paginator {
  color: var(--body-medium-color);
}

.messagelist li {
  border-radius: var(--survey-radius);
  box-shadow: var(--survey-shadow);
  color: var(--body-loud-color);
}

ul.messagelist li.success {
  background-color: var(--message-success-bg);
}

ul.messagelist li.warning {
  background-color: var(--message-warning-bg);
}

ul.messagelist li.error {
  background-color: var(--message-error-bg);
}

.selector,
.selector-available,
.selector-chosen,
.selector-available h2,
.selector-chosen h2,
.calendarbox,
.clockbox,
.related-widget-wrapper-link,
.datetimeshortcuts a {
  background: var(--survey-surface);
  border-color: var(--border-color);
  color: var(--body-fg);
}

.calendar td,
.calendar th,
.calendar caption,
.clockbox h2 {
  background: var(--survey-surface);
  color: var(--body-fg);
}

.calendar td.selected a,
.calendar td a:hover {
  background: var(--selected-row);
}

body.login {
  background: var(--body-bg);
}

body.login #container {
  background: var(--body-bg);
  min-height: 100vh;
}

body.login #content {
  background: var(--survey-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--survey-radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  margin-top: 48px;
  padding: 28px;
}

body.login #content-main,
body.login form,
body.login .form-row {
  background: transparent;
}

body.login .form-row {
  border-bottom: 0;
  padding: 0 0 18px;
}

body.login .submit-row {
  background: transparent;
  border: 0;
  margin: 8px 0 0;
  padding: 0;
}

@media (max-width: 767px) {
  #content {
    padding: 18px 12px;
  }

  .module,
  .inline-group,
  .submit-row,
  #changelist,
  #content-related,
  #changelist-filter {
    border-radius: 6px;
  }
}