/* PC Remote - iPhone-first monochrome UI.

   Palette: there isn't one. Everything is black, white, or a transparency of
   white, so the only things that carry colour are the desktop you are looking
   at and your own wallpaper. Hierarchy is done with weight, size and opacity
   instead of hue, which is why the greys below are rgba white rather than flat
   greys - they sit on the moving background without punching holes in it. */
:root {
  --bg: #000;
  --bg-2: #0a0a0b;

  /* Materials: translucent white over black, the way iOS layers surfaces. */
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .085);
  --surface-3: rgba(255, 255, 255, .13);
  --hairline: rgba(255, 255, 255, .10);
  --hairline-2: rgba(255, 255, 255, .18);

  --text: #f5f5f7;
  --text-2: rgba(255, 255, 255, .64);
  --muted: rgba(255, 255, 255, .45);
  --faint: rgba(255, 255, 255, .28);

  --accent: #fff;
  --accent-ink: #000;           /* text/icons sitting on an accent fill */

  /* Status reads as brightness, not colour. --danger is the one dial to turn
     if you ever want destructive actions to go red again: set it to #ff453a
     and the shutdown, delete and end-process controls pick it up. */
  --good: #fff;
  --warn: rgba(255, 255, 255, .55);
  --danger: #fff;

  /* Kept as aliases so nothing that still asks for the old names breaks. */
  --card: var(--surface);
  --card-2: var(--surface-2);
  --line: var(--hairline);
  --accent-2: var(--accent);

  --radius: 18px;
  --radius-sm: 12px;
  --tabbar-h: 56px;
  --ease: cubic-bezier(.32, .72, 0, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* File types, app shortcuts and sheet rows are labelled with emoji, which are
   the one place colour could sneak back in. Draining them keeps the palette
   honest without having to invent a bespoke glyph for every file extension.
   Brightness is lifted because several emoji are nearly black once desaturated,
   which would leave them invisible here. */
.fico, .app-ico, .sheet-action .ico {
  filter: grayscale(1) brightness(1.45) contrast(.85);
}

/* ───────────────── moving orbs ─────────────────
   Four soft lights drifting behind everything. They are radial gradients with
   a feathered edge rather than blurred boxes: a real blur filter over this much
   area costs a phone far too much, and the gradient is indistinguishable once
   it is this diffuse. Only transform is animated, so the whole layer lives on
   the compositor and never repaints.

   The layer stops moving whenever it would be wasteful or unwelcome: while the
   desktop is streaming, while the app is backgrounded, and for anyone who asked
   their system to reduce motion. */
.orbs {
  position: fixed; inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.45, .05, .55, .95);
  animation-direction: alternate;
}
.orb-1 {
  width: 62vmax; height: 62vmax; top: -18vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 38%, transparent 68%);
  animation-name: drift-1; animation-duration: 34s;
}
.orb-2 {
  width: 48vmax; height: 48vmax; top: 32vmax; right: -16vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .038) 40%, transparent 70%);
  animation-name: drift-2; animation-duration: 43s;
}
.orb-3 {
  width: 40vmax; height: 40vmax; bottom: -10vmax; left: 14vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .095) 0%, rgba(255, 255, 255, .032) 42%, transparent 72%);
  animation-name: drift-3; animation-duration: 52s;
}
.orb-4 {
  width: 30vmax; height: 30vmax; top: 6vmax; right: 10vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, .08) 0%, transparent 66%);
  animation-name: drift-4; animation-duration: 61s;
}

@keyframes drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vmax, 9vmax, 0) scale(1.12); }
}
@keyframes drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-14vmax, -11vmax, 0) scale(.92); }
}
@keyframes drift-3 {
  from { transform: translate3d(0, 0, 0) scale(.95); }
  to   { transform: translate3d(10vmax, -8vmax, 0) scale(1.15); }
}
@keyframes drift-4 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-9vmax, 12vmax, 0) scale(1.08); }
}

body.calm .orb { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}

/* ───────────────── gate ───────────────── */
.gate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 24px);
  background: transparent;
  z-index: 50;
}
.gate-inner { width: 100%; max-width: 340px; text-align: center; }
.gate-logo { margin-bottom: 22px; opacity: .95; }
.gate h1 {
  font-size: 30px; margin: 0 0 8px;
  letter-spacing: -0.035em; font-weight: 600;
}
.gate p { margin: 0 0 30px; font-size: 15px; color: var(--text-2); }
#gateForm, #connectForm { display: flex; flex-direction: column; gap: 10px; }
#connectForm .gate-hint { margin-top: 8px; }

.gate input {
  width: 100%; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px;
  color: var(--text); font-size: 17px; outline: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.gate input::placeholder { color: var(--faint); }
.gate input:focus { border-color: var(--hairline-2); background: var(--surface-2); }

.btn-primary {
  padding: 16px; border: 0; border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.btn-primary:active { transform: scale(.975); opacity: .9; }
.btn-primary:disabled { opacity: .38; }

.gate-error {
  background: var(--surface-2); border: 1px solid var(--hairline-2);
  color: var(--text); padding: 12px 15px; border-radius: 12px; font-size: 14px;
}
.gate-hint {
  margin-top: 24px; padding: 15px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--muted); font-size: 13px; line-height: 1.55; text-align: left;
}
.gate-hint b { color: var(--text); font-weight: 600; }
.linkish {
  margin-top: 20px; background: none; border: 0;
  color: var(--text-2); font-size: 14px; font-weight: 500; padding: 8px;
}
.linkish:active { color: var(--text); }

/* ───────────────── app shell ─────────────────
   --vvh tracks visualViewport so the UI sits above the iPhone keyboard. */
#app {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--vvh, 100%);
  display: flex; flex-direction: column;
  z-index: 1;
}

.page {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  display: flex; flex-direction: column;
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(var(--safe-t) + 12px) 18px 12px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 9px; min-width: 0;
}
.topbar-title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.conn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); flex: 0 0 auto;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.conn-dot.on { background: var(--good); box-shadow: 0 0 10px rgba(255, 255, 255, .55); }
.conn-dot.wait { background: var(--warn); }

.chip {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.chip.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.chip:active { opacity: .7; }

.scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 18px calc(24px + var(--safe-b));
  overscroll-behavior: contain;
}

/* ───────────────── cards ───────────────── */
.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.card-title {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px;
}
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.row.col { flex-direction: column; align-items: stretch; }

.btn {
  flex: 1; padding: 13px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink); font-size: 15px; font-weight: 600;
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.btn.ghost { background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text); }
.btn.danger {
  background: transparent; border: 1px solid var(--hairline-2);
  color: var(--danger); font-weight: 600;
}
.btn:active { transform: scale(.98); opacity: .78; }

.mini {
  padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-2);
}
.icon-btn {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--hairline); color: var(--text);
  transition: background .15s var(--ease);
}
.icon-btn:active { background: var(--surface-3); }

textarea, input[type=text], input[type=search], input[type=password] {
  width: 100%; padding: 13px 15px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  color: var(--text); font-size: 16px; font-family: inherit; outline: none;
  resize: none; -webkit-appearance: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
textarea::placeholder, input::placeholder { color: var(--faint); }
textarea:focus, input:focus { border-color: var(--hairline-2); background: var(--surface-2); }

/* ───────────────── remote page ─────────────────
   The display on top and the trackpad below, but not in equal halves: the
   picture is the thing being read and needs the room, while the trackpad only
   has to be big enough for a thumb to sweep across. */
.remote-split {
  flex: 1 1 auto; display: flex; flex-direction: column;
  min-height: 0; padding: 10px 12px 0; gap: 10px;
}

/* The display takes everything the trackpad does not need. A thumb needs a
   couple of hundred pixels to sweep across and no more, so the rest of the
   page belongs to the picture - and to the room to pinch into it. */
.screen-wrap {
  flex: 1 1 auto; min-height: 0; position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--hairline);
}
.screen-waiting {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: 14px; pointer-events: none;
}
.screen-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; }

/* Positioned at the origin so the pan/zoom transform is the only thing that
   places it - flex centering would fight the maths. */
#screenImg {
  position: absolute; top: 0; left: 0;
  display: block; max-width: none; transform-origin: 0 0;
  image-rendering: auto; pointer-events: none;
  will-change: transform;
}
.screen-hud {
  position: absolute; top: 9px; right: 9px;
  display: flex; align-items: center; gap: 8px;
}
.screen-hud .mini {
  padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--text);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
}
.screen-hud .mini:active { opacity: .7; }

.trackpad {
  flex: 0 0 auto; height: min(32%, 230px); min-height: 132px;
  border-radius: var(--radius); position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  touch-action: none;
  display: grid; place-items: center;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.trackpad.active { border-color: var(--hairline-2); background: var(--surface-2); }
.trackpad.dragging { border-color: rgba(255, 255, 255, .38); background: var(--surface-3); }
.trackpad-hint {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  color: var(--text-2); font-size: 14px; text-align: center; padding: 0 20px;
  transition: opacity .25s var(--ease); pointer-events: none;
}
.trackpad-hint strong { font-size: 17px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
.trackpad.active .trackpad-hint { opacity: .2; }

/* Which display to watch, sat beside the PC name. Short labels because three
   buttons plus the quality chip have to share one narrow row. */
.monseg {
  display: flex; gap: 2px; padding: 2px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 999px; margin-left: 8px;
}
.monseg button {
  padding: 6px 11px; border-radius: 999px; border: 0;
  background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.monseg button.on { background: var(--accent); color: var(--accent-ink); }
.monseg button:disabled { opacity: .3; }

/* keyboard button + mouse buttons, directly under the trackpad */
.actionbar {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
}
.actionrow { display: flex; gap: 8px; }
.actionrow .kb-open { flex: 1 1 0; justify-content: center; }
.mouse-btn {
  flex: 1; padding: 15px 8px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text); font-size: 16px; font-weight: 600;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.mouse-btn.narrow { flex: 0 0 58px; }
.mouse-btn:active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.kb-open {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  background: var(--accent);
  border: 0; color: var(--accent-ink); font-size: 15px; font-weight: 600;
}
.kb-open:active { opacity: .8; }
/* The display is the occasional trip, not the default action, so it reads as
   the quieter of the pair. */
.kb-open.ghost {
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
}

/* strip of special keys, revealed while the iPhone keyboard is up */
.keystrip {
  flex: 0 0 auto; display: none; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--hairline);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
body.kbd-open .keystrip { display: flex; }
.kb-done {
  flex: 0 0 auto; padding: 10px 15px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text); font-size: 14px; font-weight: 600;
}

/* While typing, the action bar and tab bar step aside to make room for the
   iPhone keyboard - but the trackpad stays. It used to go too, because the live
   screen filled the gap; with the screen now a layer of its own that would
   leave an empty page and no way to move the pointer mid-sentence. */
body.kbd-open .actionbar,
body.kbd-open .tabbar { display: none; }
body.kbd-open .page { bottom: 0; }

/* Typing while watching the display has to work too, so the key strip sits
   above the picture rather than behind it. */
.keystrip { position: relative; z-index: 70; }

.quick-keys { flex: 1 1 auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.quick-keys::-webkit-scrollbar { display: none; }
.qk {
  flex: 0 0 auto; min-width: 44px; padding: 11px 10px;
  border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--hairline); color: var(--text);
  font-size: 13px; font-weight: 500;
}
.qk:active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

#kbdCapture {
  position: fixed; bottom: 0; left: 0;
  width: 1px; height: 1px; opacity: 0; padding: 0; margin: 0; border: 0;
  font-size: 16px; /* keeps iOS from zooming when focused */
  z-index: -1;
}

/* ───────────────── keys page ───────────────── */
.vol-row { display: flex; align-items: center; gap: 14px; }
.vol-val { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
input[type=range] {
  flex: 1; -webkit-appearance: none; height: 30px; background: transparent; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--pct, 50%), var(--surface-3) var(--pct, 50%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; margin-top: -8.5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.media-row { display: flex; align-items: center; justify-content: center; gap: 26px; }
.media-btn {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text); display: grid; place-items: center;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.media-btn.big {
  width: 68px; height: 68px;
  background: var(--accent); border: 0; color: var(--accent-ink);
}
.media-btn:active { transform: scale(.93); }

.grid-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arrow-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gk {
  padding: 14px 6px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text); font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gk:active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ───────────────── files ───────────────── */
.filebar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-bottom: 1px solid var(--hairline);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.crumb-up {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text); font-size: 15px;
}
.crumbs {
  flex: 1 1 auto; display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; font-size: 13px; color: var(--muted); white-space: nowrap;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumbs span { flex: 0 0 auto; }
.crumbs b { color: var(--text); font-weight: 600; }

.searchbar { flex: 0 0 auto; padding: 12px 18px 4px; }
.searchbar input { margin-bottom: 6px; }

.frow {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 13px; border-radius: var(--radius-sm); margin-bottom: 4px;
  background: var(--surface); border: 1px solid transparent;
  transition: background .12s var(--ease);
}
.frow:active { background: var(--surface-2); border-color: var(--hairline); }
.fico {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--surface-2);
}
.fmeta { flex: 1 1 auto; min-width: 0; }
.fname { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fchev { color: var(--faint); font-size: 18px; flex: 0 0 auto; }

.section-head {
  font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; margin: 14px 4px 8px; font-weight: 600;
}
.empty { text-align: center; color: var(--muted); padding: 44px 20px; font-size: 14px; }

/* ───────────────── system ───────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 18px 12px; text-align: center;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.gauge { position: relative; width: 96px; height: 96px; margin: 0 auto 10px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.g-bg { stroke: var(--surface-3); }
.g-fg {
  stroke: var(--accent);
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset .7s var(--ease);
}
.g-fg.alt { stroke: rgba(255, 255, 255, .62); }
.gauge-val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.kv { display: flex; flex-direction: column; gap: 10px; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv-row span:first-child { color: var(--muted); flex: 0 0 auto; }
.kv-row span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.disk { margin-bottom: 14px; }
.disk:last-child { margin-bottom: 0; }
.disk-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
.bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .6s var(--ease); }
/* A nearly-full disk reads as a striped bar rather than a red one. */
.bar-fill.hot {
  background: repeating-linear-gradient(
    -45deg, #fff 0 5px, rgba(255, 255, 255, .45) 5px 10px);
}

/* A grid track defaults to min-content, so one long app name like "Task
   Manager" would push the whole row past the edge of the phone. minmax(0, 1fr)
   lets the track shrink and hands the job to the label's ellipsis instead. */
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 4px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  font-size: 11px; text-align: center;
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.app-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.app-btn:active { background: var(--surface-3); transform: scale(.95); }
.app-ico { font-size: 21px; }

.term-out {
  margin: 10px 0 0; padding: 13px; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .55); border: 1px solid var(--hairline);
  font: 12px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-2); max-height: 260px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text;
}

.proc-list { display: flex; flex-direction: column; gap: 5px; max-height: 340px; overflow-y: auto; }
.proc {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 11px; background: var(--surface-2);
}
.proc-name { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-mem { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.proc-kill {
  flex: 0 0 auto; padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: transparent; border: 1px solid var(--hairline-2); color: var(--danger);
}

/* ───────────────── power ───────────────── */
.power-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.pw {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 15px 4px; border-radius: 14px; font-size: 20px;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.pw svg { display: block; opacity: .92; }
.pw span { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.25; }
/* With no colour to spend, the weight of a destructive action is carried by how
   brightly its edge and label are lit. Every tile keeps the same fill so the
   grid stays even — hollowing the dangerous ones out would make them recede,
   which is the opposite of what they need to do. */
.pw.warn { border-color: rgba(255, 255, 255, .24); }
.pw.warn span { color: var(--text-2); }
.pw.danger { border-color: rgba(255, 255, 255, .42); }
.pw.danger span { color: var(--text); font-weight: 600; }
.pw.danger svg { opacity: 1; }
.pw:active { background: var(--surface-3); transform: scale(.95); }

.seg {
  display: flex; gap: 4px; padding: 3px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--hairline);
}
.seg button {
  flex: 1; padding: 10px 6px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.seg button.on { background: var(--surface-3); color: var(--text); font-weight: 600; }

.foot { text-align: center; padding: 18px 0 6px; color: var(--faint); }

/* ───────────────── tab bar ───────────────── */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex; align-items: stretch;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border-top: 1px solid var(--hairline);
  z-index: 10;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; color: var(--faint); font-size: 10px; font-weight: 500;
  padding: 6px 0;
  transition: color .18s var(--ease);
}
.tab.on { color: var(--text); }
.tab:active { opacity: .6; }

/* ───────────────── sheet + toast ───────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  z-index: 60;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: rgba(18, 18, 20, .92);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid var(--hairline);
  border-radius: 22px 22px 0 0;
  padding: 8px 18px calc(20px + var(--safe-b));
  max-height: 78vh; overflow-y: auto;
  animation: slideUp .32s var(--ease);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 5px auto 16px; }
.sheet h3 {
  margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.sheet-action {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 15px; margin-bottom: 8px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text); font-size: 15px; font-weight: 500; text-align: left;
}
.sheet-action:active { background: var(--surface-3); }
.sheet-action.danger { color: var(--danger); border-color: var(--hairline-2); background: transparent; }
.sheet-action .ico { font-size: 18px; width: 24px; text-align: center; flex: 0 0 auto; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px);
  z-index: 70; max-width: 88vw;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(24, 24, 26, .92);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  font-size: 14px; text-align: center; font-weight: 500;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .7);
  animation: toastIn .28s var(--ease);
}
.toast.err { background: rgba(255, 255, 255, .95); color: #000; border-color: transparent; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 700px) {
  .page { max-width: 560px; margin: 0 auto; }
  .tabbar { max-width: 560px; margin: 0 auto; }
}