:root {
  --bg: #3b2f9e;
  --card-bg: transparent;
  --card-border: rgba(255, 255, 255, 0.45);
  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.74);
  --accent: #ffffff;
  --accent-hover: #ffffff;
  --accent-glow: rgba(255, 255, 255, 0.08);
  --primary: #ffffff;
  --primary-hover: rgba(255, 255, 255, 0.85);
  --success: #ffffff;
  --success-hover: #ffffff;
  --success-bg: rgba(255, 255, 255, 0.08);
  --warning: #ffffff;
  --warning-bg: rgba(255, 255, 255, 0.08);
  --purple: #ffffff;
  --purple-bg: rgba(255, 255, 255, 0.08);
  --code-bg: rgba(18, 12, 72, 0.35);
  --bg-canvas: #3b2f9e;
  --bg-surface: transparent;
  --bg-subtle: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.4);
  --border-focus: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.7);
  --accent-bg: rgba(255, 255, 255, 0.08);
  --success-bg: rgba(255, 255, 255, 0.08);
}

html,
body {
  background: #3b2f9e !important;
  color: #fff !important;
  font-family: "IBM Plex Sans Thai", "Segoe UI", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
}

.container,
header,
main,
footer {
  position: relative;
  z-index: 1;
}

.container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


header {
  position: relative;
  z-index: 1;
  min-height: 13.4rem;
  overflow: hidden;
}
header::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  right: 0.15rem;
  width: 10.6rem;
  height: 12rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 210 236%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.35%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%22100%22 cy=%2216%22 r=%227%22/><path d=%22M93 22h14v12H93z%22/><path d=%22M100 34v24%22/><path d=%22M166 72h18v11h-18z%22/><path d=%22M172 96h16v11h-16z%22/><circle cx=%22100%22 cy=%22132%22 r=%2276%22/><circle cx=%22100%22 cy=%22132%22 r=%2270%22/><path d=%22M100.0 74.0L100.0 63.5 M106.7 68.4L107.2 63.9 M113.3 69.4L114.2 65.0 M119.8 71.1L121.2 66.9 M126.0 73.5L127.9 69.4 M129.0 81.8L134.2 72.7 M137.6 80.2L140.3 76.6 M142.8 84.4L145.8 81.1 M147.6 89.2L150.9 86.2 M151.8 94.4L155.4 91.7 M150.2 103.0L159.3 97.8 M158.5 106.0L162.6 104.1 M160.9 112.2L165.1 110.8 M162.6 118.7L167.0 117.8 M163.6 125.3L168.1 124.8 M158.0 132.0L168.5 132.0 M163.6 138.7L168.1 139.2 M162.6 145.3L167.0 146.2 M160.9 151.8L165.1 153.2 M158.5 158.0L162.6 159.9 M150.2 161.0L159.3 166.2 M151.8 169.6L155.4 172.3 M147.6 174.8L150.9 177.8 M142.8 179.6L145.8 182.9 M137.6 183.8L140.3 187.4 M129.0 182.2L134.2 191.3 M126.0 190.5L127.9 194.6 M119.8 192.9L121.2 197.1 M113.3 194.6L114.2 199.0 M106.7 195.6L107.2 200.1 M100.0 190.0L100.0 200.5 M93.3 195.6L92.8 200.1 M86.7 194.6L85.8 199.0 M80.2 192.9L78.8 197.1 M74.0 190.5L72.1 194.6 M71.0 182.2L65.8 191.3 M62.4 183.8L59.7 187.4 M57.2 179.6L54.2 182.9 M52.4 174.8L49.1 177.8 M48.2 169.6L44.6 172.3 M49.8 161.0L40.7 166.2 M41.5 158.0L37.4 159.9 M39.1 151.8L34.9 153.2 M37.4 145.3L33.0 146.2 M36.4 138.7L31.9 139.2 M42.0 132.0L31.5 132.0 M36.4 125.3L31.9 124.8 M37.4 118.7L33.0 117.8 M39.1 112.2L34.9 110.8 M41.5 106.0L37.4 104.1 M49.8 103.0L40.7 97.8 M48.2 94.4L44.6 91.7 M52.4 89.2L49.1 86.2 M57.2 84.4L54.2 81.1 M62.4 80.2L59.7 76.6 M71.0 81.8L65.7 72.7 M74.0 73.5L72.1 69.4 M80.2 71.1L78.8 66.9 M86.7 69.4L85.8 65.0 M93.3 68.4L92.8 63.9%22/><circle cx=%22100%22 cy=%22164%22 r=%2218%22/><path d=%22M100.0 151.0L100.0 147.0 M106.5 152.7L108.5 149.3 M111.3 157.5L114.7 155.5 M113.0 164.0L117.0 164.0 M111.3 170.5L114.7 172.5 M106.5 175.3L108.5 178.7 M100.0 177.0L100.0 181.0 M93.5 175.3L91.5 178.7 M88.7 170.5L85.3 172.5 M87.0 164.0L83.0 164.0 M88.7 157.5L85.3 155.5 M93.5 152.7L91.5 149.3%22/><path d=%22M100 164L94.5 173.5%22/><path d=%22M100 132L110.8 81.1 M100 132L128.8 114.0%22 stroke-width=%221.7%22/><circle cx=%22100%22 cy=%22132%22 r=%222.6%22 fill=%22%23fff%22 stroke=%22none%22/><text x=%22100%22 y=%2286%22 text-anchor=%22middle%22 fill=%22%23fff%22 stroke=%22none%22 font-size=%2211%22 font-family=%22sans-serif%22>60</text><text x=%22152%22 y=%22136%22 text-anchor=%22middle%22 fill=%22%23fff%22 stroke=%22none%22 font-size=%2211%22 font-family=%22sans-serif%22>15</text><text x=%2248%22 y=%22136%22 text-anchor=%22middle%22 fill=%22%23fff%22 stroke=%22none%22 font-size=%2211%22 font-family=%22sans-serif%22>45</text></svg>") center / contain no-repeat;
}
header > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  header::after { width: 7.4rem; height: 8.4rem; opacity: 0.22; }
}

header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 0 !important;
}

h1,
h2,
h3,
h4,
.subtitle,
.kicker,
.card h2,
.card p,
.week-head h2,
.week-head p,
.day h4,
.day p,
p,
li,
label,
strong,
em,
.summary-title,
.summary-desc,
.vocab-term,
.vocab-pos,
.vocab-def,
.vocab-word,
.vocab-trans,
.vocab-desc,
.rule-title,
.rule-content,
.quote-box,
.quote-author,
.formula-box h4,
.formula-badge,
footer {
  color: #fff !important;
}

h1 {
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
}

h2,
h3,
.card h2 {
  font-weight: 500 !important;
}

.back,
.badge,
.formula-badge,
.toc a,
.card a,
.day a,
.soon {
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.card a,
.day a {
  border: 0 !important;
  border-bottom: 1px solid #fff !important;
  padding: 0 !important;
}

.soon {
  border: 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.card,
.vocab-card,
.vocab-sidebar,
.summary-item,
.formula-card,
.formula-box,
.protocol-box,
.quote-box,
.rule-card,
.preview-box,
.output-box {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.protocol-box,
.quote-box,
.formula-box {
  border-left: 3px solid #fff !important;
}

.tab-bar,
.tab-nav,
.case-lang-toggle {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  padding: 0.25rem !important;
}

.tab-btn,
.case-lang-btn,
.vocab-toggle-btn,
.toggle-vocab-btn,
.tool-toggle-btn,
.btn-copy,
.btn-copy-purple,
.btn-action {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tab-btn.active,
.case-lang-btn.is-active,
.tool-toggle-btn.lang-active,
.tab-btn:hover,
.case-lang-btn:hover,
.vocab-toggle-btn:hover,
.toggle-vocab-btn:hover,
.tool-toggle-btn:hover {
  background: #fff !important;
  color: #3b2f9e !important;
}

.btn-copy,
.btn-copy-purple,
.btn-action {
  border: 1px solid #fff !important;
}

.btn-copy:hover,
.btn-copy-purple:hover,
.btn-action:hover {
  background: #fff !important;
  color: #3b2f9e !important;
}

input[type="text"],
textarea,
select {
  background: rgba(18, 12, 72, 0.28) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

option {
  color: #1a1448;
  background: #fff;
}

.vocab-highlight,
.vocab-target {
  color: #fff !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
}

.toast-msg,
.toast {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

a {
  color: #fff;
}