/* Спутник — тёплый низ. Палитра из макета «Три входа». */
:root{
  --wall:#151210; --screen:#1E1915; --card:#26201A; --line:#332B23;
  --ink:#EBE2D6; --dim:#9A8D7C; --faint:#6E6355;
  --ember:#D98A3F; --ember-soft:#8A5B2E; --voice:#E6D9C6;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--wall); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  line-height:1.55; display:flex; flex-direction:column;
}

header#top{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:calc(10px + env(safe-area-inset-top)) 18px 10px;
  font-size:.78rem; color:var(--faint); letter-spacing:.04em;
}
#mode.storm{color:var(--dim)}

main#feed{
  flex:1; overflow-y:auto; padding:6px 16px 12px;
  display:flex; flex-direction:column; gap:14px;
  max-width:680px; width:100%; margin:0 auto;
}

.entry{display:flex; flex-direction:column; gap:4px}
.entry .head{font-size:.68rem; color:var(--faint); letter-spacing:.06em}
.entry.me .body{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px 14px 4px 14px; padding:10px 14px;
  align-self:flex-end; max-width:85%; font-size:.95rem; white-space:pre-wrap;
}
.entry.me{align-items:flex-end}
.entry.sputnik .body{
  font-family:"Literata",Georgia,serif; color:var(--voice);
  font-size:1.0rem; line-height:1.6; padding:2px 2px 0; white-space:pre-wrap;
  max-width:95%;
}
.entry.sputnik .head .register{color:var(--ember-soft)}

.marks{display:flex; gap:8px; margin-top:6px}
.marks button{
  background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--faint); font-size:.72rem; padding:3px 12px; cursor:pointer;
  font-family:inherit;
}
.marks button:hover{color:var(--ink); border-color:var(--ember-soft)}
.marks button.done{color:var(--ember); border-color:var(--ember-soft)}
.marks.hidden{display:none}

.pending{color:var(--faint); font-size:.85rem; padding:4px 2px}
.pending::after{content:"…"; animation:dots 1.4s infinite}
@keyframes dots{0%{content:"·"}33%{content:"··"}66%{content:"···"}}

footer#bar{
  display:flex; gap:10px; align-items:flex-end;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  max-width:680px; width:100%; margin:0 auto;
}
#inp{
  flex:1; resize:none; background:var(--card); border:1px solid var(--line);
  border-radius:18px; color:var(--ink); font-family:inherit; font-size:.95rem;
  padding:11px 16px; outline:none; max-height:9em;
}
#inp:focus{border-color:var(--ember-soft)}
#inp::placeholder{color:var(--faint)}
#send{
  background:var(--card); border:1px solid var(--line); border-radius:50%;
  width:42px; height:42px; color:var(--ember); font-size:1rem; cursor:pointer;
  flex:none;
}
#send:disabled{opacity:.4}

dialog#login{
  background:var(--screen); border:1px solid var(--line); border-radius:16px;
  color:var(--ink); padding:26px; margin:auto; min-width:280px;
}
dialog#login::backdrop{background:rgba(0,0,0,.6)}
dialog#login p{margin-bottom:14px; font-family:"Literata",Georgia,serif; color:var(--voice)}
dialog#login input{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); padding:10px 12px; font-family:inherit; margin-bottom:12px;
}
dialog#login button{
  background:var(--ember-soft); border:none; border-radius:10px; color:var(--ink);
  padding:10px 18px; cursor:pointer; font-family:inherit; width:100%;
}