/* Shared cosmic surface treatment for every HTML view. */
:root {
  --cosmic-cyan: rgba(91, 208, 255, .42);
  --cosmic-blue: rgba(74, 126, 255, .22);
  --cosmic-pink: rgba(232, 105, 210, .16);
  --cosmic-shadow: 0 0 0 1px rgba(111, 210, 255, .08),
    0 0 22px rgba(52, 166, 255, .09), 0 14px 34px rgba(0, 0, 0, .26);
}

html,
body {
  background-color: #070b13;
  background-image:
    radial-gradient(ellipse at 12% 0%, rgba(75, 150, 255, .12), transparent 35%),
    radial-gradient(ellipse at 88% 100%, rgba(205, 72, 190, .09), transparent 38%),
    radial-gradient(ellipse at 50% 45%, rgba(31, 91, 151, .06), transparent 55%);
}

/* Shared panels, cards, popovers and native dialogs. */
:where(.panel, .list-panel, .detail-panel, .sidebar-section, .filters-panel,
  .chart-box, .preview-wrap, .map, .fits-import-panel, .stat, .detail-cell,
  .archive-dialog, .workspace-mode-dialog, dialog, #astroHelpPanel,
  .backend-filter-popover, #framesInfoPanel) {
  border-color: color-mix(in srgb, var(--border, #344255) 75%, #66d7ff 25%);
  box-shadow: 0 0 0 1px rgba(111, 210, 255, .16),
    0 0 26px rgba(52, 166, 255, .16), 0 14px 34px rgba(0, 0, 0, .3);
  position: relative;
}

:where(.panel, .list-panel, .detail-panel, .sidebar-section, .filters-panel,
  .chart-box, .preview-wrap, .map, .fits-import-panel, .stat, .detail-cell,
  .archive-dialog, .workspace-mode-dialog, dialog, #astroHelpPanel,
  .backend-filter-popover, #framesInfoPanel)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(173, 235, 255, .08),
    inset 0 0 24px rgba(47, 156, 255, .035);
}

:where(.panel, .list-panel, .detail-panel, .sidebar-section, .filters-panel,
  .archive-dialog, .workspace-mode-dialog, dialog, #astroHelpPanel,
  .backend-filter-popover, #framesInfoPanel):hover {
  box-shadow: 0 0 0 1px rgba(124, 222, 255, .3),
    0 0 34px rgba(54, 169, 255, .28), 0 16px 38px rgba(0, 0, 0, .34);
}

button,
.btn,
[role="button"] {
  border-color: rgba(117, 207, 255, .38) !important;
  box-shadow: 0 0 9px rgba(52, 166, 255, .14),
    inset 0 0 10px rgba(52, 166, 255, .04);
}

button,
input,
select,
textarea {
  transition: border-color .18s ease, box-shadow .18s ease,
    background-color .18s ease, transform .12s ease;
}

:where(button, input, select, textarea):focus-visible {
  border-color: #7ddcff !important;
  box-shadow: 0 0 0 2px rgba(91, 208, 255, .2),
    0 0 18px rgba(91, 208, 255, .22) !important;
}

:where(button, .btn, a):hover {
  filter: brightness(1.08);
}

:where(button, .btn, [role="button"]):hover:not(:disabled) {
  border-color: #8ce3ff !important;
  box-shadow: 0 0 0 1px rgba(140, 227, 255, .32),
    0 0 22px rgba(52, 194, 255, .42),
    inset 0 0 14px rgba(52, 166, 255, .1);
}

button.btn-primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #a7e4ff 0%, #72d1ff 100%) !important;
  color: #06131d !important;
  box-shadow: 0 0 0 1px rgba(174, 238, 255, .5),
    0 0 30px rgba(75, 207, 255, .62),
    0 8px 24px rgba(66, 184, 250, .38) !important;
}

button.btn-primary:active:not(:disabled),
.btn.btn-primary:active:not(:disabled),
button.btn-primary:focus-visible,
.btn.btn-primary:focus-visible {
  background: linear-gradient(180deg, #a7e4ff 0%, #72d1ff 100%) !important;
  color: #06131d !important;
}

button.btn-primary:disabled,
.btn.btn-primary:disabled {
  opacity: 1 !important;
  filter: saturate(.88) brightness(.98) !important;
  color: #06131d !important;
  background: linear-gradient(180deg, #8fdcff 0%, #62c9fb 100%) !important;
  border-color: #8bdcff !important;
  box-shadow: 0 0 0 1px rgba(140, 227, 255, .22),
    0 0 16px rgba(75, 195, 255, .3),
    0 5px 18px rgba(66, 184, 250, .24) !important;
}

button.btn-primary,
.btn.btn-primary,
button[type="submit"] {
  box-shadow: 0 0 0 1px rgba(140, 227, 255, .22),
    0 0 18px rgba(75, 195, 255, .38),
    0 5px 20px rgba(66, 184, 250, .3) !important;
}

dialog::backdrop {
  background: radial-gradient(circle at 50% 38%, rgba(36, 106, 160, .16), rgba(0, 0, 0, .72));
  backdrop-filter: blur(5px);
}

@media (prefers-reduced-motion: no-preference) {
  :where(.panel, .list-panel, .detail-panel, .sidebar-section, .archive-dialog,
    .workspace-mode-dialog, dialog, #astroHelpPanel) {
    animation: cosmic-surface-arrival .45s ease both;
  }
}

@keyframes cosmic-surface-arrival {
  from { opacity: .72; box-shadow: 0 0 0 rgba(52, 166, 255, 0); }
  to { opacity: 1; box-shadow: var(--cosmic-shadow); }
}