* { box-sizing: border-box; }

/* --zoom scales the wide layout up to fill big or high resolution screens (fitToScreen in app.js) */
html { zoom: var(--zoom, 1); }

html, body {
  margin: 0;
  background: var(--background);
  color: var(--on-background);
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
button:disabled { cursor: default; opacity: .38; }
a { color: var(--primary); }

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* ---- Buttons (Material 3) ---- */
.btn-tonal, .btn-filled {
  background: var(--primary);
  color: var(--on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  transition: filter .15s, transform .08s;
}
.btn-tonal:active, .btn-filled:active { transform: scale(.97); }
.btn-tonal:hover:not(:disabled), .btn-filled:hover:not(:disabled) { filter: brightness(1.06); }
.btn-filled { border-radius: 999px; padding: 14px 24px; font-weight: 700; }
.btn-filled.block { width: 100%; }
.btn-tonal.pill { border-radius: 999px; min-height: 56px; padding: 0 24px; }
.btn-tonal.small { border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.btn-tonal.square {
  border-radius: 22px;
  flex-direction: column;
  gap: 2px;
  aspect-ratio: 1;
  font-size: 22px;
  line-height: 1;
}
.btn-tonal.square .sym { font-size: 34px; font-weight: 400; }
.btn-text { color: var(--primary); padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.btn-text.danger { color: var(--danger-text); }

/* ---- Power header ---- */
.power-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 16px;
  padding-top: 12px;
}

/* One channel, as Howl's PowerLevelPanel: the whole panel is the power bar, filling from the bottom */
.channel {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 8px 12px;
  border-radius: 0 0 16px 16px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
}
.channel > :not(.channel-meter) { position: relative; }
.channel-meter {
  --meter-rgb: 255, 0, 0;
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(rgba(var(--meter-rgb), .45), rgba(var(--meter-rgb), .25));
  box-shadow: inset 0 3px 0 rgba(var(--meter-rgb), .8);
  transition: height 90ms linear;
}
@media (prefers-color-scheme: light) {
  .channel-meter {
    background: linear-gradient(rgba(var(--meter-rgb), .75), rgba(var(--meter-rgb), .55));
    box-shadow: inset 0 3px 0 rgb(var(--meter-rgb));
  }
}
.power-value { height: 88px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.power-number { font-size: 80px; line-height: 1; font-weight: 400; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.power-max { font-size: 13px; font-weight: 500; color: var(--tertiary); padding-bottom: 8px; white-space: nowrap; }
.power-buttons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; max-width: 190px; }
.btn-tonal.square .icon { width: 30px; height: 30px; }

/* Mute, Auto-increase, Pulse chart, Swap: highlighted in the tertiary colour while on, as on the Android app */
.header-row { grid-column: 1 / -1; display: flex; gap: 8px; }
.header-row .wide { flex: 1; min-width: 0; }
.header-row .icon { width: 26px; height: 26px; }
.btn-tonal.tool { border-radius: 999px; min-height: 50px; padding: 0 18px; }
.btn-tonal.tool[aria-pressed="true"] { background: var(--tertiary); color: var(--on-tertiary); }

.pulse-chart { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pulse-chart .chart {
  width: 100%; aspect-ratio: 2; padding: 3px;
  border: 2px solid var(--outline); border-radius: 12px;
}
.pulse-chart .chart.wide { grid-column: 1 / -1; aspect-ratio: 2.5; }
#muteBtn[aria-pressed="false"] .mute-x { display: none; }

.freq-range { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.freq-range span { min-width: 48px; }
.freq-range span:last-child { text-align: right; }
.dual-range { position: relative; flex: 1; height: 40px; }
.dual-track { position: absolute; left: 0; right: 0; top: 50%; height: 16px; transform: translateY(-50%); border-radius: 8px; background: var(--secondary-container); }
.dual-fill { position: absolute; top: 0; bottom: 0; background: var(--primary); border-radius: 8px; }
.dual-range input {
  position: absolute; inset: 0; width: 100%; margin: 0; background: none;
  -webkit-appearance: none; appearance: none; pointer-events: none;
}
.dual-range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 6px; height: 40px; border-radius: 3px; background: var(--primary); cursor: pointer;
}
.dual-range input::-moz-range-thumb { pointer-events: auto; width: 6px; height: 40px; border: none; border-radius: 3px; background: var(--primary); cursor: pointer; }
.dual-range input::-moz-range-track { background: none; }

/* ---- Tabs ---- */
/* Six tabs don't fit a phone, so the row scrolls sideways like Android's scrollable tab row */
.tabs {
  display: flex; border-bottom: 1px solid var(--outline-variant); margin: 16px -16px 0;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px 10px;
  color: var(--on-surface);
  font-size: 16px; font-weight: 500;
  position: relative;
}
.tab .icon { width: 28px; height: 28px; }
.tab[aria-selected="true"] { color: var(--primary); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--primary);
}

.tab-badge {
  position: absolute; top: 6px; left: calc(50% + 8px);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--estop); color: var(--estop-text);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

.content { padding-top: 16px; flex: 1; }
.panel { display: flex; flex-direction: column; gap: 14px; }

.card {
  background: var(--surface-container-high);
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.card-title { font-size: 20px; font-weight: 500; text-align: center; }
.warning { color: var(--error); }
.card-subtitle { font-size: 16px; font-weight: 500; text-align: center; margin-top: 4px; }
.label { font-size: 13px; color: var(--on-surface-variant); }
.muted { color: var(--on-surface-variant); margin: 0; }
.small { font-size: 14px; }
.center { text-align: center; }
.row-between { flex-direction: row; justify-content: space-between; align-items: center; }

/* ---- Remote ---- */
.role-toggle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.role {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 14px 8px; border-radius: 16px;
  background: var(--surface-container-high); border: 2px solid transparent;
}
.role small { color: var(--on-surface-variant); font-size: 12px; text-align: center; }
.role[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-container); color: var(--on-primary-container); }
.role[aria-pressed="true"] small { color: inherit; opacity: .8; }

.status-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--surface-container); font-size: 15px;
}
.status-banner .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--outline); flex: none; }
.status-banner.waiting .dot { background: var(--meter-b); animation: pulse 1.2s infinite; }
.status-banner.connected .dot { background: #5DD39E; }
.status-banner.error { background: var(--error-container); color: var(--on-error-container); }
.status-banner.error .dot { background: var(--error); }
.status-banner.alert { background: #4A1418; color: #FFD9DC; box-shadow: 0 0 0 2px var(--estop); }
.status-banner.alert .dot { background: var(--estop); animation: pulse .6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.code-card { align-items: center; }
.code-row { display: flex; align-items: center; gap: 14px; }
.session-code { font-family: ui-monospace, "Roboto Mono", Consolas, monospace; font-size: 34px; letter-spacing: 4px; color: var(--primary); user-select: all; }

.max-row { display: grid; grid-template-columns: 20px 1fr 40px; align-items: center; gap: 10px; font-weight: 600; }
.max-row output { text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { accent-color: var(--primary); width: 100%; }

.feedback-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fb-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 14px; text-align: left;
  background: var(--fb-bg); color: #F2EEF8;
  border: 1px solid color-mix(in srgb, var(--fb-badge) 35%, transparent);
  transition: transform .08s, box-shadow .2s;
}
.fb-btn:active { transform: scale(.96); }
.fb-btn.flash { box-shadow: 0 0 0 3px var(--fb-badge); }
.fb-badge {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: color-mix(in srgb, var(--fb-badge) 30%, transparent);
}
.fb-text { display: flex; flex-direction: column; min-width: 0; }
.fb-text b { font-size: 15px; }
.fb-text small { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-btn.stop { grid-column: 1 / -1; justify-content: center; }
.fb-btn.stop b { color: #FF8A8A; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field input, .setting input {
  background: var(--surface-container-highest);
  border: 1px solid var(--outline-variant);
  border-radius: 10px; padding: 12px;
}
.field input:focus, .setting input:focus { outline: 2px solid var(--primary); border-color: transparent; }
#driverCode { font-family: ui-monospace, "Roboto Mono", Consolas, monospace; font-size: 22px; letter-spacing: 3px; text-align: center; }

.rider-max { display: flex; gap: 18px; font-size: 18px; }
.rider-max b { color: var(--primary); }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.feed-item, .pinned-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  color: #F2EEF8;
}
/* As the phone app's feedback HUD: every press (repeats too) flashes the whole tile towards its badge colour
   and pops the badge; repeats add a lasting tint and a glow from ×3, a pulsing glow from ×6, more from ×10. */
.feed-item, .pinned-item, .feed-popup { --heat: 0%; background: color-mix(in srgb, var(--fb-badge) var(--heat), var(--fb-bg)); }
.heat-1 { --heat: 12%; }
.heat-2 { --heat: 22%; }
.heat-3 { --heat: 32%; }
.fb-icon { display: inline-block; }
.feed-item.heat-1 { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fb-badge) 35%, transparent); }
.feed-item.heat-2 { font-weight: 500; animation: glow-2 .7s linear infinite alternate; }
.feed-item.heat-3 { font-weight: 700; animation: glow-3 .45s linear infinite alternate; }
.feed-item.new { animation: fb-flash .45s ease-out; }
.feed-item.heat-2.new { animation: fb-flash .45s ease-out, glow-2 .7s linear infinite alternate; }
.feed-item.heat-3.new { animation: fb-flash .45s ease-out, glow-3 .45s linear infinite alternate; }
.pinned-item.new { animation: fb-flash .45s ease-out; }
.pinned-item.stop.new { animation: fb-flash .45s ease-out, pulse 1s infinite alternate; }
.new .fb-icon, .new .count { animation: badge-pop .45s ease-out; }
.heat-2 .count { font-size: 13px; }
.heat-3 .count { font-size: 14px; }
.heat-3 .fb-icon { font-size: 1.25em; }
@keyframes fb-flash { from { background: color-mix(in srgb, var(--fb-badge) 55%, var(--fb-bg)); } }
@keyframes badge-pop { from { transform: scale(1.35); } }
@keyframes glow-2 {
  from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-badge) 35%, transparent); }
  to { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-badge) 90%, transparent); }
}
@keyframes glow-3 {
  from { box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--fb-badge) 55%, transparent), 0 0 10px color-mix(in srgb, var(--fb-badge) 25%, transparent); }
  to { box-shadow: 0 0 0 2.5px var(--fb-badge), 0 0 16px color-mix(in srgb, var(--fb-badge) 50%, transparent); }
}
.feed-item .when, .pinned-item .when { margin-left: auto; font-size: 12px; opacity: .7; white-space: nowrap; }
.feed-item .count { background: var(--fb-badge); color: #141318; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.pinned-item { box-shadow: 0 0 0 2px var(--fb-badge); margin-bottom: 6px; font-weight: 700; }
.pinned-item.stop { color: #FFD9DC; animation: pulse 1s infinite alternate; }
.pinned-item button { margin-left: 8px; background: rgba(255,255,255,.15); color: inherit; border-radius: 999px; padding: 4px 12px; font-size: 13px; }

.estop {
  width: 100%; padding: 20px; border-radius: 18px;
  background: var(--estop); color: var(--estop-text);
  font-size: 24px; font-weight: 900; letter-spacing: 3px;
  box-shadow: 0 4px 18px rgba(229, 25, 47, .35);
}
.estop:active { transform: scale(.98); }

/* ---- Generator ---- */
.gen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.gen-card { gap: 4px; padding: 12px 14px; }
.gen-card .card-title { margin-bottom: 4px; }
.gen-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; min-height: 30px; }
.gen-row > span:first-child { color: var(--on-surface); white-space: nowrap; }
.gen-row select, .gen-row input[type="number"] {
  background: transparent; border: none; text-align: right; color: var(--on-surface);
  min-width: 0; width: 100%; padding: 2px 0; font-size: 15px;
}
.gen-row select {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-align: right; text-align-last: right;
  padding-right: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23938F99' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 2px center / 10px 6px;
}
.gen-row select option { background: var(--surface-container-high); color: var(--on-surface); }
.gen-row .pair { display: flex; align-items: center; gap: 2px; justify-content: flex-end; font-size: 14px; }
.gen-row .pair input { width: 3.4em; }
.gen-card input[type="range"] { margin: 0 0 4px; }
.gen-actions { display: flex; justify-content: space-between; gap: 12px; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 17px; padding: 8px 0; }

.switch {
  -webkit-appearance: none; appearance: none; width: 52px; height: 32px; border-radius: 16px; flex: none;
  border: 2px solid var(--outline); background: var(--surface-container-highest); position: relative; cursor: pointer; transition: background .2s;
}
.switch::after {
  content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--outline); transform: translateY(-50%); transition: all .2s;
}
.switch:checked { background: var(--primary); border-color: var(--primary); }
.switch:checked::after { left: 24px; width: 22px; height: 22px; background: var(--on-primary); }

/* ---- Player ---- */
.player-card { gap: 6px; }
.player-card.drop { outline: 2px dashed var(--primary); outline-offset: 4px; }
.player-name { font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seek-row { display: flex; align-items: center; gap: 10px; }
.seek-row input { flex: 1; min-width: 0; }
.player-time { font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-buttons, .recorder-row { display: flex; align-items: center; gap: 8px; }
.player-buttons .icon, .recorder-row .icon { width: 24px; height: 24px; }
.spacer { flex: 1; }
.recorder.active { background: var(--secondary-container); }
.recorder .row-between { display: flex; }
.recorder .card-title { text-align: left; }
#recordBtn[aria-pressed="true"] { background: var(--tertiary); color: var(--on-tertiary); }

/* Funscript axis meters, as Howl's FunscriptMeters: bars for the linear axes, dials for the rotations */
.funscript-meters { display: flex; justify-content: space-evenly; align-items: flex-start; gap: 16px; padding: 4px 0; }
.fs-meter { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; }
.fs-group { display: flex; gap: 16px; }
.fs-bar { position: relative; width: 28px; height: 48px; border-radius: 6px; background: var(--surface-container-highest); overflow: hidden; }
.fs-bar i { position: absolute; left: 3px; right: 3px; height: 6px; border-radius: 3px; background: var(--primary); bottom: calc(var(--pos) * (100% - 6px)); transition: bottom .1s linear; }
.fs-dial { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--surface-container-highest); }
.fs-dial i { position: absolute; left: 50%; top: 50%; width: 19px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--primary); transform-origin: 0 50%; transform: rotate(var(--angle)); transition: transform .1s linear; }

/* ---- Activity ---- */
.activity-picker { display: flex; align-items: center; gap: 8px; }
.activity-picker select {
  flex: 1; min-width: 0; font-size: 18px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-container-highest); color: var(--on-surface); border: 1px solid var(--outline-variant);
}
.activity-picker select option.excluded { color: var(--error); }
.activity-icon { display: flex; }
.activity-icon .icon, #activityRestart .icon { width: 28px; height: 28px; }
#activityTitle { text-align: left; }
.controls { display: flex; flex-direction: column; gap: 10px; }
.switch-row.heading { font-size: 20px; font-weight: 500; padding: 0; }
.smoother-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 0.45fr); gap: 16px; }
.smoother-control.target-only { grid-template-columns: minmax(0, 1fr); }
.controls .disabled { opacity: .5; }
.controls-heading { margin: 0; font-size: 20px; font-weight: 500; }
.button-row { display: flex; gap: 8px; }
.button-row button { flex: 1 1 0; }

/* ---- Manual ---- */
.manual-actions { display: flex; justify-content: center; gap: 8px; }
.manual-actions .icon { width: 26px; height: 26px; }
.touchpads { display: flex; justify-content: center; gap: 32px; padding: 8px; }
.touchpad {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 300px; aspect-ratio: 1;
  border-radius: 50%; border: 4px solid var(--outline); background: var(--surface-container-highest);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.touchpad-dot {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--primary); pointer-events: none;
}
.pad-label { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--on-surface-variant); pointer-events: none; }
.slider-setting { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.slider-setting input { grid-column: 1 / -1; }
.slider-setting output { font-variant-numeric: tabular-nums; }

/* ---- Settings ---- */
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.setting input { width: 90px; padding: 8px 10px; text-align: right; }

/* ---- Devices panel (Howl's DevicesPanel) and its dialogs ---- */
.devices {
  margin-top: 12px; padding: 4px 8px 4px 16px; border: 2px solid var(--outline); border-radius: 12px;
  background: var(--surface-container-low); display: flex; flex-direction: column;
}
.devices-head, .device-row { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.devices-title { flex: 1; font-size: 22px; }
.device-name { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-battery { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--on-surface-variant); }
.device-battery .icon { width: 20px; height: 20px; }
#devicesEmpty { padding: 8px 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant); flex: none;
}
.icon-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn:disabled { opacity: .6; cursor: default; }
.icon-btn.bt-off { color: var(--error); }
.icon-btn.bt-on { color: #4CAF50; }

.dialog {
  width: min(420px, calc(100% - 32px)); padding: 16px; border: 2px solid var(--outline); border-radius: 28px;
  overflow: visible; /* the picker menu hangs over the dialog edge, like a Compose DropdownMenu */
  background: var(--surface-container-high); color: var(--on-surface);
}
.dialog::backdrop { background: rgba(0, 0, 0, .5); }
.dialog-title { margin: 0 0 16px; font-size: 24px; font-weight: 400; text-align: center; }
.dialog p { margin: 0 0 16px; }
.dialog .pre { white-space: pre-line; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.picker { position: relative; display: flex; justify-content: center; margin-bottom: 16px; }
.picker-btn {
  border: 1px solid var(--outline); border-radius: 999px; padding: 12px 24px;
  font-size: 16px; font-weight: 500; color: var(--primary);
}
.picker-menu {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 1; min-width: 200px; padding: 8px 0;
  border-radius: 4px; background: var(--surface-container); box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.picker-menu button { display: block; width: 100%; text-align: left; padding: 12px 16px; font-size: 14px; }
.picker-menu button:hover, .picker-menu button:focus-visible { background: var(--surface-container-highest); outline: none; }

/* Rider feedback over the other tabs */
.feed-popups {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 20;
  width: min(480px, calc(100% - 32px)); max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.feed-popup {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  color: #F2EEF8; font-weight: 600; cursor: pointer;
  box-shadow: 0 0 0 2px var(--fb-badge), 0 6px 20px rgba(0, 0, 0, .45);
  animation: drop-in .25s ease-out;
}
.feed-popup .count { margin-left: auto; background: var(--fb-badge); color: #141318; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.feed-popup.pinned { font-weight: 800; }
.feed-popup.stop { color: #FFD9DC; animation: drop-in .25s ease-out, stop-glow 1s .25s infinite alternate; }
@keyframes stop-glow { to { box-shadow: 0 0 0 4px var(--fb-badge), 0 0 24px 4px var(--fb-badge); } }
.feed-popup button { margin-left: auto; background: rgba(255,255,255,.15); color: inherit; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.feed-popup .count + button { margin-left: 8px; }
.feed-popup.new { animation: drop-in .25s ease-out, fb-flash .45s ease-out; }
.feed-popup.stop.new { animation: drop-in .25s ease-out, fb-flash .45s ease-out, stop-glow 1s .25s infinite alternate; }
@keyframes drop-in { from { transform: translateY(12px); opacity: 0; } }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--inverse-surface); color: var(--inverse-on-surface);
  padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 10; max-width: calc(100% - 32px);
}

@media (max-width: 420px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .power-number { font-size: 64px; }
  .power-value { height: 72px; }
  .power-header { gap: 10px 10px; }
  .power-buttons { gap: 8px; }
  .btn-tonal.tool { padding: 0 12px; }
  .btn-tonal.square { border-radius: 18px; font-size: 18px; }
  .btn-tonal.square .sym { font-size: 28px; }
  .tabs { margin-left: -12px; margin-right: -12px; }
  .tab { font-size: 14px; padding: 10px 8px 8px; }
  .gen-grid { grid-template-columns: 1fr; }
  .fb-text small { display: none; }
}

/* ---- Wide screens: the current tab on the left, power in the middle, Remote always on the right ---- */
@media (min-width: 1200px) {
  .app {
    /* vh isn't zoomed with the page, so divide it back down */
    max-width: 1640px; height: calc(100vh / var(--zoom, 1)); min-height: 0;
    display: grid;
    /* Equal outer columns keep the power column in the true center */
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "tabs head remote" "main head remote" "main dev remote";
    column-gap: 28px;
    padding: 0 24px;
  }
  .power-header { grid-area: head; align-content: start; padding-top: 20px; overflow-y: auto; }
  .tabs { grid-area: tabs; margin: 12px 0 0; }
  .tab { font-size: 15px; padding: 12px 6px 10px; }
  .tab[data-tab="remote"] { display: none; }
  .content { display: contents; }
  .panel { grid-area: main; overflow-y: auto; padding: 16px 4px 24px; min-height: 0; }
  #tab-remote { grid-area: remote; padding-top: 20px; }
  /* E-STOP stays in view however long the feedback feed gets */
  #tab-remote .estop { position: sticky; bottom: 0; margin-top: auto; }
  .devices { grid-area: dev; margin: 0 0 20px; max-height: 40vh; overflow-y: auto; }
}

/* The Generator cards stack when their column is narrow (the left column on a smaller wide screen) */
.panel { container-type: inline-size; }
@container (max-width: 480px) {
  .gen-grid { grid-template-columns: 1fr; }
}

.coming-soon { padding: 32px 16px; }