:root {
  --fond: #f6f1ea; --text: #241a14; --slab: #6d5a4c; --card: #fffaf4; --linie: #e2d4c4;
  --accent: #8e2b3a; --accent-text: #fff; --verde: #2f6b3a; --focus: #1d5fd1;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #17110e; --text: #f3e9df; --slab: #b9a493; --card: #221914; --linie: #3a2b22;
          --accent: #c9566a; --accent-text: #fff; --verde: #6dbb79; --focus: #8ab4ff; }
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; background: var(--fond); color: var(--text);
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; line-height: 1.45; }
header { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--linie); }
header p { margin: 0; }
.sigla { font-size: 1.6rem; }
.nume-app { font-weight: 700; font-size: 1.15rem; flex: 1; }
.cine-sunt { color: var(--slab); }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.6rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
.card, dialog { background: var(--card); border: 1px solid var(--linie); border-radius: 14px; padding: 1.2rem; }
dialog { color: var(--text); max-width: 520px; width: calc(100% - 2rem); }
dialog::backdrop { background: rgba(0,0,0,.45); }
label { display: block; margin: .7rem 0 .25rem; }
input, textarea, select { width: 100%; font: inherit; padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--fond); color: var(--text); }
input[type=checkbox] { width: auto; margin-right: .5rem; transform: scale(1.3); }
input[type=range] { padding: 0; }
button { font: inherit; padding: .65rem 1.1rem; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text); cursor: pointer; }
button[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); }
button.secundar, .lista button { background: transparent; color: var(--text); border-color: var(--linie); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.randuri { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.randuri.verticale { flex-direction: column; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lista li button { width: 100%; text-align: left; border-radius: 12px; padding: .8rem 1rem; }
.lista li.vorbeste button { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde); }
.chat { max-height: 40vh; overflow-y: auto; background: var(--card); border: 1px solid var(--linie);
  border-radius: 12px; padding: .6rem .9rem; }
.chat p { margin: .3rem 0; }
#form-chat input { flex: 1; width: auto; }
.eroare { color: var(--accent); min-height: 1.2em; }
.ascuns, .sari:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sari:focus { position: fixed; top: .5rem; left: .5rem; background: var(--card); padding: .5rem; z-index: 10; }

.nota { font-size: 0.9em; margin: 0.2em 0 0.8em; opacity: 0.85; }

/* Telefoane (TalkBack, VoiceOver pe iPhone): ținte de atingere de cel puțin 44 px. */
button, input, select, summary, a { min-height: 44px; }