:root {
  --hq-dark:      #001126;
  --hq-blue:      #2a3c5c;
  --hq-cyan:      #77d9bd;
  --hq-lightblue: #45c0eb;
  --hq-light:     #e3e4e4;
}

* { box-sizing: border-box; }

body {
  background: linear-gradient(145deg, #001126 0%, #2a3c5c 100%) !important;
  min-height: 100vh;
  font-family: 'Inter', sans-serif !important;
  margin: 0;
}

body::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #77d9bd 0%, #45c0eb 50%, #77d9bd 100%);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
}

#holistiq-bar {
  background: rgba(0,17,38,0.9);
  backdrop-filter: blur(8px);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(119,217,189,0.2);
  margin-top: 4px;
}
#holistiq-bar .hq-logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}
#holistiq-bar .hq-logo-text span { color: #77d9bd; }
#holistiq-bar .hq-tagline {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-left: 4px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

header, nav, [class*="navbar"], [class*="header"] {
  background: rgba(0,17,38,0.7) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 0 rgba(119,217,189,0.15) !important;
}

nav a, header a {
  color: #ffffff !important;
  font-weight: 600 !important;
}

[class*="paper"], [class*="card"],
[class*="Paper"], [class*="Card"],
.MuiPaper-root {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(119,217,189,0.2) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  text-align: center !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}
[class*="paper"]:hover, [class*="card"]:hover,
.MuiPaper-root:hover {
  border-color: rgba(119,217,189,0.5) !important;
  transform: translateY(-2px) !important;
}

[class*="paper"] *,
[class*="card"] *,
[class*="Paper"] *,
[class*="Card"] *,
.MuiPaper-root * {
  text-align: center !important;
}

[class*="paper"] svg,
[class*="card"] svg,
.MuiPaper-root svg {
  display: block !important;
  margin: 0 auto 16px auto !important;
  width: 48px !important;
  height: 48px !important;
  fill: #ffffff !important;
}

svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}
button svg {
  fill: #001126 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
}
p, label, span, li {
  color: rgba(255,255,255,0.85) !important;
}
a { color: #77d9bd !important; }
a:hover { color: #45c0eb !important; }

input, textarea, select, .MuiInputBase-root {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(119,217,189,0.3) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}
input:focus, textarea:focus {
  border-color: #77d9bd !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(119,217,189,0.2) !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

input[type="radio"] { accent-color: #77d9bd; }
input[type="checkbox"] { accent-color: #77d9bd; }
[class*="checked"] svg, .Mui-checked svg {
  fill: #77d9bd !important;
}

button[class*="contained"], button[type="submit"],
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #77d9bd 0%, #45c0eb 100%) !important;
  color: #001126 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
}
button[class*="contained"] svg,
button[type="submit"] svg {
  fill: #001126 !important;
}

button[class*="outlined"], .MuiButton-outlined {
  border-color: rgba(119,217,189,0.5) !important;
  color: #77d9bd !important;
  border-radius: 8px !important;
  background: transparent !important;
}
button[class*="outlined"] svg {
  fill: #77d9bd !important;
}

footer, [class*="footer"] {
  color: rgba(255,255,255,0.3) !important;
  font-size: 11px !important;
  border-top: 1px solid rgba(119,217,189,0.1) !important;
  padding-top: 16px !important;
}
footer a { color: #45c0eb !important; }

[class*="alert"], [class*="Alert"] {
  background: rgba(119,217,189,0.1) !important;
  border: 1px solid rgba(119,217,189,0.3) !important;
  color: #77d9bd !important;
  border-radius: 8px !important;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #001126; }
::-webkit-scrollbar-thumb { background: #2a3c5c; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #77d9bd; }

/* ── Grauer Hinweistext weiß ── */
form p, form span,
[class*="form"] p,
[class*="form"] span,
[class*="helper"], [class*="Helper"],
[class*="hint"], [class*="Hint"],
[class*="subtitle"], [class*="Subtitle"] {
  color: rgba(255,255,255,0.85) !important;
}

/* ── Placeholder Text weiß ── */
::placeholder {
  color: rgba(255,255,255,0.6) !important;
  opacity: 1 !important;
}
::-webkit-input-placeholder {
  color: rgba(255,255,255,0.6) !important;
}
::-moz-placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* ── "Die verschlüsselte Nachricht..." Hinweistext ── */
p, small, [class*="Typography"],
[class*="typography"], [class*="text"],
[class*="description"], [class*="caption"] {
  color: rgba(255,255,255,0.85) !important;
}

/* ── Textarea Label "Geheime Nachricht" ── */
label, legend, fieldset legend,
[class*="label"], [class*="Label"],
[class*="legend"], [class*="fieldset"] {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
}

/* ── Textarea Border ── */
fieldset, [class*="fieldset"],
[class*="outlined"] fieldset {
  border-color: rgba(119,217,189,0.3) !important;
}

/* ── Ergebnis-Seite: Links und Labels ── */
[class*="InputBase"], [class*="inputBase"],
[class*="OutlinedInput"], [class*="outlinedInput"],
[class*="Input-input"], [class*="input-input"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Input-Felder auf der Result-Seite */
input[readonly], input[disabled] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Labels Ein-Klick-Link, Kurzlink, Entschlüsselungsschlüssel */
[class*="InputLabel"], [class*="inputLabel"],
[class*="FormLabel"], [class*="formLabel"] {
  color: #77d9bd !important;
}

/* Copy-Buttons */
[class*="InputAdornment"] button,
[class*="inputAdornment"] button {
  background: rgba(119,217,189,0.15) !important;
  color: #77d9bd !important;
  border-radius: 4px !important;
}
[class*="InputAdornment"] button svg,
[class*="inputAdornment"] button svg {
  fill: #77d9bd !important;
}

/* Fieldset Border auf Result-Seite */
fieldset {
  border-color: rgba(119,217,189,0.3) !important;
}

/* Alle Input-Wrapper ── */
[class*="MuiFormControl"] {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 8px !important;
}

/* ── Radio-Button Bereich: grauer Hintergrund weg ── */
[class*="RadioGroup"], [class*="radioGroup"],
[class*="FormGroup"], [class*="formGroup"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Radio-Button einzelne Items ── */
[class*="FormControlLabel"], [class*="formControlLabel"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(119,217,189,0.2) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  margin: 4px !important;
}

/* ── Checkbox-Bereich ── */
[class*="FormGroup"] [class*="FormControlLabel"],
[class*="formGroup"] [class*="formControlLabel"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(119,217,189,0.15) !important;
  border-radius: 8px !important;
  padding: 6px 16px !important;
}

/* ── Gleiche Kartenhöhe ── */
[class*="MuiGrid-container"] {
  align-items: stretch !important;
}
[class*="MuiGrid-item"] {
  display: flex !important;
  flex-direction: column !important;
}
[class*="MuiGrid-item"] [class*="paper"],
[class*="MuiGrid-item"] [class*="Paper"],
[class*="MuiGrid-item"] .MuiPaper-root {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* ── Checkboxen nebeneinander und zentriert ── */
[class*="FormGroup"]:has([class*="Checkbox"]),
div:has(> [class*="FormControlLabel"] [class*="Checkbox"]) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

[class*="FormGroup"] [class*="FormControlLabel"],
[class*="formGroup"] [class*="formControlLabel"] {
  margin: 0 !important;
  width: auto !important;
}

/* ── Header-Bar Tagline größer ── */
#holistiq-bar .hq-tagline {
  font-size: 15px !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* ── Header-Bar neu ── */
#holistiq-bar {
  justify-content: center !important;
}
#holistiq-bar .hq-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Ergebnis-Felder: Labels und Werte weiß ── */
[class*="MuiInputLabel"],
[class*="MuiOutlinedInput"] input,
[class*="MuiOutlinedInput"] textarea,
[class*="MuiInput-input"],
input[readonly],
input[disabled],
textarea[readonly] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Label-Text (Ein-Klick-Link, Kurzlink, Dechiffrierschlüssel) */
label[data-shrink="true"],
[class*="MuiFormLabel"],
[class*="MuiInputLabel"] {
  color: #77d9bd !important;
  -webkit-text-fill-color: #77d9bd !important;
}

/* ── Ergebnis-Tabelle: alle Zellen weiß ── */
[class*="MuiTableCell"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[class*="MuiTableCell-head"],
[class*="MuiTableHead"] [class*="MuiTableCell"] {
  color: #77d9bd !important;
  font-weight: 600 !important;
}

[class*="MuiTableRow"]:hover {
  background: rgba(119,217,189,0.05) !important;
}

[class*="MuiTable"] {
  background: transparent !important;
}

/* ── Floating Label korrekt positionieren ── */
[class*="MuiInputLabel-outlined"] {
  background: rgba(0,17,38,0.9) !important;
  padding: 0 4px !important;
}

[class*="MuiInputLabel-shrink"] {
  transform: translate(14px, -9px) scale(0.75) !important;
  color: #77d9bd !important;
}

[class*="MuiInputLabel-outlined"]:not([class*="MuiInputLabel-shrink"]) {
  transform: translate(14px, 16px) scale(1) !important;
  color: rgba(255,255,255,0.5) !important;
}

/* Fehlermeldung unter Input ── */
[class*="MuiFormHelperText"] {
  color: #f23041 !important;
  text-decoration: none !important;
}

/* ── Entschlüsselte Nachricht Anzeige ── */
[class*="MuiInputBase-multiline"],
textarea[class*="MuiInputBase"],
[class*="MuiOutlinedInput-multiline"] {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Readonly Textarea (Ergebnis) ── */
textarea[readonly],
textarea[disabled] {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Heller Box-Hintergrund weg ── */
[class*="MuiPaper-elevation"],
[class*="MuiPaper-rounded"] {
  background: rgba(255,255,255,0.06) !important;
}

/* ── Entschlüsselter Geheimtext ── */
#pre,
p#pre,
[data-test-id="preformatted-secret"] {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(119,217,189,0.2) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  font-family: monospace !important;
  word-break: break-all !important;
}