/* Twetch public pages — light + dark */

:root, html[data-theme="light"] {
  color-scheme: light;
  --tw-bg: #f4f4f5;
  --tw-surface: #ffffff;
  --tw-text: #111111;
  --tw-muted: #6b6f76;
  --tw-border: #e6e6e8;
  --tw-accent: #111111;
  --tw-accent-text: #ffffff;
  --tw-accent-soft: #f0f0f2;
  --tw-danger: #e5484d;
  --tw-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --tw-bg: #070812;
    --tw-surface: #12131a;
    --tw-text: #e7e9ea;
    --tw-muted: #a6a8b4;
    --tw-border: #2a2d36;
    --tw-accent: #ffffff;
    --tw-accent-text: #000000;
    --tw-accent-soft: #1a1c24;
    --tw-danger: #ff6b6b;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --tw-bg: #070812;
  --tw-surface: #12131a;
  --tw-text: #e7e9ea;
  --tw-muted: #a6a8b4;
  --tw-border: #2a2d36;
  --tw-accent: #ffffff;
  --tw-accent-text: #000000;
  --tw-accent-soft: #1a1c24;
  --tw-danger: #ff6b6b;
}

* { box-sizing: border-box; }

html {
  height: 100%;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 320px;
  min-height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: var(--tw-bg) !important;
  color: var(--tw-text) !important;
  font-family: var(--tw-font) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  grid-template-columns: 1fr !important;
}

a {
  color: var(--tw-text) !important;
  text-decoration: underline;
  text-decoration-color: var(--tw-border);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--tw-text); }

label { color: var(--tw-text) !important; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--tw-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px 0;
}
h2 { font-size: 22px !important; }

p { color: var(--tw-muted) !important; }

/* Page header (logo) — top of page, outside the card */
body > header.header,
header.twetch-page-header {
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tw-border) !important;
  background: transparent !important;
  text-align: center !important;
}
body > header.header .logo,
header.twetch-page-header .logo {
  display: flex;
  justify-content: center;
}
body > header.header .logo img,
header.twetch-page-header .logo img {
  height: 28px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain;
}

/* Main card — centered in remaining space */
body > .container.wrap {
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: calc(100% - 32px) !important;
  max-width: 440px !important;
  margin: 40px 16px !important;
  padding: 28px 28px 24px 28px !important;
  background: var(--tw-surface) !important;
  color: var(--tw-text) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* Hide leftover header inside the card if JS hasn't moved it yet */
.wrap > header.header { display: none !important; }

.wrap .section,
.wrap .unsub-form,
.wrap .unsub-form > div {
  text-align: center !important;
}

.unsub-form p {
  margin: 0 0 16px 0 !important;
  color: var(--tw-muted) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.unsub-form p.unsub-copy {
  margin: 0 0 20px 0 !important;
  color: var(--tw-muted) !important;
}

/* Hide privacy / blocklist / manage */
#data-form,
form.data-form,
.data-form,
#privacy-blocklist,
label[for="privacy-blocklist"],
.unsub-form p:has(#privacy-blocklist),
.unsub-form a[href*="manage"],
a[href$="?manage=true"] {
  display: none !important;
}

/* Red Unsubscribe button */
.unsub-form .button,
.unsub-form button.button,
#btn-unsub {
  width: auto !important;
  min-width: 200px !important;
  margin: 0 auto !important;
  background: #e5484d !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  min-height: 44px;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
}
.unsub-form .button:hover,
#btn-unsub:hover {
  background: #d13b40 !important;
  color: #ffffff !important;
  opacity: 1;
}

footer.container {
  grid-row: 3 !important;
  justify-self: center !important;
  width: calc(100% - 32px) !important;
  max-width: 440px !important;
  margin: 0 16px 28px 16px !important;
  padding: 0 !important;
  text-align: center !important;
  color: var(--tw-muted) !important;
  font-size: 12px !important;
}
footer.container a {
  color: var(--tw-muted) !important;
  text-decoration: none !important;
}
footer.container a:hover { color: var(--tw-text) !important; }

.error { color: var(--tw-danger) !important; }

@media screen and (max-width: 650px) {
  body > header.header,
  header.twetch-page-header { padding: 16px 12px !important; }
  body > .container.wrap {
    margin: 28px 12px !important;
    width: calc(100% - 24px) !important;
    padding: 28px 20px !important;
  }
  footer.container { margin: 0 12px 20px 12px !important; }
}

/* Card spacing tighten — kill extra bottom gap */
body > .container.wrap {
  padding: 28px 28px 24px 28px !important;
}
.wrap .section {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.wrap .section > h2 {
  margin: 0 0 10px 0 !important;
}
.unsub-form {
  margin: 0 !important;
  padding: 0 !important;
}
.unsub-form > div {
  margin: 0 !important;
  padding: 0 !important;
}
.unsub-form p {
  margin: 0 0 14px 0 !important;
}
.unsub-form p:last-child {
  margin-bottom: 0 !important;
}
.unsub-form p:empty,
.unsub-form p:has(> :only-child:is(br)),
.unsub-form br:last-child {
  display: none !important;
}
.unsub-form p:has(#btn-unsub),
.unsub-form p:has(.button) {
  margin-bottom: 0 !important;
  margin-top: 4px !important;
}