#app { display: flex; flex-direction: column; width: 100%; height: 100%; }
#status { flex: 0 0 auto; padding: 4px var(--pad); background: #133a18; color: var(--accent);
  font-size: calc(var(--fs) * .85); letter-spacing: .5px; text-transform: uppercase; }
#content { flex: 1 1 auto; overflow: hidden; position: relative; }
#softkeys { flex: 0 0 auto; display: flex; justify-content: space-between; padding: 5px var(--pad);
  background: #133a18; font-size: calc(var(--fs) * .85); }
#softkeys span { flex: 1; }
#sk-c { text-align: center; color: var(--accent); }
#sk-r { text-align: right; }

.list { display: flex; flex-direction: column; }
.item { min-height: calc(var(--row-h) - 6px); padding: 6px var(--pad); display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #1d4a23; border-left: 4px solid transparent; }
.item.focused { background: var(--focus-bg); color: var(--focus-fg); border-left-color: #000; }
.item.focused .dim { color: #333; }
.scroll { height: 100%; overflow: hidden; }
.form-screen { padding: var(--pad); }
.entry { padding: 9px 0; border-bottom: 1px solid #1d4a23; }
.entry-label { color: var(--dim); font-size: calc(var(--fs) * .8); text-transform: uppercase; }
.entry-value { min-height: 24px; font-size: calc(var(--fs) * 1.15); word-break: break-all; }
.entry-hint { margin-top: 4px; font-size: calc(var(--fs) * .76); }

/* Cloud TTS Broadcaster toast */
.tts-toast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 4px var(--pad); text-align: center;
  background: #1b5e20; color: #ffd400;
  font-size: calc(var(--fs) * .85); font-weight: 700;
  letter-spacing: .3px;
  pointer-events: none;
}
.tts-toast[hidden] { display: none; }