/* Pochval se / Uraz se – one page, two looks by <html data-mode>: warm and light for the praise,
   dark and fiery for the roast. */
:root {
  /* the praise: a gentle lavender, flat – no gradients, no orange, no pink (the owner's choice) */
  --bg: #f6f4fc;
  --bg-2: #e7e2f6;
  --card: #ffffff;
  --text: #241f38;
  --muted: #625c80;
  --line: #ddd6f0;
  --accent: #5f4fa8;
  --accent-2: #5f4fa8;
  /* (the button and the heart: a pastel lavender with dark letters; links and focus the deeper violet) */
  --soft: #c3b6ea;
  --accent-text: #241f38;
  --input: #fbfaff;
  --glow: rgba(95, 79, 168, 0.14);
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-mode="uraz"] {
  --bg: #120d0c;
  --bg-2: #2a0f0b;
  --card: #1b1412;
  --text: #f6ece6;
  --muted: #a8968e;
  --line: #3a2622;
  --accent: #ff4d1c;
  --accent-2: #ffb020;
  --accent-text: #160b07;
  --input: #140f0e;
  --glow: rgba(255, 77, 28, 0.28);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* (the praise flat: one colour, no gradients – the roast keeps its fire's) */
:root:not([data-mode="uraz"]) body { background: var(--bg); }
:root:not([data-mode="uraz"]) .go, :root:not([data-mode="uraz"]) .mark { background: var(--soft); }
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 24px;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 50% -10%, var(--bg-2), transparent 70%),
    var(--bg);
  -webkit-text-size-adjust: 100%;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
a { color: var(--accent); }

.card {
  width: min(560px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 24px 24px;
  box-shadow: 0 24px 60px var(--glow);
}
.head { text-align: center; margin-bottom: 18px; }
.mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent));
  box-shadow: 0 10px 26px var(--glow);
  position: relative;
}
/* the praise's mark: a heart; the roast's: a flame */
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 34px 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3.2 4.5 7 4.5c2 0 3.6 1.1 5 2.9 1.4-1.8 3-2.9 5-2.9 3.8 0 6.1 3.9 4.6 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
:root:not([data-mode="uraz"]) .mark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234e3f99' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3.2 4.5 7 4.5c2 0 3.6 1.1 5 2.9 1.4-1.8 3-2.9 5-2.9 3.8 0 6.1 3.9 4.6 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
:root[data-mode="uraz"] .mark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23160b07' d='M12 22c-4.4 0-7.5-3-7.5-7.2 0-3.4 2.2-5.6 3.7-7.4.3 1.6 1.2 2.8 2.3 3.4C10.7 6.7 12.6 3.6 15 2c-.5 2.7.3 4.6 1.8 6.4 1.5 1.8 2.7 3.6 2.7 6.4C19.5 19 16.4 22 12 22zm0-2.2c1.9 0 3.3-1.3 3.3-3.2 0-1.6-1-2.6-1.9-3.7-.6 1.2-1.5 1.9-2.6 2.2.1-1.1-.2-2.1-.7-3-1 1.2-1.6 2.4-1.6 3.9 0 2.2 1.5 3.8 3.5 3.8z'/%3E%3C/svg%3E");
}
h1 { margin: 0; font-size: clamp(30px, 7vw, 40px); letter-spacing: -0.02em; }
:root[data-mode="uraz"] h1 { text-transform: uppercase; letter-spacing: 0.04em; }
.tagline { margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.45; }

textarea {
  width: 100%;
  resize: vertical;
  min-height: 92px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--input);
  color: var(--text);
  font: 17px/1.45 var(--font);
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
textarea::placeholder { color: var(--muted); opacity: 0.8; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 2px 14px; min-height: 22px; }
.count { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sharp { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.sharp input { width: 18px; height: 18px; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 650;
}
button:disabled { opacity: 0.7; cursor: progress; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.go {
  width: 100%;
  padding: 15px 18px;
  border: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-text);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px var(--glow);
  transition: transform 0.12s ease;
}
.go:not(:disabled):hover { transform: translateY(-1px); }
.go:not(:disabled):active { transform: translateY(1px); }

.out {
  margin-top: 20px;
  padding: 20px 20px 16px;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  background: linear-gradient(180deg, var(--input), var(--card));
}
.out.pop { animation: pop 0.38s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .out.pop { animation: none; } .go { transition: none; } }
.answer { margin: 0 0 14px; font-size: 19px; line-height: 1.55; font-weight: 550; }
.out[data-kind="others"] .answer, .out[data-kind="nonsense"] .answer { font-size: 17px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions button { flex: 1 1 160px; }
.help { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); font-size: 15px; line-height: 1.5; }
.help p { margin: 0 0 6px; }
.help a { font-weight: 800; }
.error { margin: 14px 0 0; color: var(--accent); font-weight: 650; text-align: center; }

.foot { width: min(560px, 100%); margin-top: 22px; text-align: center; font-size: 14px; line-height: 1.5; }
.foot p { margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 13px; }

/* the page's column: the card and the ads' places under it (the rails go beside it) */
.page { width: min(728px, 100%); display: flex; flex-direction: column; align-items: center; }
/* the admin's note while the site is closed, the ads' places */
.banner { width: min(560px, 100%); margin: -12px 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); color: var(--text); font-size: 14px; text-align: center; }
.after, .ad-slot { width: min(728px, 100%); }
.ad-slot { margin: 18px auto 0; text-align: center; }
.after .ad-slot { margin-top: 20px; }
.closed .tagline { margin-bottom: 4px; }

@media (max-width: 420px) {
  body { padding-top: 18px; }
  .card { padding: 22px 16px 18px; border-radius: 20px; }
  .answer { font-size: 18px; }
}