html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0b0b0c; }
    .wrap { height: 100%; display: grid; grid-template-rows: 1fr auto; }

    model-viewer {
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 30%, #1b1b1f, #0b0b0c);
    }

    /* AR button styling (slot="ar-button") */
    .ar-btn {
      position: absolute;
      left: 16px;
      bottom: 16px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      backdrop-filter: blur(10px);
    }
    .ar-btn:hover { background: rgba(255,255,255,0.12); }

    .ar-controls {
      position: absolute;
      right: 16px;
      bottom: 16px;
      display: grid;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }
    .ar-controls.is-active {
      opacity: 1;
      pointer-events: auto;
    }
    .ar-group {
      display: grid;
      grid-auto-flow: column;
      gap: 8px;
      justify-content: end;
    }
    .ar-chip {
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(20,20,24,0.65);
      color: #fff;
      font-weight: 600;
      cursor: pointer;
      backdrop-filter: blur(10px);
      white-space: nowrap;
    }
    .ar-chip:hover { background: rgba(30,30,36,0.8); }
    .ar-chip--ghost {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.18);
    }

    .bar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      padding: 12px 14px;
      align-items: center;
      border-top: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(10px);
      color: rgba(255,255,255,0.85);
      font-size: 13px;
    }

    .pill {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-weight: 650;
      cursor: pointer;
      user-select: none;
    }
    .pill:hover { background: rgba(255,255,255,0.10); }

    .status { opacity: 0.9; line-height: 1.3; }
    .status b { color: #fff; }