/* Server */
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 16px 0 12px; }
.kv .card { padding: var(--pad-y) var(--pad-x); }
.kv b { display: block; font-size: var(--t-stat); font-weight: 650; letter-spacing: -.03em; }
.kv small { color: var(--muted); font-size: var(--t-sm); }
.srow { display: flex; align-items: center; gap: var(--gap); padding: 11px 0; border-top: 1px solid var(--line); font-size: var(--t-base); }
.srow:first-of-type { border-top: 0; }
.srow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .vl { color: var(--muted); font-size: var(--t-md); white-space: nowrap; }
.srow .dot { width: 8px; height: 8px; box-shadow: none; }
.srow .nm small { display: block; color: var(--faint); font-size: var(--t-xs); white-space: normal; }
.ai-p { display: inline-block; font-style: normal; margin-left: var(--sp-2); padding: 1px var(--sp-2); border-radius: var(--r-xs); background: color-mix(in srgb, var(--src-ai) 16%, transparent); color: var(--src-ai); font-size: var(--t-2xs); font-weight: 650; vertical-align: 2px; }
.ai-lock { flex: none; width: var(--g-xs); height: var(--g-xs); color: var(--faint); }
.ai-btn { flex: none; height: var(--h-chip); padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--raised); font-size: var(--t-md); font-weight: 600; }
.ai-btn.no { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-2); }
.ai-btn.wait { color: var(--muted); }
.ai-mem { display: flex; height: 6px; margin: var(--sp-1) 0 var(--sp-2); border-radius: 3px; background: var(--raised); overflow: hidden; }
.ai-mem i { display: block; height: 100%; background: var(--faint); }
.ai-mem i.ai { background: var(--src-ai); }
.ai-key { color: var(--faint); font-size: var(--t-xs); margin-bottom: var(--sp-1); }
.ai-sub { display: flex; align-items: center; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); padding: var(--sp-2) 0; text-align: left; color: var(--faint); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ai-sub em { margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.ai-sub .chev { flex: none; width: var(--g-xs); height: var(--g-xs); transition: transform .15s ease; }
.ai-sub .chev svg { width: 100%; height: 100%; }
.ai-sub.open .chev { transform: rotate(90deg); }

/* Server actions */
.acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--gap); margin-top: 16px; }
.home-acts { margin-top: 12px; }
.act .badge.l { right: auto; left: var(--sp-2); }
.act .badge { position: absolute; top: var(--sp-2); right: var(--sp-2); min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-full);
  background: var(--sel); color: var(--on-sel); font: 700 11.5px/19px Inter, system-ui, sans-serif; font-style: normal; text-align: center; }
.act .badge[hidden] { display: none; }
.act { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 var(--sp-2);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-align: center; transition: transform .12s ease;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; height: var(--h-tile); justify-content: center; }
.act:active { transform: scale(.97); }
.act svg { width: var(--g-xl); height: var(--g-xl); position: relative; }
.act span { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act.danger { color: var(--bad); }
.act .fill { position: absolute; inset: 0; background: color-mix(in srgb, var(--bad) 20%, transparent); transform: scaleX(0); transform-origin: left; }
.act.holding .fill { transform: scaleX(1); transition: transform 2s linear !important; }
.act[disabled] { opacity: .45; pointer-events: none; }
#act-msg { margin: 10px 4px 0; }

/* Bottom sheet (restart an app) */
.sheet-wrap { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-wrap[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: fade .2s ease; }
.sheet { position: relative; width: 100%; max-width: 560px; margin: 0 auto; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid var(--line-2); animation: rise .28s cubic-bezier(.2,.8,.2,1);
  padding: 0 max(18px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
@keyframes rise { from { transform: translateY(100%); } }
.grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 4px; }
.sheet-head { display: flex; align-items: center; gap: var(--gap); padding: 0 0 var(--sp-3); touch-action: none; }
.sheet-head h2 { flex: 1; min-width: 0; font-size: var(--t-xl); font-weight: 650; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grab { touch-action: none; }
.grab::before { content: ''; display: block; height: 18px; margin: -8px -40px 0; }  /* a bigger target to drag the sheet down */
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.arow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: var(--t-base); }
.arow:first-child, .agroup + .arow { border-top: 0; }
.agroup { display: flex; justify-content: space-between; margin: var(--sp-5) 0 var(--sp-1); font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.agroup:first-child { margin-top: 0; }
.agroup span { font-weight: 500; letter-spacing: 0; }
.arow .dot { flex: none; width: 8px; height: 8px; box-shadow: none; }
.arow .nm { flex: 1; min-width: 0; }
.arow .nm small { display: block; color: var(--faint); font-size: var(--t-sm); }
.arow button { flex: none; height: var(--h-btn-sm); padding: 0 14px; border-radius: var(--r-sm); background: var(--card); font-size: var(--t-md); font-weight: 600; }
.arow button.sure { background: var(--inv); color: var(--on-inv); }
.arow button[disabled] { opacity: .5; }

/* Apps */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.app { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-width: 0; text-align: left; transition: transform .12s ease; }
.app .ic { width: var(--ic-sm); height: var(--ic-sm); border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg); flex: none; position: relative; }
.app .ic img { width: 22px; height: 22px; filter: grayscale(1) contrast(1.1); }
.app .ic i { position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--card); }
.app .ic i.up { background: var(--good); } .app .ic i.down { background: var(--bad); }
.app span:last-child { min-width: 0; }
.app b { display: block; font-size: var(--t-md); font-weight: 600; line-height: 1.25; }
.app small { display: block; color: var(--faint); font-size: var(--t-xs); line-height: 1.3; }
.app b, .app small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* one line each: every app card is the same height */
.app-add { background: transparent; box-shadow: inset 0 0 0 var(--hair) var(--line-2); }
.app-add .ic b { font-size: var(--t-xl); color: var(--muted); }
.app-add.wide { grid-column: 1 / -1; }
@media (min-width: 640px) { .apps { grid-template-columns: repeat(3, 1fr); } }

/* Status bar area: content softly blurs away under the clock and Dynamic Island, like Apple's own apps.
   Three stacked layers with stronger blur nearer the top give a progressive blur. Zero height in a normal browser tab. */
.edge { position: fixed; top: 0; left: 0; right: 0; z-index: 40; pointer-events: none; height: calc(env(safe-area-inset-top, 0px) * 1.45); }
.edge i { position: absolute; inset: 0; }
.edge i:nth-child(1) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.edge i:nth-child(2) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 80%); mask-image: linear-gradient(to bottom, #000 40%, transparent 80%); }
.edge i:nth-child(3) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 70%); mask-image: linear-gradient(to bottom, #000 30%, transparent 70%); }
.mon-off { margin-top: var(--sp-4); }
.act[hidden] { display: none; }