/* vyberone.com. Large type, high contrast, nothing moves when words change. The wizard and
   my apps fill the window and never scroll the page; the front page is a web page and may. */
:root {
  --bg: #0f1318; --panel: #181e26; --panel2: #202833; --line: #34404f;
  --ink: #f3f5f8; --ink2: #c9d1db; --accent: #6fd3ff; --accentInk: #04121c;
  --good: #7ee2a8; --bad: #ff9a8a; --warn: #ffd479;
  --r: 14px;
  font-size: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 600 1rem/1.45 -apple-system, system-ui, "Segoe UI", sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
button, .button {
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; border-radius: 12px;
  padding: 0.6em 1.2em; border: 2px solid var(--accent); background: var(--accent); color: var(--accentInk);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; white-space: nowrap;
}
button.quiet, .button.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: 1; background: var(--panel2); border-color: var(--line); color: var(--ink2); cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 4px solid var(--warn); outline-offset: 2px; }
label { display: block; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3em; }
.help { color: var(--ink2); font-weight: 500; font-size: 1rem; margin-top: 0.35em; }
input[type=text], textarea {
  width: 100%; font: inherit; font-weight: 600; font-size: 1.15rem; color: var(--ink); background: #0b0f14;
  border: 2px solid var(--line); border-radius: 12px; padding: 0.55em 0.7em;
}
textarea { resize: none; line-height: 1.4; }
/* a line of status or error: its box is always there, filled or not */
.say { min-height: 1.5em; height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.say.bad { color: var(--bad); } .say.good { color: var(--good); }

/* the app look: the window, exactly */
body.app { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.top { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 2px solid var(--line); background: var(--panel); min-height: 74px; }
.top .brand { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.top .where { color: var(--ink2); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top .grow { flex: 1; }
.main { flex: 1; min-height: 0; display: flex; }
@media (max-width: 700px) {
  :root { font-size: 18px; }
  .top { gap: 10px; padding: 10px 12px; min-height: 64px; }
  .top .where { display: none; }
  .top .button { padding: 0.5em 0.8em; font-size: 0.95rem; }
}