:root {
  --qol-surface: color-mix(in srgb, var(--bg-main, #020403) 94%, var(--accent, #00ff9f) 6%);
  --qol-border: rgba(var(--accent-rgb, 0, 255, 159), 0.52);
}

.font-code,
body {
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

.material-symbols-outlined {
  align-items: center;
  display: inline-flex;
  font-family: inherit !important;
  font-size: 0 !important;
  justify-content: center;
}

.material-symbols-outlined::before { font-size: 20px; line-height: 1; }
.nav-btn[data-section="dashboard"] .material-symbols-outlined::before { content: ">_"; font-size: 14px; font-weight: 800; }
.nav-btn[data-section="trackers"] .material-symbols-outlined::before { content: "◎"; }
.nav-btn[data-section="market"] .material-symbols-outlined::before { content: "◇"; }
.nav-btn[data-section="arsenal"] .material-symbols-outlined::before { content: "⬡"; }
.nav-btn[data-section="codex"] .material-symbols-outlined::before { content: "▤"; }
.nav-btn[data-section="rivens"] .material-symbols-outlined::before { content: "✦"; }
#sidebarCollapseBtn::before { content: "☰"; }
#soundToggleBtn::before { content: "◖"; }
#soundToggleBtn[aria-pressed="true"]::before { content: "⊘"; }
#settingsBtn::before { content: "⚙"; }
#notificationsBtn::before { content: "♢"; }
#powerBtn::before { content: "⏻"; }
.tracker-pin-btn .material-symbols-outlined::before { content: "◆"; font-size: 13px; }
.dash-reminder-check::before { content: "□"; }
.dash-reminder-row.is-done .dash-reminder-check::before { content: "☑"; }
.dash-reminder-delete::before { content: "×"; }
.dash-date-trigger::after { content: "▦" !important; font-family: inherit !important; }

.qol-skip-link {
  background: #000;
  border: 2px solid var(--accent, #00ff9f);
  color: var(--text-main, #d8ffe9);
  left: 12px;
  padding: 10px 14px;
  position: fixed;
  top: 8px;
  transform: translateY(-160%);
  transition: transform 120ms ease;
  z-index: 20000;
}
.qol-skip-link:focus { transform: translateY(0); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-bright, #7fffc8) !important;
  outline-offset: 3px !important;
}

.qol-sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.qol-dialog {
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: max(5vh, 24px) 16px;
  position: fixed;
  z-index: 14000;
}
.qol-dialog[hidden] { display: none !important; }
.qol-dialog__panel {
  background:
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb), 0.035) 0 1px, transparent 1px 24px),
    var(--qol-surface);
  border: 1px solid var(--qol-border);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.8), 0 0 28px rgba(var(--accent-rgb), 0.11);
  color: var(--text-main);
  max-width: 760px;
  min-width: 0;
  width: 100%;
}
.qol-dialog__header {
  align-items: center;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.34);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 15px 18px;
}
.qol-dialog__header h2 { color: var(--text-title); font-size: 18px; font-weight: 800; }
.qol-dialog__kicker,
.qol-eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.qol-dialog__body { padding: 18px; }
.qol-dialog__hint { color: var(--text-muted); font-size: 10px; letter-spacing: 0.1em; margin-top: 12px; text-transform: uppercase; }
.qol-dialog__actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.qol-icon-btn,
.qol-btn,
.qol-file-btn,
.qol-more-grid button {
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--qol-border);
  color: var(--text-main);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 9px 13px;
  text-transform: uppercase;
}
.qol-icon-btn { font-size: 24px; min-width: 44px; padding: 0; }
.qol-btn--compact { font-size: 10px; min-height: 36px; }
.qol-btn:disabled { cursor: not-allowed; opacity: 0.42; }
.qol-btn:hover:not(:disabled),
.qol-file-btn:hover,
.qol-more-grid button:hover { background: var(--accent); color: var(--bg-main); }
.qol-copy { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.qol-empty { color: var(--text-muted); font-size: 12px; padding: 12px; }

.qol-command-palette .qol-dialog__panel { max-width: 720px; }
.qol-command-input {
  background: #000;
  border: 1px solid var(--qol-border);
  color: var(--text-title);
  font-size: 16px;
  min-height: 52px;
  padding: 12px 14px;
  width: 100%;
}
.qol-command-results { max-height: min(58vh, 560px); overflow-y: auto; padding-top: 10px; }
.qol-command-result {
  align-items: center;
  border: 1px solid transparent;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}
.qol-command-result small { color: var(--text-muted); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.qol-command-result.is-active { background: rgba(var(--accent-rgb), 0.14); border-color: var(--qol-border); }
.qol-command-button {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  color: var(--accent-bright);
  display: inline-flex;
  gap: 6px;
  height: 40px;
  justify-content: center;
  min-width: 48px;
  padding: 0 10px;
}
.qol-command-button > span { font-size: 24px; }
.qol-command-button small { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }

.qol-vault-actions { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qol-vault-actions label { color: var(--text-muted); display: grid; font-size: 10px; gap: 6px; text-transform: uppercase; }
.qol-vault-actions select,
.qol-alert-settings select,
.qol-alert-settings input,
.qol-target-form select,
.qol-target-form input {
  background: #000;
  border: 1px solid var(--qol-border);
  color: var(--text-main);
  min-height: 44px;
  padding: 8px 10px;
}
.qol-file-btn { cursor: pointer; font-size: 11px; }
.qol-file-btn input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.qol-vault-output { border: 1px solid rgba(var(--accent-rgb), 0.24); margin-top: 14px; min-height: 92px; padding: 8px; }
.qol-vault-preview { font-size: 12px; line-height: 1.55; }
.qol-vault-preview.is-invalid { color: #ff8393; }
.qol-vault-preview ul { list-style: square; margin: 4px 0 4px 20px; }

.qol-today { cursor: default !important; }
.qol-today__head { align-items: center; display: flex; justify-content: space-between; }
.qol-today__head h2 { font-size: 18px; font-weight: 800; }
.qol-today__grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.qol-today-panel { border: 1px solid rgba(var(--accent-rgb), 0.28); min-width: 0; padding: 10px; }
.qol-today-panel > header { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.qol-today-panel h3 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.qol-today-panel header button { color: var(--accent-bright); font-size: 9px; min-height: 32px; padding: 4px; text-transform: uppercase; }
.qol-today-list { display: grid; gap: 3px; margin-top: 8px; }
.qol-today-row { border-top: 1px solid rgba(var(--accent-rgb), 0.14); display: grid; gap: 2px; min-height: 44px; padding: 7px 4px; text-align: left; }
.qol-today-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qol-today-row small { color: var(--text-muted); font-size: 9px; }
.qol-config-list { display: grid; gap: 8px; }
.qol-config-row { align-items: center; border: 1px solid rgba(var(--accent-rgb), 0.24); display: flex; justify-content: space-between; min-height: 52px; padding: 8px 10px; }
.qol-config-row label { align-items: center; display: flex; gap: 9px; }
.qol-config-row button { border: 1px solid var(--qol-border); min-height: 38px; min-width: 38px; }

#notificationsBtn { position: relative; }
.qol-notification-badge {
  background: #ff4d6d;
  border: 1px solid #000;
  border-radius: 999px;
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 900;
  line-height: 16px;
  min-width: 17px;
  padding: 0 3px;
  position: absolute;
  right: -5px;
  text-align: center;
  top: -5px;
}
.qol-alert-settings { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qol-alert-settings label { color: var(--text-muted); display: grid; font-size: 10px; gap: 5px; text-transform: uppercase; }
.qol-alert-settings__row { align-items: center; display: flex; gap: 12px; grid-column: 1 / -1; }
.qol-alert-settings__row span { color: var(--text-muted); font-size: 11px; }
.qol-alert-settings .qol-check { align-items: center; display: flex; gap: 8px; }
.qol-alert-settings .qol-check input { min-height: 18px; width: 18px; }
.qol-quiet-fields { display: grid; gap: 8px; grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
.qol-notification-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 8px; }
.qol-notification-list { display: grid; gap: 7px; max-height: 46vh; overflow-y: auto; }
.qol-notification-item { border: 1px solid rgba(var(--accent-rgb), 0.24); display: grid; gap: 5px; min-height: 62px; padding: 10px; text-align: left; }
.qol-notification-item.is-unread { background: rgba(var(--accent-rgb), 0.1); border-color: var(--qol-border); }
.qol-notification-item > span:first-child { display: flex; justify-content: space-between; }
.qol-notification-item small,
.qol-notification-item time { color: var(--text-muted); font-size: 9px; text-transform: uppercase; }

.tracker-watch-btn,
.orbiter-tracker-open-btn,
.qol-card-open {
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  color: var(--accent-bright);
  font-size: 9px;
  letter-spacing: 0.07em;
  min-height: 36px;
  padding: 6px 8px;
  text-transform: uppercase;
}
.tracker-watch-btn[aria-pressed="true"] { background: var(--accent); color: var(--bg-main); }
.orbiter-tracker-open-btn { margin-left: auto; }
.qol-card-open { align-self: start; margin-top: 6px; }

/* Keep the tracker status, pin, and watch controls visually balanced. */
.orbiter-tracker-card__actions {
  --tracker-card-action-height: 36px;
  gap: 6px;
}
.orbiter-tracker-card__actions .orbiter-tracker-badge,
.orbiter-tracker-card__actions .tracker-pin-btn,
.orbiter-tracker-card__actions .tracker-watch-btn {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  height: var(--tracker-card-action-height);
  justify-content: center;
  margin: 0;
  min-height: var(--tracker-card-action-height);
}
.orbiter-tracker-card__actions .orbiter-tracker-badge,
.orbiter-tracker-card__actions .tracker-watch-btn {
  padding-block: 0;
}
.orbiter-tracker-card__actions .tracker-pin-btn {
  min-width: var(--tracker-card-action-height);
  width: var(--tracker-card-action-height);
}

.qol-market-targets { border-top: 1px solid rgba(var(--accent-rgb), 0.28); margin-top: 12px; padding-top: 12px; }
.qol-target-form { display: grid; gap: 8px; grid-template-columns: minmax(160px, 1fr) minmax(100px, 0.6fr) auto; margin-top: 8px; }
.qol-target-status { color: var(--text-muted); font-size: 9px; margin: 8px 0; text-transform: uppercase; }
.qol-target-list { display: grid; gap: 4px; }
.qol-target-row { align-items: center; border: 1px solid rgba(var(--accent-rgb), 0.2); display: flex; justify-content: space-between; min-height: 40px; padding: 5px 8px; }
.qol-target-row button { font-size: 20px; min-height: 36px; min-width: 36px; }
.qol-log-latest { border: 1px solid var(--qol-border); color: var(--accent-bright); font-size: 8px; min-height: 28px; padding: 3px 6px; text-transform: uppercase; }
.market-system-log__header { flex-wrap: wrap; }
.market-system-log__badge { max-width: 260px; white-space: normal; }

.qol-health-controls { display: inline-flex; gap: 6px; margin-left: 8px; }
.qol-health-controls button { border: 1px solid rgba(var(--accent-rgb), 0.32); color: var(--accent-bright); font-size: 8px; min-height: 30px; padding: 4px 7px; text-transform: uppercase; }
.qol-live-region { bottom: 18px; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; position: fixed; right: 18px; z-index: 18000; }
.qol-notification-focus { animation: qol-notification-pulse 700ms ease-in-out 2; outline: 2px solid var(--accent, #00ffb7); outline-offset: 3px; }
@keyframes qol-notification-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent, #00ffb7) 24%, transparent); } }
.qol-toast { background: #020403; border: 1px solid var(--qol-border); box-shadow: 0 10px 34px #000; color: var(--text-main); font-size: 12px; padding: 10px 12px; }
.qol-toast--error { border-color: #ff4d6d; }
.qol-toast--success { border-color: #33ff99; }
.qol-mobile-more-btn { display: none !important; }
.qol-more-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1100px) {
  .qol-today__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .orbiter-tracker-card__actions { --tracker-card-action-height: 44px; }
  .app-header > div:last-child { gap: 8px !important; }
  #settingsBtn,
  body.sidebar-collapsed #settingsBtn,
  #powerBtn,
  body.sidebar-collapsed #powerBtn,
  #soundToggleBtn { display: none !important; }
  #notificationsBtn,
  body.sidebar-collapsed #notificationsBtn { display: inline-flex !important; height: 44px !important; min-height: 44px !important; min-width: 44px !important; width: 44px !important; }
  .qol-command-button { height: 44px; min-width: 44px; padding: 0; }
  .qol-command-button small { display: none; }
  #navButtons {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #navButtons .nav-main-group {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  #navButtons .nav-btn[data-section="codex"],
  #navButtons .nav-btn[data-section="rivens"] { display: none !important; }
  #navButtons .qol-mobile-more-btn { display: flex !important; }
  #navButtons .nav-btn[data-section="dashboard"] { order: 1 !important; }
  #navButtons .nav-btn[data-section="trackers"] { order: 2 !important; }
  #navButtons .nav-btn[data-section="market"] { order: 3 !important; }
  #navButtons .nav-btn[data-section="arsenal"] { order: 4 !important; }
  #navButtons .qol-mobile-more-btn { order: 5 !important; }
  #navButtons .nav-btn { min-width: 0 !important; padding-left: 2px !important; padding-right: 2px !important; }
  #navButtons .nav-label { font-size: clamp(8px, 2.5vw, 10px) !important; letter-spacing: 0.02em !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
  .qol-nav-icon { font-size: 15px; line-height: 1; }
  .qol-dialog { padding: 10px; }
  .qol-dialog__panel { max-height: calc(100dvh - 20px); overflow-y: auto; }
  .qol-dialog__body { padding: 14px; }
  .qol-vault-actions,
  .qol-alert-settings,
  .qol-target-form { grid-template-columns: 1fr; }
  .qol-alert-settings__row,
  .qol-quiet-fields { grid-column: auto; }
  .qol-today__grid { grid-template-columns: 1fr; }
  .qol-today__head { align-items: flex-start; }
  .qol-command-results { max-height: 55dvh; }
  .qol-health-controls { display: flex; margin: 6px 0 0; }
  #section-arsenal { display: flex !important; flex-direction: column; }
  #section-arsenal .arsenal-toolbar-panel { order: 1; }
  #section-arsenal .arsenal-hero { order: 2; }
  #section-arsenal .arsenal-results { order: 3; }
  #section-arsenal .arsenal-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #section-arsenal .arsenal-total-chip { display: none; }
  #section-market .market-system-log { height: 290px; }
  button,
  [role="button"],
  input,
  select { min-height: 44px; }
}

@media (max-width: 390px) {
  .app-header { padding-left: 10px !important; padding-right: 10px !important; }
  .mobile-shell-status { max-width: 116px !important; }
  #navButtons .nav-label { font-size: 8px !important; }
  .qol-dialog__header { padding: 12px; }
  .qol-dialog__body { padding: 11px; }
  .qol-notification-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .qol-skip-link { transition: none; }
}