html,
body,
.wrap,
.container,
section,
article,
main,
div,
.content,
.box,
.card,
.panel,
.modal,
.modal-content,
.modal-card,
.modal-card-body,
.modal-card-head,
.modal-card-foot,
.field,
.control,
.input,
.textarea,
.select,
.select select,
.notification,
.message,
.message-body,
.message-header,
.hero,
.hero-body,
.section,
.tile,
.level,
.media,
.media-content {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

.wrap,
.container.wrap,
div.wrap {
  border: none !important;
  box-shadow: none !important;
}

body > .container,
body > div,
body > section,
.container.wrap,
section.container {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

svg,
.icon,
i.icon {
  color: var(--accent) !important;
  fill: var(--accent) !important;
}

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-card: #0a0a0a;
  --text-primary: #f0f0f0;
  --text-secondary: #c0c0c0;
  --text-muted: #888888;
  --accent: #ff6700;
  --accent-hover: #ff7a1a;
  --border-color: #2a2a2a;
  --border-focus: #444444;
  --success: #22c55e;
  --error: #ef4444;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Monaco, Consolas, monospace;
}

body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-stack) !important;
  line-height: 1.6 !important;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container,
.wrap {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
}

.header {
  text-align: center !important;
  padding-bottom: 2rem !important;
  margin-bottom: 2rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.header .logo {
  margin-bottom: 0 !important;
}

.header .logo img {
  max-width: 200px !important;
  height: auto !important;
  filter: brightness(1.1) contrast(1.05);
}

.header .logo a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  line-height: 1.3 !important;
}

h1 {
  font-size: 2rem !important;
  margin-bottom: 0.5rem !important;
}

h2 {
  font-size: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

h3 {
  font-size: 1.25rem !important;
}

p {
  color: var(--text-secondary) !important;
  margin-bottom: 1rem !important;
}

a {
  color: var(--accent) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

a:hover {
  color: var(--accent-hover) !important;
  text-decoration: underline !important;
}

.box,
form,
.subscription,
.card,
.card-content,
.panel,
.panel-block,
.panel-heading {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
}

.field,
.control,
.field-body,
.field-label {
  background: transparent !important;
}

.help {
  color: var(--text-muted) !important;
}

label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="name"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
.input,
.textarea,
.select select {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
  font-family: var(--font-stack) !important;
  font-size: 1rem !important;
  padding: 0.875rem 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.select {
  background: transparent !important;
}

.select::after {
  border-color: var(--text-muted) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="name"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.input:focus,
.textarea:focus,
.select select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.15) !important;
  background: var(--bg-secondary) !important;
}

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

button,
input[type="submit"],
.button,
.btn {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-family: var(--font-stack) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0.875rem 1.5rem !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  display: inline-block !important;
  text-align: center !important;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
}

button:active,
input[type="submit"]:active,
.button:active,
.btn:active {
  transform: translateY(0) !important;
}

button.secondary,
.button.secondary,
.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

button.secondary:hover,
.button.secondary:hover,
.btn-secondary:hover {
  border-color: var(--text-muted) !important;
  background: var(--bg-secondary) !important;
}

.lists label,
.checkboxes label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
}

.lists label:hover,
.checkboxes label:hover {
  background: var(--bg-secondary) !important;
}

input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--bg-secondary) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 4px !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  transition: all 0.15s ease !important;
}

input[type="checkbox"]:checked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

input[type="checkbox"]:checked::after {
  content: "✓" !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.lists .description,
.checkboxes .description {
  color: var(--text-muted) !important;
  font-size: 0.875rem !important;
  margin-top: 0.25rem !important;
}

.message,
.notification,
.alert {
  padding: 1rem 1.25rem !important;
  border-radius: 6px !important;
  margin-bottom: 1rem !important;
  font-size: 0.9375rem !important;
}

.message.success,
.notification.success,
.alert.success,
.notification.is-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: var(--success) !important;
}

.message.error,
.notification.error,
.alert.error,
.notification.is-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: var(--error) !important;
}

.message.info,
.notification.info,
.alert.info,
.notification.is-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
}

footer,
.footer {
  text-align: center !important;
  padding: 2rem 1.5rem !important;
  margin-top: 2rem !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  font-size: 0.875rem !important;
}

footer a,
.footer a {
  color: var(--text-muted) !important;
}

footer a:hover,
.footer a:hover {
  color: var(--text-secondary) !important;
}

.subscription-form .field {
  margin-bottom: 1.5rem !important;
}

.subscription-form .field:last-child {
  margin-bottom: 0 !important;
}

.subscription-form .email-field {
  display: flex !important;
  gap: 0.75rem !important;
}

.subscription-form .email-field input {
  flex: 1 !important;
}

.subscription-page h2 {
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--border-color) !important;
}

.subscription-page h2:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.privacy-section {
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--border-color) !important;
}

.privacy-section h3 {
  color: var(--text-secondary) !important;
  font-size: 1rem !important;
  margin-bottom: 1rem !important;
}

.privacy-section p {
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
}

.optin-page {
  text-align: center !important;
}

.optin-page .icon {
  font-size: 3rem !important;
  margin-bottom: 1rem !important;
}

.optin-page .icon.success {
  color: var(--success) !important;
}

.text-center {
  text-align: center !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }

hr {
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  margin: 2rem 0 !important;
}

@media (max-width: 640px) {
  .container,
  .wrap {
    padding: 1.5rem 1rem !important;
  }
  
  .box,
  form,
  .subscription {
    padding: 1.5rem !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.375rem !important;
  }
  
  .subscription-form .email-field {
    flex-direction: column !important;
  }
}

a:not(.button):not(.btn):not(button) {
  border-bottom: 1px solid transparent !important;
}

a:not(.button):not(.btn):not(button):hover {
  border-bottom-color: var(--accent) !important;
  text-decoration: none !important;
}

*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

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

.wrap,
.container.wrap,
body > .container,
body > div > .container,
.container > .wrap,
section.wrap {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
}

*:not(input):not(textarea):not(select):not(button):not(.btn):not(.button):not(a) {
  background-color: inherit;
}

table,
thead,
tbody,
tfoot,
tr,
th,
td {
  background: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

th {
  color: var(--text-secondary) !important;
}

::selection {
  background: var(--accent) !important;
  color: white !important;
}

body > div,
body > div > div,
body > section,
body > .wrap,
body .container,
.container,
.container.wrap,
div.container,
section.container,
.wrap > div,
.content-wrap,
main,
#app,
#root,
[class*="container"],
[class*="wrap"]:not(input):not(textarea) {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

*:not(.box):not(form):not(.subscription):not(input):not(textarea):not(select):not(button):not(.header):not(hr) {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}