/* Auralis Pro shell shared by the three standalone Pro apps. */
:root {
  --auralis-shell-bg: rgba(7, 11, 24, 0.86);
  --auralis-shell-line: rgba(148, 163, 184, 0.24);
  --auralis-shell-ink: #f8fafc;
  --auralis-shell-muted: #cbd5e1;
  --auralis-shell-cyan: #67e8f9;
  --auralis-shell-violet: #a78bfa;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

.auralis-pro-shell {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  color: var(--auralis-shell-ink);
  background: linear-gradient(135deg, rgba(2, 6, 23, 0.94), var(--auralis-shell-bg));
  border-bottom: 1px solid var(--auralis-shell-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
}

.auralis-pro-brand {
  min-width: 0;
}

.auralis-pro-brand strong {
  display: block;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0;
}

.auralis-pro-brand span {
  display: block;
  margin-top: 2px;
  color: var(--auralis-shell-muted);
  font-size: 12px;
  line-height: 1.25;
}

.auralis-pro-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.auralis-pro-actions a,
.auralis-pro-actions button {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: var(--auralis-shell-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 800;
  min-height: 34px;
  max-width: 100%;
  padding: 7px 12px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.auralis-pro-actions a {
  border-color: rgba(103, 232, 249, 0.42);
  color: #e0f2fe;
}

.auralis-pro-actions button {
  border-color: rgba(167, 139, 250, 0.44);
}

.auralis-pro-actions a:focus-visible,
.auralis-pro-actions button:focus-visible {
  outline: 3px solid rgba(103, 232, 249, 0.34);
  outline-offset: 2px;
}

.auralis-pro-shell + header,
.auralis-pro-shell ~ .tabs {
  top: 56px !important;
}

button,
input,
select,
textarea,
label,
summary,
.card,
.hero-card,
.tab,
.nav,
.badge,
.pill,
.item,
.metric,
td,
th {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

textarea,
input,
select {
  min-width: 0;
}

img,
svg,
canvas {
  max-width: 100%;
}

.actions,
.sticky-actions,
.toolbar,
.side-actions,
.btnrow,
.btnrow3 {
  min-width: 0;
}

.actions button,
.sticky-actions button,
.toolbar button,
.side-actions button,
.btnrow button,
.btnrow3 button,
.file-label,
.file-btn {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

.tablewrap,
.reportbox,
table {
  max-width: 100%;
}

@media (max-width: 720px) {
  .auralis-pro-shell {
    align-items: flex-start;
    padding: 9px 10px;
  }

  .auralis-pro-brand strong {
    font-size: 14px;
  }

  .auralis-pro-brand span {
    font-size: 11px;
  }

  .auralis-pro-actions {
    flex: 0 0 auto;
    gap: 6px;
    max-width: 48%;
  }

  .auralis-pro-actions a,
  .auralis-pro-actions button {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .auralis-pro-shell + header,
  .auralis-pro-shell ~ .tabs {
    top: 48px !important;
  }

  .hero,
  header,
  main,
  .shell,
  .layout {
    width: 100%;
    max-width: 100%;
  }

  .actions,
  .sticky-actions,
  .side-actions,
  .toolbar,
  .btnrow,
  .btnrow3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .actions button,
  .sticky-actions button,
  .side-actions button,
  .toolbar button,
  .btnrow button,
  .btnrow3 button,
  .file-label,
  .file-btn {
    flex: 1 1 128px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .auralis-pro-shell {
    gap: 8px;
  }

  .auralis-pro-actions {
    max-width: 52%;
  }

  .auralis-pro-actions a,
  .auralis-pro-actions button {
    font-size: 10px;
    padding-left: 7px;
    padding-right: 7px;
  }
}