/* Netflix-inspired palette: near-black background, red brand/accent color, bold white text. */
:root {
  --color-background: #141414;
  --color-surface: #1F1F1F;
  --color-surface-raised: #2B2B2B;
  --color-primary: #E50914;
  --color-primary-dim: #B20710;
  --color-live: #46D369;
  --color-error: #E50914;
  --color-on-background: #FFFFFF;
  --color-on-surface-muted: #B3B3B3;

  /* How far below the top edge it's safe to start real content (hub title, App Usage header,
     the centered connect button) so a wrapped, multi-line #inUseBanner can never sit on top of
     it. Only actually applied (see the body:has() rules further down) while the banner is
     visible — narrows at wider breakpoints since the banner has more horizontal room there and
     wraps to fewer lines. */
  --chrome-clearance: 190px;
}

@media (min-width: 375px) {
  :root { --chrome-clearance: 168px; }
}

@media (min-width: 425px) {
  :root { --chrome-clearance: 150px; }
}

@media (min-width: 768px) {
  :root { --chrome-clearance: 118px; }
}

@media (min-width: 1024px) {
  :root { --chrome-clearance: 108px; }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--color-background);
  color: var(--color-on-background);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------------------------------
   PIN lock screen
--------------------------------------------------------------------------------------- */

.lock-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, #1A2130 0%, var(--color-background) 60%);
  padding: 24px;
}

.lock-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lock-card.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.lock-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.lock-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lock-subtitle {
  margin: 6px 0 28px;
  font-size: 13px;
  color: var(--color-on-surface-muted);
}

.pin-dots {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-on-surface-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pin-dot.filled {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.pin-error {
  min-height: 16px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-error);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pin-error.hidden {
  visibility: hidden;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  grid-auto-rows: 72px;
  gap: 14px;
}

.key {
  border: none;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-on-background);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.08s ease;
}

.key:active {
  background: var(--color-surface-raised);
  transform: scale(0.94);
}

.key-spacer {
  background: transparent;
  pointer-events: none;
}

.key-action {
  background: transparent;
  color: var(--color-on-surface-muted);
}

.key-action:active {
  background: var(--color-surface-raised);
}

/* ---------------------------------------------------------------------------------------
   Viewer
--------------------------------------------------------------------------------------- */

.viewer-screen {
  position: fixed;
  inset: 0;
  animation: fade-in 0.35s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------------------------------
   App screens — connect / hub / camera / app usage. Exactly one is visible at a time,
   swapped by app.js's showScreen(); the status pill and in-use banner above stay visible
   across all of them since connection health is relevant no matter which screen is up.
--------------------------------------------------------------------------------------- */

.app-screen {
  position: fixed;
  inset: 0;
}

.app-screen:not(.hidden) {
  animation: fade-in 0.25s ease;
}

#connectScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
}

/* ---------------------------------------------------------------------------------------
   Hub — landing page right after connecting, before picking Camera or App Usage.
--------------------------------------------------------------------------------------- */

#hubScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 110px 24px 32px;
  background: radial-gradient(circle at 50% 0%, #1A2130 0%, var(--color-background) 60%);
}

/* The in-use banner is only ever a handful of lines tall, but on narrow screens it can wrap
   enough to reach past the default 110px clearance above — only reserve the extra room while
   it's actually showing (see --chrome-clearance) instead of leaving a permanent empty gap. */
body:has(#inUseBanner:not(.hidden)) #hubScreen {
  padding-top: calc(var(--chrome-clearance) + 24px);
}

.hub-title {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hub-subtitle {
  margin: -20px 0 0;
  font-size: 13px;
  color: var(--color-on-surface-muted);
  text-align: center;
}

.hub-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 460px;
}

.hub-card {
  flex: 1 1 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: none;
  border-radius: 20px;
  padding: 28px 20px;
  color: var(--color-on-background);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.hub-card:active {
  background: var(--color-surface-raised);
  transform: scale(0.97);
}

.hub-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.hub-card-title {
  font-size: 16px;
  font-weight: 700;
}

.hub-card-sub {
  font-size: 12px;
  color: var(--color-on-surface-muted);
  text-align: center;
  line-height: 1.4;
}

.hub-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hub-disconnect {
  border: none;
  background: transparent;
  color: var(--color-error);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
}

.hub-disconnect.neutral {
  color: var(--color-on-surface-muted);
}

.hub-disconnect:active {
  opacity: 0.7;
}

/* ---------------------------------------------------------------------------------------
   Device picker — the connect screen's content: a live list of registered Device A installs
   (see devices/{deviceId} in firestore.rules) instead of one fixed "Connect Device" button, so
   a single PIN login can pick between several devices.
--------------------------------------------------------------------------------------- */

.device-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  box-sizing: border-box;
}

.device-picker-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

.device-picker-subtitle {
  margin: -12px 0 0;
  font-size: 13px;
  color: var(--color-on-surface-muted);
  text-align: center;
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.device-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  background: var(--color-surface);
  border: none;
  border-radius: 16px;
  padding: 14px 18px;
  color: var(--color-on-background);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.device-card:active {
  background: var(--color-surface-raised);
  transform: scale(0.98);
}

.device-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.device-card-name {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.device-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-on-surface-muted);
}

.device-list-empty {
  font-size: 13px;
  color: var(--color-on-surface-muted);
  text-align: center;
  margin: 0;
}

/* ---------------------------------------------------------------------------------------
   Back button — top-left on the Camera and App Usage screens.
--------------------------------------------------------------------------------------- */

.back-button {
  position: fixed;
  top: 20px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-raised);
  color: var(--color-on-background);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.back-button:active {
  filter: brightness(0.9);
}

/* Mirrors the back button but on the top-right — toggles the controls row on the Camera screen. */
.controls-toggle-button {
  left: auto;
  right: 16px;
}

.controls-toggle-button.active {
  background: var(--color-primary);
}

/* ---------------------------------------------------------------------------------------
   App Usage screen chrome — the dashboard content itself (device-activity-* classes) lives
   in device-dashboard.css.
--------------------------------------------------------------------------------------- */

#appUsageScreen {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  overflow: hidden;
}

.app-usage-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 76px 20px 16px 68px;
  flex-shrink: 0;
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Same reasoning as #hubScreen above — extra headroom only while the (possibly multi-line)
   in-use banner is actually on screen, so it can never sit on top of the "App Usage" title. */
body:has(#inUseBanner:not(.hidden)) .app-usage-header {
  padding-top: calc(var(--chrome-clearance) + 20px);
}

.app-usage-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-usage-content {
  flex: 1;
  /* Explicit on both axes: setting only overflow-y implicitly makes overflow-x compute to
     "auto" per spec, which is exactly what was producing the stray horizontal scrollbar
     whenever any child (long app names, wide stat grids) nudged past the container width. This
     dashboard only ever needs to scroll vertically. */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

#video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-background);
}

.camera-off-placeholder {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-background);
  color: var(--color-on-surface-muted);
  font-size: 14px;
  font-weight: 600;
  /* Deliberately low — an element with ANY explicit z-index paints above elements left at the
     default z-index:auto regardless of DOM order, so without this being kept below the controls
     row / back button (which need their own explicit z-index values below), the placeholder
     would cover them and leave no way to reach the controls to turn the camera back on. */
  z-index: 1;
}

.audio-visualizer {
  width: 240px;
  height: 64px;
  max-width: 60vw;
}

.scrim {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.scrim-top {
  top: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

.scrim-bottom {
  bottom: 0;
  height: 150px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.pill {
  position: fixed;
  display: flex;
  align-items: center;
  /* Fixed height, single row — never wraps to a second line (that was what grew the pill taller
     than expected and let it overlap the back button / hub content below it on mobile). If the
     content is wider than the available space, the pill scrolls horizontally instead of growing
     vertically or clipping. */
  flex-wrap: nowrap;
  gap: 8px;
  background: var(--color-surface);
  border-radius: 20px;
  padding: 10px 10px 10px 16px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 30;
  /* Inset enough on each side (40px back-button/controls-toggle-button footprint + a small
     buffer) that even a maximally wide pill can never sit underneath those fixed corner
     buttons on the Camera / App Usage screens — avoids a real overlap instead of just hoping
     the content is short. Long status text still scrolls horizontally inside the pill itself. */
  max-width: calc(100% - 128px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.pill::-webkit-scrollbar {
  display: none;
}

.pill > * {
  flex-shrink: 0;
}

.pill-top {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-on-surface-muted);
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.dot.live {
  background: var(--color-live);
}

/* Device A's own clock (see setDeviceClock() in app.js) — a lighter weight than the rest of the
   pill's bold text since it's purely informational, not a status. */
.device-clock-text {
  color: var(--color-on-surface-muted);
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}

.device-clock-text:empty {
  display: none;
}

.in-use-banner {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  /* A block box with only max-width set sizes itself via shrink-to-fit, which for wrapping text
     can settle on a narrow, tall column instead of using the space available — width:max-content
     makes it prefer a single line and only wrap once it actually hits max-width, and the
     matching inset (see .pill above) keeps it clear of the corner buttons on every screen. */
  width: max-content;
  max-width: calc(100% - 128px);
  background: var(--color-error);
  color: var(--color-on-background);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: clamp(12px, 3.4vw, 13px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 30;
}

.debug-toggle {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-on-surface-muted);
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.debug-pill {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  margin: 0;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #B9F5EC;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
  z-index: 999;
}

.watch-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;
  background: var(--color-primary);
  color: var(--color-on-background);
  border: none;
  border-radius: 28px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(76, 111, 255, 0.4);
  z-index: 3;
  max-width: calc(100% - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}

.watch-button::-webkit-scrollbar {
  display: none;
}

.watch-button:active {
  background: var(--color-primary-dim);
}

/* The connect button is vertically centered on the viewport; on a very short screen a wrapped
   in-use banner could reach far enough down to overlap it, so nudge it down out of the way
   while the banner is visible instead of letting it stay pinned to the exact center. */
body:has(#inUseBanner:not(.hidden)) #connectScreen .watch-button {
  top: max(50%, calc(var(--chrome-clearance) + 40px));
}

.controls {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 300px;
  z-index: 10;
}

.icon-button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-raised);
  color: var(--color-on-background);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease;
}

.icon-button:active {
  filter: brightness(0.9);
}

.icon-button.active {
  background: var(--color-primary);
}

.quality-button {
  width: auto;
  min-width: 60px;
  padding: 0 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

/* PREMIUM CSS-ONLY UI POLISH */
:root{--glass:rgba(31,31,31,.72);--glass-border:rgba(255,255,255,.09);--soft-border:rgba(255,255,255,.06);--red-glow:rgba(229,9,20,.28)}
button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.lock-screen{background:radial-gradient(circle at 50% -10%,rgba(229,9,20,.13),transparent 34%),radial-gradient(circle at 15% 90%,rgba(64,83,140,.12),transparent 34%),var(--color-background)}
.lock-card{max-width:350px;padding:clamp(24px,5vw,38px);border:1px solid var(--glass-border);border-radius:28px;background:linear-gradient(145deg,rgba(43,43,43,.66),rgba(20,20,20,.72));box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.045);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.lock-icon{background:rgba(229,9,20,.12);border:1px solid rgba(229,9,20,.2);box-shadow:0 0 34px var(--red-glow)}
.pin-dot.filled{box-shadow:0 0 14px rgba(229,9,20,.5)}
.key{border:1px solid var(--soft-border);background:rgba(43,43,43,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.key:hover{background:rgba(55,55,55,.9)}
.key-action,.key-spacer{border-color:transparent;box-shadow:none}
.pill{border:1px solid var(--glass-border);background:var(--glass);box-shadow:0 12px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
.dot{box-shadow:0 0 0 4px rgba(179,179,179,.08)}
.dot.live{box-shadow:0 0 0 4px rgba(70,211,105,.12),0 0 13px rgba(70,211,105,.75);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
#connectScreen{background:radial-gradient(circle at 50% 35%,rgba(229,9,20,.12),transparent 28%),var(--color-background)}
.watch-button{border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 34px rgba(229,9,20,.28),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .18s ease,box-shadow .18s ease}
.watch-button:hover{transform:translate(-50%,-50%) scale(1.035);box-shadow:0 16px 42px rgba(229,9,20,.38)}
#hubScreen{background:radial-gradient(circle at 50% -8%,rgba(229,9,20,.11),transparent 30%),radial-gradient(circle at 10% 90%,rgba(42,61,110,.12),transparent 32%),var(--color-background)}
.hub-title{font-size:clamp(24px,4vw,34px);letter-spacing:-.035em}
.hub-card{position:relative;overflow:hidden;border:1px solid var(--glass-border);background:linear-gradient(145deg,rgba(43,43,43,.9),rgba(31,31,31,.76));box-shadow:0 16px 42px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.hub-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(229,9,20,.12),transparent 48%);opacity:0;transition:opacity .22s ease;pointer-events:none}
.hub-card:hover{transform:translateY(-5px);border-color:rgba(229,9,20,.32);box-shadow:0 22px 54px rgba(0,0,0,.44),0 0 30px rgba(229,9,20,.08)}
.hub-card:hover::before{opacity:1}.hub-card:active{transform:translateY(-1px) scale(.98)}
.hub-card-icon{position:relative;background:rgba(229,9,20,.12);border:1px solid rgba(229,9,20,.17);box-shadow:0 0 28px rgba(229,9,20,.11)}
.hub-card-title,.hub-card-sub{position:relative}
.back-button{border:1px solid var(--glass-border);background:rgba(31,31,31,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .18s ease,background-color .18s ease}
.back-button:hover{background:rgba(52,52,52,.84);transform:scale(1.06)}
.scrim-top{height:clamp(130px,20vh,210px);background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.22) 55%,transparent)}
.scrim-bottom{height:clamp(190px,32vh,330px);background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.26) 58%,transparent)}
.controls{padding:10px;border:1px solid var(--glass-border);border-radius:32px;background:rgba(20,20,20,.72);box-shadow:0 18px 50px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.055);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
.icon-button{border:1px solid rgba(255,255,255,.065);background:rgba(55,55,55,.78);box-shadow:none;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}
.icon-button:hover{transform:translateY(-2px);background:rgba(72,72,72,.92)}
.icon-button.active{box-shadow:0 0 22px rgba(229,9,20,.34)}
.app-usage-header{position:relative;z-index:8;background:rgba(20,20,20,.82);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:0 10px 30px rgba(0,0,0,.16)}
.device-activity-updated{padding:5px 8px;border:1px solid var(--soft-border);border-radius:999px;background:rgba(255,255,255,.035)}
.in-use-banner{border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 28px rgba(229,9,20,.18)}
@media(hover:none){.hub-card:hover,.back-button:hover,.icon-button:hover{transform:none}.watch-button:hover{transform:translate(-50%,-50%)}}
@media(max-width:639px){.lock-card{border-radius:24px}.controls{border-radius:28px}}

/* FULL RESPONSIVE HARDENING — 320px to ultrawide, portrait/landscape and safe areas */
html,body{width:100%;max-width:100%;min-width:0;height:100%;min-height:100%;overflow:hidden}
body{height:100dvh}
svg,video,canvas{max-width:100%}
.lock-screen,.viewer-screen,.app-screen{width:100%;max-width:100%;min-width:0;min-height:100dvh}
.lock-screen{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow-y:auto;overflow-x:hidden}
.lock-card{width:min(100%,350px);min-width:0;margin:auto}
.keypad{width:min(100%,244px);grid-template-columns:repeat(3,minmax(0,72px));grid-auto-rows:min(72px,18vw);justify-content:center}
.key{width:100%;min-width:0;min-height:0;aspect-ratio:1}

#hubScreen{min-height:100dvh;overflow-y:auto;overflow-x:hidden;justify-content:safe center;padding:max(110px,calc(env(safe-area-inset-top) + 92px)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.hub-cards,.hub-card,.hub-card-title,.hub-card-sub{min-width:0;max-width:100%}
.hub-card-title,.hub-card-sub{overflow-wrap:anywhere;word-break:break-word}

.back-button{top:max(20px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}
.controls-toggle-button{left:auto;right:max(16px,env(safe-area-inset-right))}

#appUsageScreen{min-width:0;min-height:100dvh}
.app-usage-header{width:100%;min-width:0;padding-right:max(12px,env(safe-area-inset-right))}
.app-usage-title,.device-activity-updated{min-width:0}
.device-activity-updated{max-width:42%;overflow:hidden;text-overflow:ellipsis}
.app-usage-content{min-width:0;width:100%;max-width:1100px;padding:20px max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow-x:hidden;scrollbar-gutter:stable}

.pill{min-width:0;max-width:min(560px,calc(100% - 128px))}
.pill-top{top:max(24px,env(safe-area-inset-top))}
#statusText{min-width:0;overflow:hidden;text-overflow:ellipsis}
.in-use-banner{top:max(68px,calc(env(safe-area-inset-top) + 56px))}
.watch-button{min-width:0;justify-content:center}

.controls{bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));width:min(calc(100% - 24px),430px);max-width:none;gap:clamp(8px,2.5vw,14px)}
.icon-button{flex:0 0 52px}.quality-button{flex-basis:auto}
.debug-pill{max-height:min(42dvh,320px);overflow-y:auto;overflow-x:hidden}

@media(max-width:639px){
  #hubScreen{gap:22px}
  .hub-cards{max-width:360px}
  .hub-card{flex-basis:100%;padding:20px 18px}
  .app-usage-header{gap:8px;padding-left:64px}
  .app-usage-title{font-size:16px}
  .device-activity-updated{font-size:10px}
  .controls{width:min(calc(100% - 16px),390px);padding:8px}
}

@media(max-width:374px){
  :root{--chrome-clearance:198px}
  .lock-card{padding:20px 16px}
  .lock-icon{width:50px;height:50px;margin-bottom:12px}
  .lock-subtitle{margin-bottom:18px}
  .pin-dots{margin-bottom:10px}
  .keypad{width:min(100%,220px);grid-auto-rows:min(64px,18vw);gap:10px}
  .pill{gap:6px;padding:9px 8px 9px 12px;font-size:12px}
  .app-usage-header{padding-left:60px;padding-right:10px}
  .app-usage-content{padding-left:8px;padding-right:8px}
  .controls{width:calc(100% - 10px);gap:6px;padding:7px}
  .icon-button{width:44px;height:44px;flex-basis:44px}
  .quality-button{min-width:54px;padding:0 10px;flex-basis:auto}
}

@media(max-height:680px){
  .lock-screen{align-items:flex-start}
  .lock-card{padding-block:16px}
  .lock-icon{width:46px;height:46px;margin-bottom:8px}
  .lock-subtitle{margin:4px 0 12px}
  .pin-dots{margin-bottom:8px}.pin-error{margin-bottom:6px}
  .keypad{grid-auto-rows:min(56px,13dvh);gap:7px}
  #hubScreen{justify-content:flex-start;gap:16px}
  .hub-subtitle{margin-top:-10px}
  .hub-card{padding-top:16px;padding-bottom:16px}
  .hub-card-icon{width:44px;height:44px;margin-bottom:2px}
  .controls{bottom:max(8px,env(safe-area-inset-bottom))}
}

@media(orientation:landscape) and (max-height:520px){
  .lock-card{max-width:620px;padding:12px 22px}
  .lock-icon{display:none}
  .lock-subtitle{margin-bottom:8px}
  .pin-dots{margin-bottom:6px}
  .keypad{width:min(100%,400px);grid-template-columns:repeat(6,minmax(0,58px));grid-auto-rows:min(54px,16vh);gap:8px}
  .key-spacer{display:none}
  #hubScreen{padding-top:max(82px,calc(env(safe-area-inset-top) + 70px));gap:10px}
  .hub-title{font-size:22px}.hub-subtitle{margin-top:-6px}
  .hub-cards{max-width:700px;flex-wrap:nowrap}
  .hub-card{padding:12px 18px;min-height:0}
  .hub-card-icon{width:40px;height:40px}
  .controls{width:min(calc(100% - 140px),520px);flex-wrap:nowrap;padding:7px;gap:8px}
  .icon-button{width:44px;height:44px;flex-basis:44px}
  .quality-button{flex-basis:auto}
}

@media(min-width:640px){
  .hub-card{min-height:190px}
  .app-usage-content{padding:24px}
}

@media(min-width:1024px){
  .app-usage-content{max-width:1180px;padding:28px}
  .hub-cards{max-width:620px}
}

@media(min-width:1440px){
  .app-usage-content{max-width:1320px}
  .hub-cards{max-width:700px}
}

@media(min-width:1920px){
  .app-usage-content{max-width:1500px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}