html, body { height: 100%; margin: 0; }
  #root { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
  .device-holder { position: relative; }

  .device {
    position: relative; width: 390px; height: 844px;
    background: #0b0b0d; border-radius: 58px; padding: 12px; flex: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 40px 90px -30px rgba(120,82,60,.5),
                inset 0 0 2px 2px rgba(255,255,255,.18);
  }
  .device-inner { position: relative; width: 100%; height: 100%;
    border-radius: 46px; overflow: hidden; background: var(--surface-strong);
    display: flex; flex-direction: column; }
  .island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 122px; height: 34px; background: #000; border-radius: 20px; z-index: 50; }
  .statusbar { flex: none; height: 50px; display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 30px 4px; font-family: var(--font-body); font-weight: 700; font-size: .92rem;
    color: var(--ink); z-index: 6; }
  .statusbar .sig { display: flex; align-items: center; gap: 6px; }
  .stage { position: relative; flex: 1; overflow: hidden; }
  .home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 134px; height: 5px; border-radius: 3px; background: rgba(120,82,60,.3); z-index: 30; }