:root {
  --color-bg: #fff;
  --color-text: #111;
  --color-primary: #2563eb;
  --color-border: #e5e7eb;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-text: #f0f0f0;
    --color-primary: #60a5fa;
    --color-border: #262626;
    --color-success: #22c55e;
    --color-danger: #f87171;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  font-family: var(--font-system);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

.vault-panel {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
}

.vault-panel-empty {
  margin: 0;
  color: var(--color-text);
  opacity: 0.7;
}

.vault-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.vault-panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.vault-panel-symbol {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.9rem;
}

.vault-rpc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.vault-rpc-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
  color: #fff;
}

.vault-rpc-badge.is-online { background: var(--color-success); }
.vault-rpc-badge.is-offline { background: var(--color-danger); }

.vault-rpc-meta {
  opacity: 0.65;
}

.vault-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.vault-metric-label {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-bottom: 4px;
}

.vault-metric-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.vault-metric-sub {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.6;
}

.vault-capacity {
  margin-bottom: 16px;
}

.vault-capacity-label {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 6px;
}

.vault-capacity-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.vault-capacity-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
}

.vault-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.vault-history th,
.vault-history td {
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

.vault-history th:first-child,
.vault-history td:first-child {
  text-align: left;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font: italic 0.65rem/1 Georgia, "Times New Roman", serif;
  padding: 0;
  margin-left: 2px;
  vertical-align: middle;
  cursor: pointer;
}

.info-icon:hover,
.info-icon:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
}

.vault-info-popover {
  position: absolute;
  z-index: 1000;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.8rem;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.vault-info-popover[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   MOTION LIBRARY  (paired runtime: js/animations.js ANIMATION_REGISTRY)
   =========================================================================
   Canonical home for named micro-animation primitives: their @keyframes and
   their .motion-* utility classes. This block is the CSS half of the motion
   library; the runtime half is js/animations.js (ANIMATION_REGISTRY), and the
   human index is docs/animation-library.md. The skill that applies, suggests,
   and extends primitives is /orion_motion.

   RULES for anything added here (see /orion_motion steward mode):
   - Animate ONLY transform / opacity / filter (compositor-friendly; no jank).
   - Reference an --ease-* / --dur-* token below; never hardcode a curve or a
     duration a token already names.
   - Every primitive is a class + @keyframes pair here, an ANIMATION_REGISTRY
     entry in js/animations.js, and a row in docs/animation-library.md.
   - The prefers-reduced-motion block ABOVE already neutralises every animation
     for vestibular-sensitive users; do not add a second global override.

   Empty on a fresh install: fill it out incrementally via /orion_motion.
   ------------------------------------------------------------------------- */

:root {
  /* Easing tokens (add here as primitives need them). */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration scale (perceptual tiers; see /orion_disney Golden Rule). */
  --dur-micro: 120ms;      /* button press, toggle, chip select */
  --dur-enter: 220ms;      /* card / list entrance */
  --dur-feedback: 250ms;   /* modal open, status feedback */
  --dur-transition: 300ms; /* tab / view swap */
  --dur-celebrate: 450ms;  /* rare success moment */
}

/* Named primitives go below. None yet: add via /orion_motion steward mode.
   Example shape (do not ship until a real primitive is defined):

   @keyframes motionFooEnter {
     from { opacity: 0; transform: translateY(8px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   .motion-foo-enter {
     animation: motionFooEnter var(--dur-enter) var(--ease-out) both;
   }
*/