/* Viola web pages. Same dawn gradient as the app, one column, no scripts. */
:root {
  --peach: #f5ecfc;
  --rose: #c098df;
  --ink: #2e1046;
  --muted: #5c3b7a;
  --berry: #6b21a8;
  --card: rgba(255, 255, 255, 0.72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--peach) 0%, #e0c8f1 52%, var(--rose) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 0 20px 80px;
}

.wrap { max-width: 720px; margin: 0 auto; }

header { padding: 56px 0 28px; }

.logo {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-size: 40px;
  letter-spacing: 0.5px;
  margin: 0;
}

h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 6px;
}

.updated { color: var(--muted); font-size: 14px; margin: 0 0 28px; }

main {
  background: var(--card);
  border-radius: 22px;
  padding: 28px 26px 34px;
}

h2 {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--berry);
  margin: 32px 0 8px;
}

h2:first-of-type { margin-top: 0; }

p { margin: 0 0 14px; }

a { color: var(--berry); }

footer {
  margin-top: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

footer a { margin: 0 8px; }


@media (prefers-color-scheme: dark) {
  :root { --ink: #f1e7fb; --muted: #c9a9e0; --berry: #c79bf0; --card: rgba(240, 230, 255, 0.09); }
  body { background: linear-gradient(180deg, #1d0f30 0%, #2b1345 52%, #3c1a58 100%); }
}

/* --- support form ------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; }

.form label {
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--berry);
  margin-top: 12px;
  font-weight: 700;
}

.form input,
.form textarea {
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(107, 33, 168, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
}

.form textarea { resize: vertical; }

.form button {
  margin-top: 18px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--berry);
  border: 0;
  border-radius: 999px;
  padding: 14px;
  cursor: pointer;
}

.form button:hover { opacity: 0.9; }

.small { font-size: 14px; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .form input,
  .form textarea {
    background: rgba(240, 230, 255, 0.10);
    border-color: rgba(240, 230, 255, 0.20);
  }
  .form button { color: #22103a; }
}