:root {
  --neo-bg: #060c19;
  --neo-bg-2: #0b1526;
  --neo-surface: rgba(13, 26, 43, 0.88);
  --neo-surface-soft: rgba(17, 33, 54, 0.75);
  --neo-line: rgba(108, 170, 255, 0.24);
  --neo-line-strong: rgba(124, 213, 255, 0.46);
  --neo-text: #d9ecff;
  --neo-muted: #8fb1d8;
  --neo-accent: #4dc8ff;
  --neo-accent-2: #2d7dff;
  --neo-good: #43d19e;
  --neo-danger: #ff6262;
  --neo-shadow: 0 14px 40px rgba(2, 8, 18, 0.55);
  --neo-glow: 0 0 0 1px rgba(90, 170, 255, 0.18), 0 0 24px rgba(77, 200, 255, 0.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

body {
  background:
    radial-gradient(1200px 700px at 90% -10%, rgba(51, 143, 255, 0.18), transparent 60%),
    radial-gradient(900px 540px at -10% 60%, rgba(70, 185, 255, 0.14), transparent 70%),
    linear-gradient(140deg, var(--neo-bg) 0%, var(--neo-bg-2) 100%);
  color: var(--neo-text);
}

html,
body {
  overflow-x: clip;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    linear-gradient(to right, rgba(117, 186, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(117, 186, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 90%);
  opacity: 0.38;
}

body::after {
  background: url('/static/svg/hud-radar.svg') center top / cover no-repeat;
  opacity: 0.25;
}

a {
  color: #84d8ff;
}

a:hover {
  color: #b9ebff;
}

.app-shell,
.workspace,
.container,
.sidebar,
.workspace-header,
.panel,
.kpi,
.table-wrap,
.global-alerts,
.auth-card,
.loading-card {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.app-shell {
  background-image: none;
  grid-template-columns: 296px 1fr;
  min-height: 100dvh;
  /* Keep sidebar above backdrop on mobile menu open; avoid trapping it in a low z-index stacking context. */
  z-index: auto;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(8, 22, 40, 0.94) 0%, rgba(7, 20, 34, 0.96) 100%);
  border-right: 1px solid rgba(95, 156, 229, 0.28);
  box-shadow: inset -1px 0 0 rgba(152, 214, 255, 0.15), 22px 0 40px rgba(2, 8, 18, 0.45);
  backdrop-filter: blur(8px);
  padding: 0.95rem 0.84rem;
}

.brand-link {
  background: linear-gradient(135deg, rgba(23, 48, 78, 0.82), rgba(12, 30, 52, 0.82));
  border: 1px solid rgba(133, 193, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(76, 132, 196, 0.16), 0 10px 20px rgba(2, 8, 18, 0.35);
}

.brand-link strong {
  color: #edf7ff;
}

.brand-link small {
  color: #97bcdd;
}

.side-nav {
  gap: 0.34rem;
}

.side-nav a {
  border: 1px solid rgba(82, 129, 176, 0.32);
  background: linear-gradient(160deg, rgba(16, 37, 62, 0.86), rgba(10, 24, 41, 0.9));
  color: #d3e8ff;
  box-shadow: inset 0 0 0 1px rgba(115, 187, 255, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.side-nav a:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(123, 214, 255, 0.55);
  box-shadow: 0 10px 18px rgba(3, 10, 20, 0.45), 0 0 0 1px rgba(109, 191, 255, 0.26);
}

.side-nav a.active {
  background: linear-gradient(140deg, rgba(25, 68, 111, 0.92), rgba(13, 40, 72, 0.95));
  border-color: rgba(121, 221, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(98, 220, 255, 0.32), 0 10px 18px rgba(2, 10, 20, 0.52);
}

.side-nav a span {
  color: #d6ebff;
}

.nav-icon {
  color: #7bd5ff;
}

.quote-card,
.user-card {
  background: linear-gradient(170deg, rgba(18, 42, 70, 0.7), rgba(10, 23, 41, 0.82));
  border: 1px solid rgba(122, 183, 239, 0.28);
}

.quote-card p,
.user-card strong {
  color: #e6f4ff;
}

.quote-card small,
.user-card small {
  color: #9ec2e6;
}

.workspace {
  background: transparent;
}

.workspace-header {
  border-bottom: 1px solid rgba(121, 178, 240, 0.26);
  background:
    linear-gradient(145deg, rgba(10, 24, 41, 0.9), rgba(8, 21, 36, 0.86));
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(2, 10, 20, 0.3);
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 0.56rem;
  margin-bottom: 0.3rem;
}

.hud-orbit {
  width: 30px;
  height: 30px;
  color: #7cdcff;
  filter: drop-shadow(0 0 8px rgba(91, 214, 255, 0.4));
}

.hud-orbit-ring {
  fill: none;
  stroke: rgba(131, 222, 255, 0.55);
  stroke-width: 1.2;
}

.hud-orbit-ring-soft {
  stroke: rgba(104, 178, 255, 0.46);
  stroke-dasharray: 3 2;
}

.hud-orbit-arc {
  stroke: rgba(165, 233, 255, 0.9);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hud-orbit-dot {
  fill: #93e8ff;
}

.hud-orbit-dot-alt {
  fill: #4ba8ff;
}

.hud-label {
  border: 1px solid rgba(110, 190, 255, 0.35);
  background: rgba(23, 63, 104, 0.56);
  color: #9fdbff;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  letter-spacing: 0.08em;
  font-size: 0.67rem;
  font-weight: 700;
}

.hud-wave {
  width: min(250px, 58vw);
  height: 18px;
  color: #4cc8ff;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(76, 200, 255, 0.45));
  animation: hudWavePulse 3.6s ease-in-out infinite;
}

.hud-wave-line {
  stroke-dasharray: 6 4;
  animation: hudLineFlow 5.8s linear infinite;
}

.hud-wave-scan {
  fill: #8ae7ff;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(114, 224, 255, 0.9));
}

.workspace-header h1 {
  color: #ecf7ff;
  letter-spacing: 0.01em;
}

.workspace-header p,
.page-head p,
.muted {
  color: var(--neo-muted);
}

.workspace-quote {
  border: 1px solid var(--neo-line);
  background: rgba(12, 31, 53, 0.62);
}

.workspace-quote p {
  color: #d7ecff;
}

.workspace-quote small {
  color: #90b6dc;
}

.header-link,
.month-btn,
.chip-link,
.chip,
.filters a {
  border: 1px solid rgba(109, 173, 240, 0.38);
  background: linear-gradient(140deg, rgba(24, 62, 104, 0.72), rgba(14, 41, 76, 0.72));
  color: #dff2ff;
  box-shadow: inset 0 0 0 1px rgba(70, 132, 196, 0.2);
}

.header-link:hover,
.month-btn:hover,
.chip-link:hover,
.chip:hover,
.filters a:hover,
.filters a.active {
  text-decoration: none;
  border-color: rgba(132, 219, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(119, 205, 255, 0.36), 0 8px 18px rgba(5, 14, 28, 0.45);
}

.quick-search input,
.quick-capture input,
.quick-capture select {
  background: rgba(7, 20, 35, 0.75);
  color: #e6f4ff;
  border-color: rgba(103, 158, 216, 0.34);
}

.container {
  width: min(1320px, calc(100vw - 334px));
  margin-top: 1.05rem;
}

.panel,
.kpi,
.global-alerts,
.auth-card,
.news-item,
.diary-preview,
.loading-card,
.assistant-message,
.calendar-cell,
.global-alert-item a,
.search-result {
  background: linear-gradient(165deg, rgba(12, 30, 52, 0.9), rgba(10, 23, 40, 0.88));
  border: 1px solid rgba(102, 167, 235, 0.28);
  box-shadow: var(--neo-shadow), inset 0 0 0 1px rgba(97, 163, 227, 0.08);
}

.panel h2,
.panel h3,
h2,
.kpi h3 {
  color: #e9f6ff;
}

.kpi h3 {
  letter-spacing: 0.01em;
}

.kpi p {
  color: #f3fbff;
}

.kpi p.danger {
  color: #ff8f8f;
}

.advice-list,
.assistant-lines,
.metric-list,
.diary-snippets {
  color: #d3e8fd;
}

.global-alerts {
  border-color: rgba(255, 189, 117, 0.5);
  background: linear-gradient(135deg, rgba(30, 18, 8, 0.86) 0%, rgba(25, 16, 9, 0.8) 100%);
  box-shadow: 0 8px 24px rgba(161, 99, 22, 0.18);
}

.global-alerts-head strong {
  color: #ffe6bf;
}

.global-alerts-head p {
  color: #ffd39a;
}

.global-alert-item a {
  color: #eef8ff;
  border-color: rgba(255, 190, 120, 0.34);
  background: linear-gradient(145deg, rgba(31, 20, 11, 0.85), rgba(23, 16, 10, 0.82));
}

.global-alert-item a:hover {
  text-decoration: none;
  border-color: rgba(255, 204, 145, 0.56);
  box-shadow: 0 0 0 1px rgba(255, 192, 122, 0.28), 0 8px 18px rgba(10, 6, 3, 0.5);
}

.global-alert-title {
  color: #e8f4ff;
}

.global-alert-time {
  color: #ffcf92;
}

.news-item,
.news-item.compact {
  background: linear-gradient(170deg, rgba(13, 31, 54, 0.94), rgba(9, 25, 43, 0.92));
  border-color: rgba(111, 179, 247, 0.34);
}

.news-item summary {
  color: #eaf6ff;
}

.news-item-title {
  color: #eef8ff;
}

.news-item-meta {
  color: #accdef;
}

.news-item-meta strong {
  color: #dff2ff;
}

.news-summary {
  color: #d8ecff;
}

.news-links a {
  color: #93e2ff;
}

.news-links a:hover {
  color: #d7f4ff;
}

.assistant-message.user {
  border-color: rgba(120, 198, 255, 0.42);
  background: linear-gradient(165deg, rgba(17, 45, 74, 0.94), rgba(11, 33, 58, 0.92));
}

.assistant-message.user .assistant-text,
.assistant-message.user .assistant-meta strong {
  color: #eaf6ff;
}

.assistant-message.user .assistant-meta span,
.assistant-message.user .muted {
  color: #abccef;
}

.result-item,
.paste-zone {
  background: linear-gradient(170deg, rgba(13, 31, 54, 0.92), rgba(9, 24, 41, 0.9));
  border-color: rgba(111, 179, 247, 0.34);
  color: #e5f4ff;
}

.paste-zone p,
.paste-zone strong,
.paste-zone .muted {
  color: #d4eaff;
}

.paste-zone kbd {
  border-color: rgba(127, 187, 245, 0.42);
  background: rgba(9, 24, 41, 0.9);
  color: #e8f6ff;
}

table {
  background: rgba(7, 19, 33, 0.66);
  border: 1px solid rgba(101, 159, 221, 0.24);
}

th {
  color: #9fc6ee;
  border-bottom-color: rgba(109, 167, 229, 0.28);
}

td {
  border-bottom-color: rgba(81, 133, 188, 0.26);
  color: #daf0ff;
}

.event-chip,
.status-pill,
.badge,
.inline-badge {
  border: 1px solid rgba(115, 180, 246, 0.38);
  background: rgba(17, 44, 76, 0.76);
  color: #dff4ff;
}

input,
textarea,
select {
  background: rgba(7, 20, 35, 0.82);
  border: 1px solid rgba(99, 154, 212, 0.32);
  color: #ebf7ff;
}

input::placeholder,
textarea::placeholder {
  color: rgba(171, 204, 238, 0.7);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(124, 220, 255, 0.84);
  outline: 3px solid rgba(82, 179, 255, 0.24);
}

button,
.primary,
.action-row button,
.quick-tools button {
  background: linear-gradient(140deg, var(--neo-accent-2), var(--neo-accent));
  border: 1px solid rgba(134, 228, 255, 0.38);
  color: #f6fcff;
  box-shadow: 0 10px 18px rgba(3, 12, 24, 0.42);
}

button:hover,
.primary:hover,
.action-row button:hover,
.quick-tools button:hover {
  filter: brightness(1.08);
}

.ghost {
  background: transparent;
  border: 1px solid rgba(130, 190, 246, 0.35);
  color: #dff2ff;
}

.danger-btn {
  background: linear-gradient(150deg, #bc2f41, #8f2130);
  border: 1px solid rgba(255, 166, 166, 0.46);
  color: #fff;
}

.flash {
  border: 1px solid rgba(95, 178, 255, 0.38);
  background: linear-gradient(145deg, rgba(16, 38, 64, 0.9), rgba(10, 25, 43, 0.9));
  color: #d9eeff;
}

.flash.success {
  border-color: rgba(67, 209, 158, 0.45);
}

.flash.error {
  border-color: rgba(255, 102, 123, 0.5);
}

.loading-overlay {
  background: rgba(3, 10, 20, 0.6);
}

.loading-bar::after {
  background: linear-gradient(90deg, rgba(86, 209, 255, 0), rgba(86, 209, 255, 0.95), rgba(86, 209, 255, 0));
}

.workspace-footer,
.footer {
  color: #88add2;
}

.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: calc(0.74rem + var(--safe-top));
  left: calc(0.72rem + var(--safe-left));
  z-index: 2100;
  align-items: center;
  gap: 0.42rem;
  border-radius: 11px;
  padding: 0.42rem 0.56rem;
  border: 1px solid rgba(120, 196, 255, 0.42);
  background: linear-gradient(145deg, rgba(15, 44, 75, 0.95), rgba(10, 27, 49, 0.94));
  color: #e2f4ff;
  box-shadow: 0 8px 20px rgba(2, 8, 18, 0.5);
}

.mobile-nav-toggle svg {
  width: 17px;
  height: 17px;
}

.mobile-nav-toggle span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(2, 8, 18, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .ultra-mobile {
  opacity: 0;
  pointer-events: none;
}

body.force-mobile-layout .container {
  width: min(1320px, 95vw);
}

body.force-mobile-layout .workspace-header {
  grid-template-columns: 1fr;
}

body.force-mobile-layout .workspace-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

body.force-mobile-layout .workspace-actions .header-link {
  width: 100%;
  text-align: center;
}

@media (max-width: 1280px) {
  .container {
    width: min(1320px, calc(100vw - 112px));
  }

  .workspace-quote {
    display: block;
  }
}

@media (max-width: 1100px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }

  .app-shell,
  body.force-mobile-layout .app-shell,
  body.ultra-mobile-mode .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar,
  body.force-mobile-layout .sidebar,
  body.ultra-mobile-mode .sidebar,
  body.ultra-mobile-mode.force-mobile-layout .sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(88vw, 344px);
    max-width: 344px;
    height: 100dvh !important;
    transform: translateX(-108%);
    transition: transform 0.23s ease;
    z-index: 1900 !important;
    border-right: 1px solid rgba(123, 193, 255, 0.38);
    border-bottom: 0 !important;
    padding-top: calc(0.82rem + var(--safe-top));
    padding-right: calc(0.82rem + var(--safe-right));
    padding-bottom: calc(0.82rem + var(--safe-bottom));
    padding-left: calc(0.82rem + var(--safe-left));
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform;
  }

  body.nav-open .sidebar,
  body.nav-open.force-mobile-layout .sidebar,
  body.nav-open.ultra-mobile-mode .sidebar,
  body.nav-open.ultra-mobile-mode.force-mobile-layout .sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .brand-block,
  body.force-mobile-layout .brand-block,
  body.ultra-mobile-mode.force-mobile-layout .brand-block {
    margin-bottom: 0.64rem;
    display: block;
  }

  .quote-card,
  .side-bottom,
  body.force-mobile-layout .quote-card,
  body.force-mobile-layout .side-bottom,
  body.ultra-mobile-mode.force-mobile-layout .quote-card,
  body.ultra-mobile-mode.force-mobile-layout .side-bottom {
    display: block;
  }

  .side-nav,
  body.force-mobile-layout .side-nav,
  body.ultra-mobile-mode.force-mobile-layout .side-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.34rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.12rem;
    padding-bottom: 0.4rem;
  }

  .side-nav a,
  body.force-mobile-layout .side-nav a,
  body.ultra-mobile-mode.force-mobile-layout .side-nav a {
    min-height: 44px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 0.55rem 0.58rem;
    flex: initial;
  }

  .side-nav a span,
  body.force-mobile-layout .side-nav a span,
  body.ultra-mobile-mode.force-mobile-layout .side-nav a span {
    display: block;
    font-size: 0.9rem;
    text-align: left;
    line-height: 1.24;
  }

  .workspace-header,
  body.force-mobile-layout .workspace-header,
  body.ultra-mobile-mode .workspace-header {
    position: static;
    top: auto;
    padding: calc(3.2rem + var(--safe-top)) calc(0.85rem + var(--safe-right)) 0.82rem calc(0.85rem + var(--safe-left));
    z-index: auto;
  }

  .workspace-quote,
  body.force-mobile-layout .workspace-quote {
    display: none;
  }

  .workspace-actions,
  body.force-mobile-layout .workspace-actions,
  body.ultra-mobile-mode .workspace-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.44rem;
  }

  .quick-tools,
  .quick-search,
  .quick-capture,
  body.force-mobile-layout .quick-tools,
  body.force-mobile-layout .quick-search,
  body.force-mobile-layout .quick-capture {
    grid-template-columns: 1fr;
  }

  .container,
  body.force-mobile-layout .container,
  body.ultra-mobile-mode .container {
    width: min(1320px, calc(100vw - var(--safe-left) - var(--safe-right) - 0.9rem));
    margin-top: 0.72rem;
  }

  body.ultra-mobile-mode .container,
  body.ultra-mobile-mode.force-mobile-layout .container {
    padding-bottom: calc(6.2rem + var(--safe-bottom));
  }

  .workspace-footer,
  body.force-mobile-layout .workspace-footer {
    padding-bottom: calc(5.2rem + var(--safe-bottom));
  }

  body.ultra-mobile-mode .ultra-mobile,
  body.ultra-mobile-mode.force-mobile-layout .ultra-mobile {
    position: fixed;
    left: calc(0.62rem + var(--safe-left));
    right: calc(0.62rem + var(--safe-right));
    bottom: calc(0.62rem + var(--safe-bottom));
    z-index: 200;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.4rem;
    border-radius: 12px;
    border: 1px solid rgba(116, 192, 255, 0.4);
    background: linear-gradient(150deg, rgba(13, 33, 57, 0.95), rgba(8, 25, 45, 0.95));
    box-shadow: 0 12px 30px rgba(2, 8, 18, 0.55);
  }

  body.nav-open .workspace,
  body.nav-open .workspace-header,
  body.nav-open .container {
    pointer-events: none;
  }

  body.nav-open .sidebar,
  body.nav-open .sidebar * {
    pointer-events: auto;
  }

  body.ultra-mobile-mode .ultra-mobile a,
  body.ultra-mobile-mode .ultra-mobile button,
  body.ultra-mobile-mode.force-mobile-layout .ultra-mobile a,
  body.ultra-mobile-mode.force-mobile-layout .ultra-mobile button {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(119, 190, 255, 0.4);
    background: linear-gradient(140deg, rgba(24, 63, 105, 0.72), rgba(12, 36, 67, 0.72));
    color: #dff3ff;
    text-decoration: none;
  }

  body.ultra-mobile-mode .ultra-mobile form,
  body.ultra-mobile-mode.force-mobile-layout .ultra-mobile form {
    margin: 0;
  }
}

@media (max-width: 640px) {
  .workspace-header,
  body.force-mobile-layout .workspace-header,
  body.ultra-mobile-mode .workspace-header {
    padding-top: calc(3.05rem + var(--safe-top));
    padding-left: calc(0.72rem + var(--safe-left));
    padding-right: calc(0.72rem + var(--safe-right));
  }

  .workspace-header h1 {
    font-size: 1.08rem;
  }

  .hud-wave {
    width: min(180px, 52vw);
  }

  .hud-orbit {
    width: 24px;
    height: 24px;
  }

  .hud-label {
    font-size: 0.62rem;
  }

  .panel,
  .kpi {
    padding: 0.74rem;
  }

  .table-wrap table[data-mobile-cards="1"] tr {
    background: linear-gradient(170deg, rgba(13, 30, 52, 0.95), rgba(8, 24, 41, 0.92));
    border-color: rgba(104, 166, 230, 0.36);
  }
}

@media (max-width: 520px) {
  .workspace-actions,
  body.force-mobile-layout .workspace-actions,
  body.ultra-mobile-mode .workspace-actions {
    grid-template-columns: 1fr !important;
  }

  .card-grid {
    grid-template-columns: 1fr !important;
  }
}

@keyframes hudWavePulse {
  0%,
  100% {
    opacity: 0.58;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(2px);
  }
}

@keyframes hudLineFlow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -40;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-wave,
  .hud-wave-line {
    animation: none !important;
  }

  .hud-wave-scan,
  .hud-orbit-dot,
  .hud-orbit-dot-alt {
    display: none;
  }

  .side-nav a,
  .sidebar {
    transition: none !important;
  }

  body::after {
    opacity: 0.12;
  }
}