:root {
  color-scheme: dark;
  --bg: #0d0f12;
  --panel: #14171c;
  --line: #23272e;
  --ink: #e7e3da;
  --mute: #8b857a;
  --accent: #5ca87a;
  --hot: #c96a4f;
  --r: 14px;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, monospace }
.hint { color: var(--mute); font-size: 13px }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(13,15,18,.86);
  backdrop-filter: blur(10px); z-index: 5;
}
.brand { font-size: 17px; letter-spacing: -.01em }
.tld { color: var(--mute) }
.ver {
  font: 500 12px/1 ui-monospace, monospace; letter-spacing: .04em;
  color: var(--accent); border: 1px solid rgba(92,168,122,.35);
  padding: 5px 9px; border-radius: 999px;
}
.ver.bump { animation: pop .6s ease }
@keyframes pop { 0% { transform: scale(1) } 35% { transform: scale(1.18); background: rgba(92,168,122,.18) } 100% { transform: scale(1) } }

main { max-width: 720px; margin: 0 auto; padding: 22px 18px 60px; display: grid; gap: 18px }

/* --- кнопка записи --- */
.deck { display: flex; align-items: center; gap: 18px }
.rec {
  position: relative; flex: none; width: 78px; height: 78px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  display: grid; place-items: center; transition: border-color .2s, background .2s;
}
.rec:hover { border-color: #3a4048 }
.rec .glyph { width: 26px; height: 26px; border-radius: 50%; background: var(--hot); transition: all .22s ease }
.rec.on .glyph { width: 22px; height: 22px; border-radius: 5px }
.rec .ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent }
.rec.on .ring { border-color: rgba(201,106,79,.55); animation: pulse 1.4s ease-in-out infinite }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.09); opacity: .35 } }
.rec:disabled { opacity: .5; cursor: default }
.rec-label { font-size: 19px; letter-spacing: -.01em }

/* --- текстовый ввод --- */
.typed { display: flex; gap: 8px }
.typed input {
  flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); padding: 12px 14px; font: inherit; outline: none;
}
.typed input:focus { border-color: #3a4048 }
.typed button {
  flex: none; width: 48px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 17px; cursor: pointer;
}
.typed button:hover { border-color: #3a4048 }

/* --- такт --- */
.cycle { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px }
.cycle-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px }
.cycle-head span:first-child { font-size: 14px }
#cycleTime { color: var(--mute); font-size: 13px }
.track { height: 6px; background: #1c2026; border-radius: 999px; overflow: hidden }
.fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width .9s linear }
.fill.building { background: linear-gradient(90deg, var(--hot), #e0a06a); animation: slide 1.6s linear infinite; background-size: 200% 100% }
@keyframes slide { to { background-position: -200% 0 } }
.cycle-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; flex-wrap: wrap }
.acts { display: flex; gap: 8px }
.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--mute);
  border-radius: 9px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer;
}
.ghost:hover { color: var(--ink); border-color: #3a4048 }
.ghost.danger:hover { color: var(--hot); border-color: rgba(201,106,79,.45) }

/* --- полотно --- */
.canvas { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel) }
.canvas-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mute);
}
.canvas-head a { color: var(--mute); text-decoration: none }
.canvas-head a:hover { color: var(--accent) }
#live { display: block; width: 100%; height: 460px; border: 0; background: var(--bg) }

/* --- лента --- */
.feed-head { font-size: 13px; color: var(--mute); margin-bottom: 8px }
#feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
#feed li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 13px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
}
#feed .chip {
  flex: none; font-size: 11px; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mute); margin-top: 1px; white-space: nowrap;
}
#feed .chip.queued { color: #d9b86a; border-color: rgba(217,184,106,.3) }
#feed .chip.building { color: var(--hot); border-color: rgba(201,106,79,.35) }
#feed .chip.done { color: var(--accent); border-color: rgba(92,168,122,.3) }
#feed .chip.error { color: #d76f6f; border-color: rgba(215,111,111,.35) }
#feed .txt { flex: 1; min-width: 0; overflow-wrap: anywhere }
#feed .err { color: #d76f6f; font-size: 12px; display: block; margin-top: 3px }

/* --- тост --- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px);
  background: #1c2026; border: 1px solid var(--line); color: var(--ink);
  padding: 11px 16px; border-radius: 11px; font-size: 14px; opacity: 0;
  pointer-events: none; transition: all .25s ease; max-width: 90vw; z-index: 20;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) }

@media (max-width: 520px) {
  .rec { width: 66px; height: 66px }
  #live { height: 380px }
}