:root {
  --zp-shell-bg: rgba(7, 10, 20, 0.88);
  --zp-shell-line: rgba(255, 255, 255, 0.14);
  --zp-shell-text: #eef5ff;
  --zp-shell-muted: #9aa8c8;
  --zp-shell-ice: #6ee7ff;
  --zp-shell-violet: #b98cff;
}

#zp-shell {
  position: fixed;
  z-index: 2147483000;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  color: var(--zp-shell-text);
  font: 600 13px/1.2 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  pointer-events: none;
}

#zp-shell *, #zp-shell *::before, #zp-shell *::after { box-sizing: border-box; }

.zp-shell__toggle,
.zp-shell__action {
  appearance: none;
  border: 1px solid var(--zp-shell-line);
  color: inherit;
  background: var(--zp-shell-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.zp-shell__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.zp-shell__orbit {
  width: 22px;
  height: 22px;
  border: 2px solid var(--zp-shell-ice);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
}

.zp-shell__orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 7px;
  right: 8px;
  border-radius: 50%;
  background: #ff8fd0;
  box-shadow: 0 0 9px #ff8fd0;
}

.zp-shell__panel {
  width: min(330px, calc(100vw - 20px));
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--zp-shell-line);
  border-radius: 18px;
  background: var(--zp-shell-bg);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
}

.zp-shell__panel[hidden] { display: none; }
.zp-shell__kicker { color: var(--zp-shell-ice); font-size: 10px; letter-spacing: 1.8px; }
.zp-shell__title { display: block; margin-top: 4px; font-size: 16px; }
.zp-shell__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.zp-shell__action { min-height: 44px; border-radius: 11px; font: inherit; }
.zp-shell__action:hover, .zp-shell__action:focus-visible { border-color: var(--zp-shell-ice); color: var(--zp-shell-ice); outline: none; }
.zp-shell__action:active { transform: scale(0.97); }
.zp-shell__action[aria-pressed="true"] { color: #07121c; border-color: transparent; background: var(--zp-shell-ice); }
.zp-shell__status { min-height: 16px; margin: 9px 2px 0; color: var(--zp-shell-muted); font-size: 11px; }

@media (max-width: 520px) {
  #zp-shell { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
  .zp-shell__toggle { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  #zp-shell *, #zp-shell *::before, #zp-shell *::after { animation: none !important; transition: none !important; }
}

@media print { #zp-shell { display: none !important; } }