:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --button: var(--tg-theme-button-color, #2a86d6);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f0f0f0);
  --danger: var(--tg-theme-destructive-text-color, #d23c3c);
}

* { box-sizing: border-box; }

/* Our display rules must not override the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 520px; margin: 0 auto; padding: 20px 16px 32px; }

h1 { font-size: 22px; margin: 0 0 16px; }

section { margin: 0 0 16px; }

.hint { color: var(--hint); font-size: 14px; }
.error { color: var(--danger); }
.success { font-size: 18px; font-weight: 600; }

button, .file span, a.button {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

button.secondary { margin-top: 10px; background: var(--secondary-bg); color: var(--text); }

.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.bar { height: 10px; border-radius: 5px; background: var(--secondary-bg); overflow: hidden; }
#bar-fill { height: 100%; width: 0; background: var(--button); transition: width 0.2s; }

.label { margin: 20px 0 8px; font-weight: 600; }

.choice { display: flex; gap: 8px; margin-bottom: 12px; }
.choice .option { flex: 1; background: var(--secondary-bg); color: var(--text); }
.choice .option[aria-pressed="true"] { background: var(--button); color: var(--button-text); }

.switch { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; cursor: pointer; }
.switch input { width: 22px; height: 22px; accent-color: var(--button); }

button:disabled { opacity: 0.55; cursor: default; }

#preview-text { margin-top: 10px; }
#player { display: block; width: 100%; max-height: 70vh; margin-top: 8px; border-radius: 10px; background: #000; }

a.button { text-decoration: none; margin-top: 10px; }
#final { margin-top: 16px; }
#final-confirm p { margin: 12px 0 10px; }
#final-text { margin-top: 10px; }