/* EasyTune dark theme.
   Brand colours pulled from the EasyTune app logo SVG:
     red accent  #CB2134
     deep shadow #660416
     white text on dark surfaces */
:root {
  --bg:          #0e0e10;
  --surface:     #18181b;
  --surface-2:   #1f1f23;
  --border:      #2a2a30;
  --text:        #f4f4f6;
  --text-dim:    #9a9aa2;
  --brand:       #CB2134;   /* EasyTune red */
  --brand-hover: #E03A4D;   /* lighter red for hover */
  --brand-deep:  #660416;   /* deep shadow red, used for pressed/active */
  --brand-ink:   #ffffff;   /* text on red buttons */
  --error-bg:    #3a1414;
  --error-fg:    #ffb4b4;
  --error-bd:    #6e2020;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { padding: 1.5rem 1rem 4rem; }

main {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  padding: 1.75rem 1.75rem 2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}

main.thanks { text-align: center; padding: 3rem 1.75rem; }

header { margin-bottom: 1.25rem; }

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  flex-wrap: wrap;
}
.brand-logo { height: 28px; width: auto; display: block; }
.brand-tag {
  color: var(--text-dim);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}
main.thanks .brand { justify-content: center; }

h1 { margin: 0 0 .5rem; font-weight: 600; font-size: 1.5rem; }
.meta, .hint { color: var(--text-dim); font-size: .9rem; margin: .25rem 0; }
.req { color: var(--brand); font-weight: 700; }

fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem .25rem;
  background: var(--surface-2);
}
legend {
  padding: 0 .5rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
}

label {
  display: block;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: var(--text-dim);
}

input[type=text],
input[type=url],
input[type=file],
textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  margin-top: .3rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input[type=text]:focus,
input[type=url]:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(203, 33, 52, .22);
}
input::placeholder, textarea::placeholder { color: #5a5a62; }
textarea { resize: vertical; font: inherit; }

input[type=file] {
  padding: .45rem .5rem;
  background: var(--surface);
  cursor: pointer;
}
input[type=file]::file-selector-button {
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  padding: .35rem .8rem;
  border-radius: 5px;
  font-weight: 600;
  margin-right: .8rem;
  cursor: pointer;
}

small {
  display: block;
  color: var(--text-dim);
  margin-top: .3rem;
  font-size: .8rem;
}

button {
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  padding: .85rem 1.6rem;
  font: inherit;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: 7px;
  cursor: pointer;
  transition: background .12s;
  box-shadow: 0 2px 6px rgba(102, 4, 22, .35);
}
button:hover  { background: var(--brand-hover); }
button:active { background: var(--brand-deep); }

.errors {
  background: var(--error-bg);
  border: 1px solid var(--error-bd);
  color: var(--error-fg);
  padding: .85rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: .9rem;
}
.errors ul { margin: .35rem 0 0 1.2rem; padding: 0; }
.err-key { color: var(--brand); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em; }

.ticket {
  font: 1.25rem ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--brand);
  padding: .65rem 1rem;
  border-radius: 7px;
  display: inline-block;
}

a, .btn-link { color: var(--brand); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--brand-hover); text-decoration: underline; }

/* Hidden honeypot for bots. Visually hidden but not display:none so robots
   that filter out hidden fields still see it. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Light-mode override (system pref). Comment out the @media block to force dark always. */
@media (prefers-color-scheme: light) {
  /* Intentionally left empty — EasyTune branding is dark by default. */
}