@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Sora:wght@600;700;800&display=swap");
:root {
  --dc-bg-950: #101116;
  --dc-bg-900: #10131a;
  --dc-bg-850: #161920;
  --dc-bg-800: #1a1d26;
  --dc-bg-760: #272a33;
  --dc-line: #272a33;
  --dc-line-strong: #4e525e;
  --dc-text-100: #dee1e6;
  --dc-text-200: #c3cad6;
  --dc-text-300: #9ea8bb;
  --dc-text-400: #7a859b;
  --dc-accent-500: #36996c;
  --dc-accent-400: #6ddf8a;
  --dc-info-500: #4c83b0;
  --dc-danger-500: #8b4b5b;
  --dc-warning-500: #8b6e43;
  --dc-font-title: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --dc-font-body: "Manrope", "Segoe UI", sans-serif;
  --dc-text-xs: 0.75rem;
  --dc-text-sm: 0.875rem;
  --dc-text-base: 1rem;
  --dc-text-lg: 1.125rem;
  --dc-text-xl: 1.25rem;
  --dc-text-2xl: 1.5rem;
  --dc-text-3xl: 1.875rem;
  --dc-text-4xl: 2.25rem;
  --dc-lh-xs: 1rem;
  --dc-lh-sm: 1.25rem;
  --dc-lh-base: 1.5rem;
  --dc-lh-lg: 1.75rem;
  --dc-lh-xl: 1.75rem;
  --dc-lh-2xl: 2rem;
  --dc-lh-3xl: 2.25rem;
  --dc-lh-4xl: 2.5rem;
}

[data-theme=light] {
  --dc-bg-950: #f4f7fb;
  --dc-bg-900: #eef3f9;
  --dc-bg-850: #ffffff;
  --dc-bg-800: #e7edf6;
  --dc-bg-760: #dae3f0;
  --dc-line: #c8d5e7;
  --dc-line-strong: #9eb0c7;
  --dc-text-100: #111827;
  --dc-text-200: #1f2937;
  --dc-text-300: #3f4c60;
  --dc-text-400: #5f6d83;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-base);
  line-height: var(--dc-lh-base);
  color: var(--dc-text-200);
  background: radial-gradient(1000px 550px at 10% -10%, #1a2b40 0%, transparent 55%), var(--dc-bg-950);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: var(--dc-bg-900);
}

::-webkit-scrollbar-thumb {
  transition: background 0.3s;
  background: var(--dc-line);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dc-line-strong);
}

::-webkit-scrollbar-corner {
  margin: 2px;
  background: var(--dc-bg-850);
}

.dc-container {
  width: min(1760px, 100% - 48px);
  margin-inline: auto;
}

.dc-shell {
  margin: 2rem auto;
  padding: 1.5rem;
  border-radius: 0;
}

.dc-section {
  margin-top: 2rem;
}

.dc-panel {
  background: var(--dc-bg-850);
  border-radius: 6px;
  padding: 1rem;
}

.dc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dc-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-grid-12 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dc-col {
  min-height: 38px;
  background: var(--dc-bg-900);
  color: var(--dc-text-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dc-text-xs);
  border-radius: 3px;
  flex: 0 0 auto;
}

.dc-span-1 {
  width: calc((100% - 88px) / 12);
}

.dc-span-05 {
  width: calc((100% - 88px) / 12 * 0.5);
}

.dc-span-2 {
  width: calc((100% - 88px) / 12 * 2 + 8px);
}

.dc-span-3 {
  width: calc((100% - 88px) / 12 * 3 + 16px);
}

.dc-span-4 {
  width: calc((100% - 88px) / 12 * 4 + 24px);
}

.dc-span-5 {
  width: calc((100% - 88px) / 12 * 5 + 32px);
}

.dc-span-6 {
  width: calc((100% - 88px) / 12 * 6 + 40px);
}

.dc-span-7 {
  width: calc((100% - 88px) / 12 * 7 + 48px);
}

.dc-span-8 {
  width: calc((100% - 88px) / 12 * 8 + 56px);
}

.dc-span-9 {
  width: calc((100% - 88px) / 12 * 9 + 64px);
}

.dc-span-10 {
  width: calc((100% - 88px) / 12 * 10 + 72px);
}

.dc-span-11 {
  width: calc((100% - 88px) / 12 * 11 + 80px);
}

.dc-span-12 {
  width: 100%;
}

.u-mt-0 {
  margin-top: 0;
}

.u-mt-8 {
  margin-top: 0.5rem;
}

.u-mt-16 {
  margin-top: 1rem;
}

.u-mt-24 {
  margin-top: 1.5rem;
}

.u-mt-32 {
  margin-top: 2rem;
}

.u-mb-8 {
  margin-bottom: 0.5rem;
}

.u-mb-16 {
  margin-bottom: 1rem;
}

.u-mb-24 {
  margin-bottom: 1.5rem;
}

.u-mb-32 {
  margin-bottom: 2rem;
}

.u-p-8 {
  padding: 0.5rem;
}

.u-p-16 {
  padding: 1rem;
}

.u-p-24 {
  padding: 1.5rem;
}

.u-right {
  text-align: right;
}

.u-center {
  text-align: center;
}

.u-muted {
  color: var(--dc-text-400);
}

.u-hidden {
  display: none !important;
}

.u-w-full {
  width: 100%;
}

.u-inline {
  display: inline-flex;
}

.u-flex {
  display: flex;
}

.u-wrap {
  flex-wrap: wrap;
}

.u-gap-8 {
  gap: 0.5rem;
}

.u-gap-16 {
  gap: 1rem;
}

.dc-text-xs {
  font-size: var(--dc-text-xs);
  line-height: var(--dc-lh-xs);
}

.dc-text-sm {
  font-size: var(--dc-text-sm);
  line-height: var(--dc-lh-sm);
}

.dc-text-base {
  font-size: var(--dc-text-base);
  line-height: var(--dc-lh-base);
}

.dc-text-lg {
  font-size: var(--dc-text-lg);
  line-height: var(--dc-lh-lg);
}

.dc-text-xl {
  font-size: var(--dc-text-xl);
  line-height: var(--dc-lh-xl);
}

.dc-text-2xl {
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-lh-2xl);
}

.dc-text-3xl {
  font-size: var(--dc-text-3xl);
  line-height: var(--dc-lh-3xl);
}

.dc-text-4xl {
  font-size: var(--dc-text-4xl);
  line-height: var(--dc-lh-4xl);
}

.dc-font-title {
  font-family: var(--dc-font-title);
}

.dc-font-body {
  font-family: var(--dc-font-body);
}

.dc-fw-500 {
  font-weight: 500;
}

.dc-fw-700 {
  font-weight: 700;
}

.dc-fw-800 {
  font-weight: 800;
}

.u-d-block {
  display: block;
}

.u-d-inline {
  display: inline;
}

.u-d-inline-block {
  display: inline-block;
}

.u-d-flex {
  display: flex;
}

.u-d-grid {
  display: grid;
}

.u-flex-col {
  flex-direction: column;
}

.u-flex-row {
  flex-direction: row;
}

.u-items-center {
  align-items: center;
}

.u-items-start {
  align-items: flex-start;
}

.u-justify-center {
  justify-content: center;
}

.u-justify-between {
  justify-content: space-between;
}

.u-w-auto {
  width: auto;
}

.u-w-full {
  width: 100%;
}

.u-h-full {
  height: 100%;
}

.u-pos-relative {
  position: relative;
}

.u-pos-absolute {
  position: absolute;
}

.u-pos-fixed {
  position: fixed;
}

.u-overflow-hidden {
  overflow: hidden;
}

.u-rounded-4 {
  border-radius: 4px;
}

.u-rounded-8 {
  border-radius: 8px;
}

@media (min-width: 640px) {
  .sm\:u-d-none {
    display: none !important;
  }
  .sm\:u-d-block {
    display: block !important;
  }
  .sm\:u-w-full {
    width: 100% !important;
  }
}
@media (min-width: 768px) {
  .md\:u-d-none {
    display: none !important;
  }
  .md\:u-d-flex {
    display: flex !important;
  }
  .md\:u-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:u-d-none {
    display: none !important;
  }
  .lg\:u-d-flex {
    display: flex !important;
  }
  .lg\:u-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .xl\:u-d-none {
    display: none !important;
  }
  .xl\:u-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.dc-title {
  margin: 0;
  color: var(--dc-text-100);
  font: 800 clamp(var(--dc-text-2xl), 2.6vw, var(--dc-text-4xl))/1.2 var(--dc-font-title);
  letter-spacing: -0.02em;
}

.dc-subtitle {
  margin-top: 0.5rem;
  color: var(--dc-text-400);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-lh-sm);
}

.dc-section__title {
  margin: 0 0 0.75rem;
  color: var(--dc-text-100);
  font: 700 var(--dc-text-3xl)/var(--dc-lh-3xl) var(--dc-font-title);
}

.dc-prose h1,
.dc-prose h2,
.dc-prose h3,
.dc-prose h4,
.dc-prose p {
  margin: 0 0 0.75rem;
}

.dc-prose h1 {
  font: 800 var(--dc-text-4xl)/var(--dc-lh-4xl) var(--dc-font-title);
}

.dc-prose h2 {
  font: 700 var(--dc-text-3xl)/var(--dc-lh-3xl) var(--dc-font-title);
}

.dc-prose h3 {
  font: 700 var(--dc-text-2xl)/var(--dc-lh-2xl) var(--dc-font-title);
}

.dc-prose h4 {
  font: 700 var(--dc-text-xl)/var(--dc-lh-xl) var(--dc-font-title);
}

.dc-prose p {
  color: var(--dc-text-300);
}

.dc-prose ul {
  margin: 0 0 0.875rem 1.125rem;
  padding: 0;
}

.dc-prose li {
  margin: 0 0 0.375rem;
}

.dc-prose blockquote {
  margin: 0 0 0.875rem;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid var(--dc-accent-500);
  background: var(--dc-bg-900);
  color: var(--dc-accent-400);
}

.dc-card {
  background: var(--dc-bg-850);
  border-radius: 6px;
  padding: 1rem;
}

.dc-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--dc-line);
  background: var(--dc-bg-800);
  color: var(--dc-text-300);
  font-size: 0.8rem;
  font-weight: 700;
}

.dc-pill.is-active {
  border-color: #3d6f58;
  color: var(--dc-accent-400);
  background: #1a2b22;
}

.dc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(51, 98, 75, 0.25);
  color: var(--dc-accent-400);
  font-size: 0.8rem;
  font-weight: 800;
}

.dc-badge.is-negative {
  background: rgba(89, 53, 63, 0.22);
  color: #df9ca9;
}

.dc-kpi {
  color: var(--dc-accent-400);
  font: 700 0.95rem/1 var(--dc-font-title);
}

.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 4px;
  color: var(--dc-text-300);
  background: var(--dc-bg-850);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-lh-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.08s ease;
}

.dc-btn:hover, .dc-btn.is-hover {
  background: var(--dc-bg-800);
  color: var(--dc-text-200);
}

.dc-btn:active {
  transform: translateY(1px);
}

.dc-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--dc-line-strong);
}

.dc-btn:disabled, .dc-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.dc-btn.is-primary {
  color: #9ed7b4;
  background: #1e312d;
}

.dc-btn.is-primary:hover, .dc-btn.is-primary.is-hover {
  background: #27413c;
  color: #b8e5c9;
}

.dc-btn.is-secondary {
  color: var(--dc-text-200);
  background: var(--dc-bg-760);
}

.dc-btn.is-secondary:hover, .dc-btn.is-secondary.is-hover {
  background: #333846;
}

.dc-btn.is-success {
  color: #d5ffe7;
  background: var(--dc-accent-500);
}

.dc-btn.is-success:hover, .dc-btn.is-success.is-hover {
  background: #3fb37e;
  color: #ecfff4;
}

.dc-btn.is-warning {
  color: #e7c48a;
  background: #2c2319;
}

.dc-btn.is-warning:hover, .dc-btn.is-warning.is-hover {
  background: #3a2e1f;
}

.dc-btn.is-danger {
  color: #cf9eab;
  background: #2a1b20;
}

.dc-btn.is-danger:hover, .dc-btn.is-danger.is-hover {
  background: #3a232a;
  color: #e2aebe;
}

.dc-btn.is-info {
  color: #8fceff;
  background: #1a2533;
}

.dc-btn.is-info:hover, .dc-btn.is-info.is-hover {
  background: #223246;
  color: #b1ddff;
}

.dc-btn.is-ghost {
  color: var(--dc-text-300);
  background: var(--dc-bg-900);
}

.dc-btn.is-ghost:hover, .dc-btn.is-ghost.is-hover {
  background: var(--dc-bg-800);
  color: var(--dc-text-200);
}

.dc-btn.is-outline {
  border: 1px solid var(--dc-line-strong);
  background: transparent;
  color: var(--dc-text-200);
}

.dc-btn.is-outline:hover, .dc-btn.is-outline.is-hover {
  background: var(--dc-bg-850);
}

.dc-btn.is-outline.is-primary {
  border-color: #2e6f55;
  color: #9ed7b4;
}

.dc-btn.is-outline.is-primary:hover {
  background: #1e312d;
}

.dc-btn.is-outline.is-secondary {
  border-color: var(--dc-line-strong);
  color: var(--dc-text-200);
}

.dc-btn.is-outline.is-secondary:hover {
  background: var(--dc-bg-760);
}

.dc-btn.is-outline.is-success {
  border-color: var(--dc-accent-500);
  color: var(--dc-accent-400);
}

.dc-btn.is-outline.is-success:hover {
  background: var(--dc-accent-500);
  color: #ecfff4;
}

.dc-btn.is-outline.is-warning {
  border-color: var(--dc-warning-500);
  color: #e7c48a;
}

.dc-btn.is-outline.is-warning:hover {
  background: #2c2319;
}

.dc-btn.is-outline.is-danger {
  border-color: var(--dc-danger-500);
  color: #cf9eab;
}

.dc-btn.is-outline.is-danger:hover {
  background: #2a1b20;
}

.dc-btn.is-outline.is-info {
  border-color: var(--dc-info-500);
  color: #8fceff;
}

.dc-btn.is-outline.is-info:hover {
  background: #1a2533;
}

.dc-btn.is-outline.is-ghost {
  border-color: var(--dc-line);
  color: var(--dc-text-300);
}

.dc-btn.is-outline.is-ghost:hover {
  background: var(--dc-bg-900);
}

.dc-btn.is-link {
  border: 0;
  padding: 0;
  min-height: auto;
  background: transparent;
  color: var(--dc-accent-400);
}

.dc-btn.is-link:hover {
  text-decoration: underline;
  color: #89efab;
}

.dc-btn.is-sm {
  height: 2rem;
  padding: 0 0.625rem;
  font-size: var(--dc-text-xs);
  line-height: var(--dc-lh-xs);
}

.dc-btn.is-lg {
  height: 3.25rem;
  padding: 0 1.25rem;
  font-size: var(--dc-text-base);
  line-height: var(--dc-lh-base);
  font-weight: 800;
}

.dc-btn.is-block {
  width: 100%;
}

.dc-btn.is-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.dc-btn-group {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dc-form {
  display: grid;
  gap: 10px;
}

.dc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dc-field {
  display: grid;
  gap: 6px;
}

.dc-label {
  color: var(--dc-text-400);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-lh-xs);
  font-weight: 700;
}

.dc-input,
.dc-select,
.dc-textarea {
  width: 100%;
  border: 0;
  background: var(--dc-bg-900);
  color: var(--dc-text-200);
  border-radius: 4px;
  font: 500 var(--dc-text-sm)/var(--dc-lh-sm) var(--dc-font-body);
  padding: 0.625rem 0.6875rem;
  outline: none;
  box-shadow: none;
}

.dc-input::placeholder,
.dc-textarea::placeholder {
  color: var(--dc-text-400);
}

.dc-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--dc-text-400) 50%), linear-gradient(135deg, var(--dc-text-400) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.dc-select::-ms-expand {
  display: none;
}

.dc-select option, .dc-select optgroup {
  background: var(--dc-bg-900);
  color: var(--dc-text-200);
}

.dc-textarea {
  min-height: 110px;
  resize: vertical;
}

.dc-field.is-error .dc-input,
.dc-field.is-error .dc-select,
.dc-field.is-error .dc-textarea {
  box-shadow: inset 0 0 0 1px var(--dc-danger-500);
}

.dc-field.is-success .dc-input,
.dc-field.is-success .dc-select,
.dc-field.is-success .dc-textarea {
  box-shadow: inset 0 0 0 1px var(--dc-accent-500);
}

.dc-help {
  font-size: var(--dc-text-xs);
  line-height: var(--dc-lh-xs);
  color: var(--dc-text-400);
}

.dc-help.is-error {
  color: #df9ca9;
}

.dc-help.is-success {
  color: var(--dc-accent-400);
}

.dc-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dc-text-300);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-lh-sm);
}

.dc-checks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.dc-check input:disabled + span {
  opacity: 0.6;
}

.dc-check input[type=checkbox],
.dc-check input[type=radio] {
  position: relative;
  left: -50000px;
  margin: 0;
  cursor: pointer;
}

.dc-check input[type=checkbox]::before,
.dc-check input[type=radio]::before {
  content: "";
  position: absolute;
  left: 50000px;
  width: 16px;
  height: 16px;
  background: var(--dc-bg-850);
  border: 1px solid var(--dc-line);
  border-radius: 3px;
}

.dc-check input[type=checkbox]:checked::before,
.dc-check input[type=radio]:checked::before {
  background: var(--dc-accent-500);
  border-color: var(--dc-accent-500);
  box-shadow: inset 0 0 0 3px var(--dc-bg-850);
}

.dc-check input[type=checkbox]:disabled::before,
.dc-check input[type=radio]:disabled::before {
  border-color: var(--dc-line);
  background: var(--dc-bg-800);
  box-shadow: none;
  opacity: 0.75;
}

.dc-check input[type=radio]::before {
  border-radius: 8px;
}

.dc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dc-text-300);
  font-size: var(--dc-text-sm);
}

.dc-switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  background: var(--dc-bg-760);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dc-switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dc-text-100);
  transition: transform 0.2s ease;
}

.dc-switch input:checked {
  background: var(--dc-accent-500);
}

.dc-switch input:checked::after {
  transform: translateX(18px);
}

.dc-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.dc-table th {
  padding: 0 14px 8px;
  color: var(--dc-text-400);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.69rem;
  font-weight: 700;
}

.dc-table td {
  padding: 12px 14px;
  background: var(--dc-bg-850);
}

.dc-table td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.dc-table td:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dc-model {
  color: var(--dc-text-100);
  font-size: 0.94rem;
  font-weight: 700;
}

.dc-meters {
  display: grid;
  gap: 6px;
}

.dc-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.dc-progress__track {
  position: relative;
  height: 27px;
  border-radius: 2px;
  background: #10131a;
  overflow: hidden;
}

.dc-progress__fill {
  display: block;
  height: 100%;
}

.dc-progress__track::before {
  content: attr(data-label);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #4e525e;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  font-weight: 800;
  z-index: 2;
}

.dc-progress__track::after {
  content: attr(data-value);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #4e525e;
  font-size: 0.76rem;
  font-weight: 400;
  z-index: 2;
}

.dc-progress.is-patch .dc-progress__fill,
.dc-progress.is-replace .dc-progress__fill {
  background: linear-gradient(90deg, #1a1d26 0%, #272a33 100%);
}

.dc-progress.is-hashline .dc-progress__fill {
  background: linear-gradient(90deg, #1e312d 0%, #36996c 100%);
  border-right: 2px solid #00d88d;
  border-radius: 0 2px 2px 0;
}

.dc-progress.is-hashline .dc-progress__track::before,
.dc-progress.is-hashline .dc-progress__track::after {
  color: #6ddf8a;
}

.dc-progress.is-hashline .dc-progress__track::after {
  font-weight: 700;
}

.dc-nav {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.dc-nav a {
  color: var(--dc-text-300);
  text-decoration: none;
  font-size: var(--dc-text-sm);
}

.dc-nav a:hover,
.dc-nav a.is-active {
  color: var(--dc-text-100);
}

.dc-menu {
  display: grid;
  gap: 4px;
  background: var(--dc-bg-850);
  padding: 8px;
  border-radius: 6px;
}

.dc-menu__item {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--dc-text-300);
  border-radius: 4px;
  text-decoration: none;
}

.dc-menu__item:hover,
.dc-menu__item.is-active {
  background: var(--dc-bg-800);
  color: var(--dc-text-100);
}

.dc-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dc-text-400);
  font-size: var(--dc-text-sm);
}

.dc-breadcrumb a {
  color: var(--dc-text-300);
  text-decoration: none;
}

.dc-pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dc-page {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--dc-bg-850);
  color: var(--dc-text-300);
  text-decoration: none;
}

.dc-page.is-active,
.dc-page:hover {
  background: var(--dc-bg-760);
  color: var(--dc-text-100);
}

.dc-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--dc-bg-900);
  border-radius: 6px;
  padding: 4px;
}

.dc-tab {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--dc-text-300);
  cursor: pointer;
  font-weight: 700;
}

.dc-tab.is-active,
.dc-tab:hover {
  background: var(--dc-bg-850);
  color: var(--dc-text-100);
}

.dc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--dc-bg-850);
  color: var(--dc-text-200);
}

.dc-alert.is-info {
  box-shadow: inset 0 0 0 1px var(--dc-info-500);
  color: #8fceff;
}

.dc-alert.is-success {
  box-shadow: inset 0 0 0 1px var(--dc-accent-500);
  color: #6ddf8a;
}

.dc-alert.is-warning {
  box-shadow: inset 0 0 0 1px var(--dc-warning-500);
  color: #e7c48a;
}

.dc-alert.is-danger {
  box-shadow: inset 0 0 0 1px var(--dc-danger-500);
  color: #cf9eab;
}

.dc-toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: grid;
  gap: 8px;
}

.dc-toast {
  min-width: 260px;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--dc-bg-850);
  color: var(--dc-text-200);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.dc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 120;
  display: none;
}

.dc-overlay.is-open {
  display: block;
}

.dc-modal {
  width: min(560px, 100% - 24px);
  margin: 8vh auto 0;
  background: var(--dc-bg-850);
  border-radius: 8px;
  padding: 1rem;
}

.dc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: 100vh;
  background: var(--dc-bg-850);
  padding: 1rem;
}

.dc-popover {
  position: absolute;
  min-width: 220px;
  background: var(--dc-bg-850);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.dc-tooltip {
  position: absolute;
  background: var(--dc-bg-760);
  color: var(--dc-text-100);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-lh-xs);
  padding: 6px 8px;
  border-radius: 4px;
}

.dc-dropdown {
  position: absolute;
  min-width: 220px;
  background: var(--dc-bg-850);
  border-radius: 6px;
  padding: 6px;
}

.dc-accordion {
  display: grid;
  gap: 8px;
}

.dc-acc-item {
  background: var(--dc-bg-850);
  border-radius: 6px;
}

.dc-acc-trigger {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: var(--dc-text-200);
  font-weight: 700;
  cursor: pointer;
}

.dc-acc-panel {
  padding: 0 12px 12px;
  color: var(--dc-text-300);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-lh-sm);
}

.dc-landing {
  position: relative;
}

.dc-landing .dc-section {
  margin-top: 3.5rem;
}

.dc-landing .dc-section__title {
  margin-bottom: 1rem;
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-lh-2xl);
}

.dc-landing .dc-subtitle {
  margin-top: 0.25rem;
  max-width: 72ch;
}

.dc-landing .u-mt-16 {
  margin-top: 1.75rem;
}

.dc-landing section[id] {
  scroll-margin-top: 92px;
}

.dc-landing__header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 17, 22, 0.84);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dc-line);
}

.dc-landing__header-row {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dc-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dc-text-100);
  font: 700 var(--dc-text-lg)/var(--dc-lh-lg) var(--dc-font-title);
}

.dc-landing__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dc-accent-400);
  box-shadow: 0 0 12px var(--dc-accent-400);
}

.dc-landing__hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.5rem;
}

.dc-landing__hero-media {
  border-radius: 8px;
  overflow: hidden;
  min-height: 360px;
}

.dc-landing__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-landing__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dc-landing__stat {
  background: var(--dc-bg-900);
  border-radius: 6px;
  padding: 10px;
}

.dc-landing__stat b {
  display: block;
  color: var(--dc-accent-400);
  font: 700 var(--dc-text-2xl)/var(--dc-lh-2xl) var(--dc-font-title);
}

.dc-landing__service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dc-landing__service-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}

.dc-landing__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.dc-landing__logo {
  min-height: 44px;
  border-radius: 4px;
  background: var(--dc-bg-900);
  display: grid;
  place-items: center;
  color: var(--dc-text-400);
  font-size: var(--dc-text-xs);
  font-weight: 700;
}

.dc-landing__reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dc-landing__review {
  min-height: 100%;
}

.dc-landing__pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dc-landing__phase {
  position: relative;
  overflow: visible;
}

.dc-landing__phase::before {
  content: ":" attr(data-step);
  position: absolute;
  top: -18px;
  left: -10px;
  font-family: var(--dc-font-title);
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 15px rgba(109, 223, 138, 0.75);
  pointer-events: none;
}

.dc-landing__phase h3 {
  margin-top: -17px;
  font-size: 36px;
  font-style: italic;
  padding-left: 70px;
  margin-bottom: 0px;
}

.dc-landing__process-gap {
  min-height: 1px;
}

#contact .dc-panel {
  min-height: 100%;
}

#contact .dc-form {
  gap: 12px;
}

#contact .dc-btn.is-lg {
  min-width: 220px;
}

.dc-acc-trigger span {
  min-width: 12px;
  text-align: center;
}

.dc-landing__price {
  color: var(--dc-accent-400);
  font: 700 var(--dc-text-3xl)/var(--dc-lh-3xl) var(--dc-font-title);
  margin: 0 0 0.5rem;
}

.dc-landing__plan-list {
  margin: 0 0 1rem 1rem;
  padding: 0;
}

.dc-landing__footer {
  margin-top: 2rem;
  padding: 1rem;
  border-top: 1px solid var(--dc-line);
  color: var(--dc-text-400);
  font-size: var(--dc-text-sm);
}

@media (max-width: 1100px) {
  .dc-landing__hero,
  .dc-landing__service-grid,
  .dc-landing__reviews,
  .dc-landing__pricing {
    grid-template-columns: 1fr 1fr;
  }
  .dc-landing__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 840px) {
  .dc-landing .dc-section {
    margin-top: 2.5rem;
  }
  .dc-landing .dc-section__title {
    font-size: var(--dc-text-xl);
    line-height: var(--dc-lh-xl);
  }
  .dc-landing .u-mt-16 {
    margin-top: 1.25rem;
  }
  .dc-landing__header-row {
    min-height: auto;
    padding: 0.75rem 0;
    align-items: flex-start;
    flex-direction: column;
  }
  .dc-landing__hero,
  .dc-landing__service-grid,
  .dc-landing__reviews,
  .dc-landing__pricing,
  .dc-landing__stats,
  .dc-landing__logos {
    grid-template-columns: 1fr;
  }
  .dc-landing__hero-media {
    min-height: 240px;
  }
  .dc-landing__process-gap {
    display: none;
  }
}
.dc-dashboard {
  min-height: 100vh;
  display: flex;
  background: var(--dc-bg-950);
}

.dc-dashboard__sidebar {
  width: 280px;
  flex: 0 0 280px;
  padding: 16px;
  border-right: 1px solid var(--dc-line);
  background: var(--dc-bg-900);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.dc-dashboard__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font: 700 var(--dc-text-lg)/var(--dc-lh-lg) var(--dc-font-title);
  color: var(--dc-text-100);
}

.dc-dashboard__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dc-accent-400);
  box-shadow: 0 0 12px var(--dc-accent-400);
}

.dc-dashboard__menu-group {
  margin-top: 10px;
}

.dc-dashboard__menu-title {
  margin: 0 0 6px;
  color: var(--dc-text-400);
  font-size: var(--dc-text-xs);
  line-height: var(--dc-lh-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.dc-dashboard__main {
  flex: 1 1 auto;
  width: 100%;
  padding: 16px;
}

.dc-dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dc-dashboard__hero {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 10px;
}

.dc-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dc-dashboard__kpi b {
  display: block;
  color: var(--dc-accent-400);
  font: 700 var(--dc-text-2xl)/var(--dc-lh-2xl) var(--dc-font-title);
}

.dc-dashboard__kpi span {
  color: var(--dc-text-400);
  font-size: var(--dc-text-sm);
}

.dc-dashboard__chart {
  min-height: 280px;
}

.dc-dashboard__chart-grid {
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.dc-dashboard__bar {
  background: linear-gradient(180deg, #2b7a5a 0%, #1e312d 100%);
  border-radius: 4px 4px 0 0;
}

.dc-dashboard__split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 10px;
}

.dc-dashboard__activity {
  display: grid;
  gap: 8px;
}

.dc-dashboard__activity-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: var(--dc-bg-900);
}

@media (max-width: 1200px) {
  .dc-dashboard__hero {
    grid-template-columns: 1fr;
  }
  .dc-dashboard__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dc-dashboard__split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .dc-dashboard {
    flex-direction: column;
  }
  .dc-dashboard__sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--dc-line);
  }
  .dc-dashboard__topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .dc-dashboard__kpis {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 840px) {
  .dc-shell {
    margin: 1rem auto;
    padding: 0.875rem;
  }
  .dc-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .dc-form__row {
    grid-template-columns: 1fr;
  }
  .dc-checks-grid {
    grid-template-columns: 1fr;
  }
  .dc-grid-12 {
    display: flex;
    flex-wrap: wrap;
  }
  .dc-col,
  .dc-span-05,
  .dc-span-1,
  .dc-span-2,
  .dc-span-3,
  .dc-span-4,
  .dc-span-5,
  .dc-span-6,
  .dc-span-7,
  .dc-span-8,
  .dc-span-9,
  .dc-span-10,
  .dc-span-11,
  .dc-span-12 {
    width: calc(50% - 4px);
  }
}