.save-controls {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 10000;
  box-sizing: border-box;
  width: 164px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 18px 14px 14px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 5px 24px #0002;
  font: 400 18px/1.5 'Roboto', Arial, sans-serif;
  text-align: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  animation: panel-pop 420ms cubic-bezier(.22,1,.36,1) 120ms backwards;
}

.panel-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto 12px; pointer-events: none; }
.panel-action, .panel-links a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease;
  touch-action: none;
}
#more-toggle { position: relative; text-align: center; }
#more-toggle .more-symbol { position: absolute; left: calc(50% + 38px); top: 50%; transform: translateY(-50%); font: 300 14px/1.5 'Roboto', Arial, sans-serif; letter-spacing: 0; }
.panel-action:hover, .panel-links a:hover, #more-toggle[aria-expanded="true"] { color: #41e2ad; }
.panel-action:focus-visible, .panel-links a:focus-visible { outline: 2px solid #41e2ad; outline-offset: 2px; }
.panel-action:disabled { cursor: wait; opacity: .55; }
.panel-links { padding: 0; }
.panel-links[hidden] { display: none; }
.panel-links a { font-size: 14px; font-weight: 300; padding: 2px 0; letter-spacing: 1px; }
.save-controls.is-dragging, .save-controls.is-dragging * { cursor: grabbing !important; }
#save-status { margin: 12px 0 0; font: 300 12px/1.5 'Roboto', Arial, sans-serif; letter-spacing: 0; overflow-wrap: anywhere; }
#save-status:empty { display: none; }
@keyframes panel-pop {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .save-controls { animation: none; }
  .panel-action, .panel-links a { transition: none; }
}

#panel-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #111;
  font: 300 22px/1 'Roboto', Arial, sans-serif;
  cursor: pointer;
  touch-action: none;
}
#panel-toggle:hover { color: #41e2ad; background: #f5f5f5; }
#panel-toggle:focus-visible { outline: 2px solid #41e2ad; outline-offset: -2px; }
#panel-content[hidden] { display: none; }
.save-controls.is-minimized { width: 80px; padding: 18px 8px 4px; }
.save-controls.is-minimized .panel-logo { width: 64px; height: 64px; margin-bottom: 0; }



.panel-home { display: block; width: 64px; margin: 0 auto 12px; cursor: pointer; touch-action: none; }
.panel-home .panel-logo { margin: 0; }
.panel-home:focus-visible { outline: 2px solid #41e2ad; outline-offset: 3px; }
.save-controls.is-minimized .panel-home { margin-bottom: 0; }