.remote-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}

.remote-tabs {
  display: flex;
  gap: 8px;
  padding: 0 18px 14px;
}
.remote-tab {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
}
.remote-tab.active {
  background: var(--accent);
  color: #1a1305;
  border-color: transparent;
}

.remote-panel { padding: 6px 20px 28px; flex: 1; }
.remote-panel[hidden] { display: none; }

/* D-Pad */
.dpad-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 0 30px;
}
.dpad {
  position: relative;
  width: 230px;
  height: 230px;
}
.dpad-btn {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s var(--ease);
}
.dpad-btn:active, .dpad-btn.pressed { background: var(--accent-soft); border-color: var(--accent); }

.dpad-up    { top: 0; left: 76px; width: 78px; height: 78px; border-radius: 20px 20px 6px 6px; }
.dpad-down  { bottom: 0; left: 76px; width: 78px; height: 78px; border-radius: 6px 6px 20px 20px; }
.dpad-left  { left: 0; top: 76px; width: 78px; height: 78px; border-radius: 20px 6px 6px 20px; }
.dpad-right { right: 0; top: 76px; width: 78px; height: 78px; border-radius: 6px 20px 20px 6px; }
.dpad-ok {
  top: 76px; left: 76px; width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1305;
  font-weight: 800;
  font-size: 14px;
  z-index: 2;
}

.remote-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 22px; }

/* Media controls */
.media-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 0 26px;
}
.media-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-btn.big {
  width: 68px; height: 68px;
  background: var(--accent);
  color: #1a1305;
  font-size: 22px;
  border: none;
}

.volume-block { padding: 0 6px 26px; }
.volume-row { display: flex; align-items: center; gap: 14px; }
.volume-row .btn-icon { flex-shrink: 0; }
.volume-pct { width: 42px; text-align: center; font-weight: 700; font-size: 14px; color: var(--text-secondary); }
input[type="range"].volume-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}
input[type="range"].volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid #1a1305;
}

/* Trackpad */
.trackpad-area {
  height: min(46vh, 380px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  touch-action: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 13px;
  user-select: none;
  -webkit-user-select: none;
}
.trackpad-area.active { border-color: var(--accent); }

.trackpad-buttons { display: flex; gap: 10px; margin-top: 12px; }
.trackpad-buttons .btn { flex: 1; }

.sensitivity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}
.sensitivity-row input { flex: 1; }

.remote-native-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
}

.connected-tv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 0 18px 6px;
}
.connected-tv-card .name { font-weight: 700; font-size: 14.5px; }
.connected-tv-card .sub { font-size: 12px; color: var(--text-tertiary); }