:root {
  --lum-bg: #071722;
  --lum-surface: #102532;
  --lum-surface-alt: #0c202d;
  --lum-edge: #315061;
  --lum-ink: #edf5f7;
  --lum-muted: #b5c9d2;
  --lum-accent: #9bd6d7;
}

body { background: var(--lum-bg); color: var(--lum-ink); font-size: 16px; }
#dashboard-container { background: radial-gradient(circle at 56% -15%, #164255 0, #071722 44%, #06131d 100%); }
#dashboard-title { font-weight: 700; letter-spacing: .02em; }
#page-title { color: var(--lum-ink); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 750; }
#page-main, #right-side { background: transparent; }
#right-side { min-width: 0; }
#page-components {
  width: 100%; max-width: 1280px; min-width: 0; margin: 0 auto;
  padding: 8px 26px 72px; box-sizing: border-box;
}
#page-components > * { min-width: 0; max-width: 100%; }
#page-components .container-fluid > .mantine-Flex-root > .flex-item {
  flex: 1 1 calc(25% - 12px); min-width: 215px; max-width: calc(25% - 12px);
}
.card-wrapper .card { width: 100%; }
.card {
  background: linear-gradient(150deg, #112b39, var(--lum-surface-alt));
  border: 1px solid var(--lum-edge); border-radius: 18px;
  box-shadow: 0 14px 34px #0002;
}
.card p, .card li, #lum-decisions p { color: var(--lum-muted); line-height: 1.55; }
.card h3 { color: var(--lum-ink); }

#lum-intro { color: #d4e8eb; font-size: 1.08rem; line-height: 1.55; max-width: 850px; }
#lum-intro strong { color: var(--lum-accent); font-size: .78rem; letter-spacing: .14em; }

#lum-status-outer { width: 100%; min-width: 0; }
#lum-status-outer .card { border-left: 5px solid #91bac4; padding: 22px 27px; }
#lum-status-text strong:first-child { color: #9cc5ce; font-size: .77rem; letter-spacing: .13em; }
#lum-status-text h2 { color: var(--lum-ink); font-size: clamp(1.4rem, 2.2vw, 1.95rem); margin: 8px 0 12px; }
#lum-status-text p { margin-bottom: 4px; }

#lum-signals-outer, #lum-published-outer, #lum-human-outer, #lum-outcomes-outer { min-width: 0; }
#lum-signals-outer .card, #lum-published-outer .card,
#lum-human-outer .card, #lum-outcomes-outer .card { min-height: 188px; padding: 20px 21px; }
#lum-signals-text h3, #lum-published-text h3,
#lum-human-text h3, #lum-outcomes-text h3 {
  color: #c5dde2; font-size: .95rem; font-weight: 650; margin: 0 0 13px;
}
#lum-signals-text h1, #lum-published-text h1, #lum-human-text h1 {
  color: #f1f8f9; font-size: clamp(2.55rem, 4vw, 3.35rem);
  line-height: 1.05; margin: 0 0 14px; letter-spacing: -.045em;
}
#lum-outcomes-text h2 {
  color: #e9f1f2; font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  line-height: 1.15; margin: 0 0 17px;
}
#lum-signals-text p, #lum-published-text p,
#lum-human-text p, #lum-outcomes-text p { font-size: .88rem; margin: 0; }
#lum-human-outer .card { border-top: 3px solid #efb39c; }

#lum-states { width: 100%; min-width: 0; }
#lum-states-outer {
  border: 1px solid var(--lum-edge); border-radius: 18px;
  background: #0c202d; padding: 14px 18px 7px;
}
#lum-states-outer h3 { color: var(--lum-ink); font-size: 1.3rem; }

#lum-decisions {
  padding: 24px 26px; border: 1px solid var(--lum-edge);
  border-radius: 18px; background: #0c202d;
}
#lum-decisions h2 { color: var(--lum-ink); font-size: 1.5rem; margin: 0 0 20px; }
#lum-decisions table { width: 100%; border-collapse: collapse; font-size: .98rem; }
#lum-decisions th {
  color: #add0d7; font-size: .77rem; text-transform: uppercase;
  letter-spacing: .085em; padding: 0 12px 12px; text-align: left;
}
#lum-decisions td { padding: 15px 12px; border-top: 1px solid #294454; color: #dce9ef; }
#lum-decisions td:first-child { font-size: 1.06rem; color: #fff; }
#lum-decisions td:nth-child(3) { color: #f2c0ab; }
#lum-decisions tr:hover td { background: #143140; }
#lum-decisions p { margin: 17px 0 0; font-size: .88rem; }

#lum-details-outer { width: 100%; min-width: 0; }
#lum-details-outer .card { padding: 22px 26px; }
#lum-details-text h3 { color: var(--lum-ink); font-size: 1.3rem; }
#lum-details-text p { margin: 10px 0; }
#lum-footer { color: var(--lum-muted); font-size: .86rem; line-height: 1.5; }
a { color: #aee0e3; }
a:hover { color: #d8f8f8; }

@media (max-width: 1100px) {
  #page-components .container-fluid > .mantine-Flex-root > .flex-item {
    flex-basis: calc(50% - 8px); max-width: calc(50% - 8px);
  }
}

@media (max-width: 700px) {
  #right-side { width: 100%; }
  #page-components { padding: 6px 14px 48px; }
  #page-components .mantine-Flex-root { width: 100%; max-width: 100%; min-width: 0; }
  #page-components .container-fluid > .mantine-Flex-root > .flex-item {
    flex: 1 1 calc(50% - 8px); width: calc(50% - 8px); max-width: calc(50% - 8px); min-width: 0;
  }
  #page-components .mantine-Flex-root > .flex-item { min-width: 0; }
  #lum-intro { font-size: 1rem; }
  #lum-status-outer .card { padding: 18px; }
  #lum-signals-outer .card, #lum-published-outer .card,
  #lum-human-outer .card, #lum-outcomes-outer .card { min-height: 174px; padding: 15px; }
  #lum-signals-text h1, #lum-published-text h1, #lum-human-text h1 { font-size: 2.5rem; }
  #lum-outcomes-text h2 { font-size: 1.23rem; }
  #lum-signals-text p, #lum-published-text p,
  #lum-human-text p, #lum-outcomes-text p { font-size: .8rem; }
  #lum-states-outer { padding: 12px 8px 6px; }
  #lum-decisions { padding: 19px 15px; }
  #lum-decisions table, #lum-decisions tbody, #lum-decisions tr, #lum-decisions td { display: block; width: 100%; }
  #lum-decisions thead { display: none; }
  #lum-decisions tr { border-top: 1px solid #315061; padding: 12px 0; }
  #lum-decisions td { border: 0; padding: 4px 2px; font-size: .93rem; text-align: left !important; }
  #lum-decisions td:first-child { font-size: 1.18rem; padding-bottom: 8px; }
  #lum-decisions td:not(:first-child)::before {
    content: ""; display: inline-block; min-width: 92px;
    color: #99b9c3; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  }
  #lum-decisions td:nth-child(2)::before { content: "Статус"; }
  #lum-decisions td:nth-child(3)::before { content: "Внимание"; }
  #lum-decisions td:nth-child(4)::before { content: "Сигналы"; }
  #lum-decisions td:nth-child(5)::before { content: "Время"; }
  #lum-details-outer .card { padding: 18px; }
}

@media (max-width: 350px) {
  #page-components .container-fluid > .mantine-Flex-root > .flex-item {
    flex-basis: 100%; width: 100%; max-width: 100%;
  }
  #lum-signals-outer .card, #lum-published-outer .card,
  #lum-human-outer .card, #lum-outcomes-outer .card { min-height: 0; }
}
