:root{
      --bg0:#050b12;
      --bg1:#071220;
      --card:rgba(10,18,28,.72);
      --ring:rgba(255,255,255,.10);
      --muted:rgba(226,232,240,.70);
      --text:rgba(255,255,255,.92);
      --green:#7EAA2E;
      --teal:#0891b2;
      --cyan:#22d3ee;
      --warn:#f59e0b;
      --planned:#f59e0b;
      --optional:#38bdf8;
      --shadow: 0 24px 64px rgba(0,0,0,.35);
      --radius:14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    }
    /* 🔒 Lock donut visual size */
    #donutChart {
      width: 220px;
      height: 220px;
      display: block;
      margin: 0 auto;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 12% -10%, rgba(126,170,46,.28), transparent 60%),
        radial-gradient(900px 600px at 92% 8%, rgba(34,211,238,.18), transparent 55%),
        radial-gradient(900px 700px at 40% 110%, rgba(8,145,178,.20), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
    }
    a{color:var(--cyan);text-decoration:none}
    a:hover{text-decoration:underline}

    .wrap{max-width:1240px;margin:0 auto;padding:28px 18px 60px}
    .top{
      display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
      margin-bottom:18px;
    }
    .brand{
      display:flex;align-items:center;gap:12px;
    }
    .logo{
      width:90px;height:70px;border-radius:14px;
      background:linear-gradient(135deg, rgba(126,170,46,.92), rgba(8,145,178,.72));
      box-shadow:0 12px 30px rgba(0,0,0,.35);
      display:grid;place-items:center;
      position:relative;overflow:hidden;
    }
    .logo:before{
      content:"";position:absolute;inset:-30%;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%);
      transform:rotate(12deg);
    }
    .logo svg{position:relative;opacity:.95}
    .title h1{margin:0;font-size:30px;letter-spacing:.2px}
    .title p{margin:6px 0 0;color:var(--muted);font-size:13px;max-width:760px;line-height:1.45}
    .logoImg{
      width: 80px;
      height: 80px;
      display:block;
      object-fit: contain;
      position: relative; /* stays above the highlight layer */
      z-index: 1;
      filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
    }

    .actions{
      display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    }
    .chip{
      border:1px solid var(--ring);
      background:rgba(255,255,255,.04);
      padding:8px 10px;border-radius:999px;
      font-size:12px;color:rgba(255,255,255,.82);
      display:flex;gap:8px;align-items:center;
    }
    .dot{width:8px;height:8px;border-radius:999px;background:var(--green);box-shadow:0 0 0 3px rgba(126,170,46,.18)}
    .btn{
      border:1px solid var(--ring);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.92);
      padding:9px 12px;border-radius:999px;
      font-size:12px;font-weight:650;
      cursor:pointer;
      transition:transform .08s ease, background .15s ease;
    }
    .btn:hover{background:rgba(255,255,255,.09)}
    .btn:active{transform:translateY(1px)}
    .btn.primary{
      border-color:rgba(126,170,46,.35);
      background:rgba(126,170,46,.22);
    }
    .btn.primary:hover{background:rgba(126,170,46,.28)}

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:14px;
      margin-top:14px;
    }
    .card{
      background:var(--card);
      border:1px solid var(--ring);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .card.pad{padding:14px}
    .kpi{grid-column: span 4;}
    .kpi.summary{grid-column: span 6;}
    .kpi.native .value{color:rgba(220,252,231,.96)}
    .kpi.planned .value{color:rgba(255,237,213,.96)}
    .kpi.optional .value{color:rgba(224,242,254,.96)}
    .kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
    .kpi .value{margin-top:6px;font-size:28px;font-weight:780}
    .kpi .hint{margin-top:6px;color:rgba(226,232,240,.70);font-size:12px}
    .kpi .value .sub{font-size:12px;color:rgba(226,232,240,.75);font-weight:650;margin-left:8px}
    .dashboardNote{
      grid-column: span 12;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.09);
      border-radius:var(--radius);
      color:rgba(226,232,240,.84);
      font-size:13px;
      line-height:1.4;
    }
    .supportSummary{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .summaryPill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.045);
      color:rgba(255,255,255,.88);
      white-space:nowrap;
    }

    .chartA{grid-column: span 7;}
    .chartB{grid-column: span 5;}
    .chartTitle{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);
      background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
    }
    .chartTitle h2{margin:0;font-size:14px;letter-spacing:.2px}
    .chartTitle .mini{color:var(--muted);font-size:12px}
    .chartBody{padding:12px 14px; min-height:310px;}
    .barChartCanvas{width:100%;height:260px;display:block;}
    .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
    .lg{display:flex;align-items:center;gap:8px;color:rgba(226,232,240,.78);font-size:12px}
    .sw{width:10px;height:10px;border-radius:4px;background:var(--green)}
    .sw.planned{background:var(--planned)}
    .sw.optional{background:var(--optional)}
    .sw.total{background:rgba(255,255,255,.85)}

    .controls{grid-column: span 12;}
    .controlsRow{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap:12px;
      align-items:end;
      padding:12px 14px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .filters{
      display:grid;
      grid-template-columns: minmax(240px, 1.4fr) minmax(140px, .8fr) minmax(150px, .8fr) minmax(150px, .8fr);
      gap:10px;
      align-items:end;
    }
    .filterField{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .filterField span{
      color:rgba(226,232,240,.66);
      font-size:11px;
      letter-spacing:.10em;
      text-transform:uppercase;
    }
    .input, select{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.9);
      padding:9px 10px;border-radius:12px;
      font-size:13px;
      outline:none;
    }
    .input{width:100%}
    select{cursor:pointer}
    .hintRight{
      color:var(--muted);
      font-size:12px;
      text-align:right;
      padding-bottom:10px;
      white-space:nowrap;
    }

    .tableWrap{grid-column: span 12;}
    .tableHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.045), transparent);
    }
    .tableHeader h2{margin:0;font-size:14px;letter-spacing:.2px}
    .tableHeader p{margin:4px 0 0;color:rgba(226,232,240,.68);font-size:12px}
    .matrixScroller{max-height:62vh;overflow:auto;}
    table{width:100%;border-collapse:separate;border-spacing:0}
    .colDomain{width:110px}
    .colCode{width:86px}
    .colSupport{width:170px}
    thead th{
      position:sticky;top:0;z-index:2;
      background:rgba(7,18,32,.92);
      backdrop-filter:blur(8px);
      border-bottom:1px solid rgba(255,255,255,.08);
      padding:11px 12px;
      font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(226,232,240,.72);
      text-align:left;
    }
    tbody td{
      padding:12px;
      border-bottom:1px solid rgba(255,255,255,.06);
      font-size:13px;color:rgba(255,255,255,.88);
      vertical-align:top;
      line-height:1.45;
    }
    tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
    tbody tr:hover td{background:rgba(126,170,46,.075)}
    .domainCell{display:flex;align-items:center;gap:8px;min-width:0}
    .domainKey{
      width:30px;
      height:26px;
      display:inline-grid;
      place-items:center;
      border-radius:8px;
      background:rgba(126,170,46,.15);
      border:1px solid rgba(126,170,46,.28);
      color:rgba(220,252,231,.95);
      font-weight:800;
      flex:0 0 auto;
    }
    .domainName{
      color:rgba(226,232,240,.82);
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .capabilityTitle{max-width:760px}
    .emptyState{
      padding:24px 14px;
      color:rgba(226,232,240,.72);
      text-align:center;
    }
    .mono{font-family:var(--mono)}
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      font-size:12px;font-weight:700;
      background:rgba(255,255,255,.04);
      white-space:nowrap;
    }
    .bNative{
      border-color:rgba(126,170,46,.35);
      background:rgba(126,170,46,.18);
      color:rgba(220,252,231,.92);
    }
    .bPlanned{
      border-color:rgba(245,158,11,.35);
      background:rgba(245,158,11,.16);
      color:rgba(255,237,213,.95);
    }
    .bOptional{
      border-color:rgba(56,189,248,.35);
      background:rgba(56,189,248,.15);
      color:rgba(224,242,254,.95);
    }
    .pill{
      display:inline-flex;align-items:center;
      padding:6px 10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      font-size:12px;color:rgba(226,232,240,.82);
      white-space:nowrap;
    }

    .footer{
      margin-top:16px;color:rgba(226,232,240,.62);font-size:12px;line-height:1.45
    }
    .footer-note {
      grid-column: 1 / -1;
      font-size: 12px;
      color: rgba(226,232,240,.55);
      margin-top: 4px;
    }

    /* Responsive */
    @media (max-width: 1100px){
      .kpi,
      .kpi.summary{grid-column: span 6;}
      .chartA{grid-column: span 12;}
      .chartB{grid-column: span 12;}
      .controlsRow{grid-template-columns:1fr}
      .filters{grid-template-columns:repeat(2, minmax(0, 1fr))}
      .hintRight{text-align:left;padding-bottom:0}
    }
    @media (max-width: 520px){
      .kpi,
      .kpi.summary{grid-column: span 12;}
      .dashboardNote{align-items:flex-start;flex-direction:column}
      .supportSummary{justify-content:flex-start}
      .filters{grid-template-columns:1fr}
      .filters{width:100%}
      .actions{width:100%}
      .tableHeader{align-items:flex-start;flex-direction:column}
    }
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      background-color: rgba(2, 24, 32, 0.75);
      color: #E5F6F2; /* readable text */
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px;
      padding: 10px 36px 10px 12px;
      font-size: 13px;
      cursor: pointer;
    }

    select:focus,
    select:focus-visible {
      outline: none;
      border-color: #7EAA2E;
      box-shadow: 0 0 0 2px rgba(126,170,46,.35);
    }

    select option {
      background-color: #0B2A33; /* ocean dark */
      color: #E5F6F2;            /* visible text */
    }

    select option:hover,
    select option:focus,
    select option:checked {
      background-color: #7EAA2E !important;
      color: #0A1A12 !important;
    }

    select::-ms-value {
      background: transparent;
      color: inherit;
    }

    .site-footer {
      margin-top: 64px;
      padding: 36px 24px;
      background: linear-gradient(
        180deg,
        rgba(6, 30, 38, 0.95),
        rgba(2, 18, 22, 1)
      );
      border-top: 1px solid rgba(255,255,255,.08);
    }

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  align-items: center;
}

.footer-block h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #AEE4D9;
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.logo-row img {
  height: 34px;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(100%) brightness(1.4);
  transition: all .25s ease;
}

.logo-row img:hover {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
}

 .footer-caption {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(174, 228, 217, 0.65); /* green-ocean tint */
  letter-spacing: 0.02em;
}

.version-card{
  max-width:1240px;
  margin: 28px auto 0;
  padding: 16px 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(126,170,46,.16), rgba(8,145,178,.14));
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}

.version-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.version-head h3{
  margin:0;
  font-size:14px;
  letter-spacing:.2px;
}

.version-head p{
  margin:6px 0 0;
  color: rgba(226,232,240,.72);
  font-size:12px;
  line-height:1.35;
}

.version-badge{
  font-family: var(--mono);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(126,170,46,.35);
  background: rgba(7,18,32,.55);
  color: rgba(220,252,231,.92);
  white-space: nowrap;
}

.version-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.vfield{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.vfield span{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(226,232,240,.70);
}

.vfield input, .vfield select{
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,18,32,.55);
  color: rgba(255,255,255,.92);
  outline:none;
}

.vfield input:focus, .vfield select:focus{
  border-color: rgba(126,170,46,.55);
  box-shadow: 0 0 0 2px rgba(126,170,46,.25);
}

.version-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.vtoast{
  margin-left:auto;
  font-size:12px;
  color: rgba(174,228,217,.75);
  min-height: 16px;
}

@media (max-width: 1100px){
  .version-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .version-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vtoast{ margin-left:0; width:100%; }
}

/* Vedecom MobiXlab landing-page dark theme */
:root{
  color-scheme:dark;
  --bg0:#030712;
  --bg1:#111827;
  --card:rgba(17,24,39,.86);
  --ring:rgba(255,255,255,.10);
  --muted:#9ca3af;
  --text:#f9fafb;
  --green:#84cc16;
  --teal:#2b5bb5;
  --cyan:#60a5fa;
  --warn:#f59e0b;
  --planned:#f59e0b;
  --optional:#60a5fa;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius:16px;
  --chart-ring:rgba(255,255,255,0.08);
  --chart-native:rgba(132,204,22,0.95);
  --chart-planned:rgba(245,158,11,0.92);
  --chart-optional:rgba(96,165,250,0.88);
  --chart-text:rgba(249,250,251,0.94);
  --chart-muted:rgba(209,213,219,0.82);
  --chart-axis:rgba(209,213,219,0.70);
  --chart-outline:rgba(255,255,255,0.12);
}

body{
  color:var(--text);
  background:
    radial-gradient(720px 720px at -14% 8%, rgba(132,204,22,.16), transparent 62%),
    radial-gradient(620px 620px at 110% 12%, rgba(37,99,235,.14), transparent 62%),
    radial-gradient(760px 760px at 45% 110%, rgba(94,164,10,.08), transparent 58%),
    radial-gradient(circle at 7% 18%, transparent 0 72px, rgba(190,242,100,.20) 73px, transparent 74px),
    radial-gradient(circle at 64% 28%, transparent 0 132px, rgba(147,197,253,.14) 133px, transparent 134px),
    radial-gradient(rgba(255,255,255,.36) .35px, transparent .65px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(180deg, #030712 0%, #111827 52%, #0f172a 100%);
  background-size:auto, auto, auto, auto, auto, 24px 24px, 80px 80px, 80px 80px, auto;
}
body:before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:78px;
  z-index:0;
  pointer-events:none;
  background:rgba(3,7,18,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
body:after{
  content:"";
  position:fixed;
  top:50%;
  right:-150px;
  width:min(66vw, 860px);
  height:min(96vw, 1290px);
  z-index:0;
  pointer-events:none;
  background:url("./public/logos/vedecom-pattern-logo.svg") center / contain no-repeat;
  opacity:.16;
  transform:translateY(-50%);
  filter:saturate(1.1);
}

a{color:#a3e635}
.wrap{position:relative;z-index:1;max-width:1280px;padding:104px 24px 56px}
.top{
  position:relative;
  margin-bottom:24px;
  padding:26px 28px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(17,24,39,.78);
  box-shadow:0 22px 70px rgba(0,0,0,.32);
  backdrop-filter:blur(20px);
}
.top:before{display:none}
.brand{gap:16px}
.logo{
  width:118px;
  height:58px;
  border-radius:12px;
  background:linear-gradient(135deg, #84cc16, #3a6a00);
  box-shadow:0 14px 30px rgba(132,204,22,.22);
}
.logo:before{background:linear-gradient(135deg, rgba(255,255,255,.30), transparent 58%)}
.logoImg{width:92px;height:42px}
.title:before{
  content:"OCPP 2.1 Production CSMS";
  display:block;
  margin-bottom:7px;
  color:#a3e635;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.title h1{
  color:#f9fafb;
  font-size:clamp(30px, 4vw, 48px);
  font-weight:850;
  line-height:1.05;
  letter-spacing:0;
}
.title p{color:#d1d5db;font-size:15px;max-width:760px}
.actions{align-self:center}
.chip{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#e5e7eb;
}
.dot{background:#84cc16;box-shadow:0 0 0 4px rgba(132,204,22,.16)}
.btn{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#f9fafb;
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.btn:hover{background:rgba(255,255,255,.10);text-decoration:none}
.btn.primary{
  border-color:#84cc16;
  background:#84cc16;
  color:#1a2e05;
  box-shadow:0 12px 26px rgba(132,204,22,.24);
}
.btn.primary:hover{background:#a3e635}
.card{
  border-color:rgba(255,255,255,.08);
  background:rgba(17,24,39,.82);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}
.card.pad{padding:18px}
.kpi .label,
.filterField span,
.vfield span{
  color:#9ca3af;
  font-weight:800;
}
.kpi .value{color:#f9fafb}
.kpi.native .value{color:#d9f99d}
.kpi.planned .value{color:#fde68a}
.kpi.optional .value{color:#bfdbfe}
.kpi .hint,
.kpi .value .sub,
.chartTitle .mini,
.lg,
.hintRight,
.tableHeader p,
.footer,
.footer-note,
.vtoast{
  color:#9ca3af;
}
.dashboardNote{
  border-color:rgba(132,204,22,.20);
  background:linear-gradient(135deg, rgba(132,204,22,.12), rgba(37,99,235,.10));
  color:#d1d5db;
}
.summaryPill,
.pill,
.badge{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:#e5e7eb;
}
.chartTitle,
.controlsRow,
.tableHeader{
  border-bottom-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.055), transparent);
}
.chartTitle h2,
.tableHeader h2,
.version-head h3{color:#f9fafb}
.sw.total{background:#f9fafb}
.input,
select,
.vfield input,
.vfield select{
  background:rgba(3,7,18,.62);
  border-color:rgba(255,255,255,.12);
  color:#f9fafb;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.input::placeholder{color:#6b7280}
.input:focus,
select:focus,
select:focus-visible,
.vfield input:focus,
.vfield select:focus{
  border-color:#84cc16;
  box-shadow:0 0 0 3px rgba(132,204,22,.18);
}
select option{
  background:#111827;
  color:#f9fafb;
}
select option:hover,
select option:focus,
select option:checked{
  background:#3f6212 !important;
  color:#f7fee7 !important;
}
thead th{
  background:rgba(3,7,18,.94);
  color:#9ca3af;
  border-bottom-color:rgba(255,255,255,.08);
}
tbody td{
  color:#e5e7eb;
  border-bottom-color:rgba(255,255,255,.06);
}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
tbody tr:hover td{background:rgba(132,204,22,.075)}
.domainKey{
  background:rgba(132,204,22,.16);
  border-color:rgba(190,242,100,.32);
  color:#d9f99d;
}
.domainName,
.emptyState{color:#d1d5db}
.bNative{
  border-color:rgba(190,242,100,.34);
  background:rgba(132,204,22,.14);
  color:#d9f99d;
}
.bPlanned{
  border-color:rgba(251,191,36,.34);
  background:rgba(245,158,11,.14);
  color:#fde68a;
}
.bOptional{
  border-color:rgba(147,197,253,.34);
  background:rgba(59,130,246,.14);
  color:#bfdbfe;
}
.version-card{
  border-color:rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(17,24,39,.82);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  backdrop-filter:blur(16px);
}
.version-head{border-bottom-color:rgba(255,255,255,.08)}
.version-head p{color:#9ca3af}
.version-badge{
  border-color:rgba(190,242,100,.34);
  background:rgba(132,204,22,.14);
  color:#d9f99d;
}
.site-footer{
  background:#0f172a;
  border-top:0;
}
.footer-block h4{color:#a3e635}
.footer-caption{color:#94a3b8}
.logo-row img{
  opacity:.72;
  filter:grayscale(100%) brightness(.68);
}
.logo-row img:hover{filter:none}

body[data-theme="light"]{
  color-scheme:light;
  --bg0:#f9fafb;
  --bg1:#ffffff;
  --card:#ffffff;
  --ring:#e5e7eb;
  --muted:#6b7280;
  --text:#111827;
  --green:#5ea40a;
  --teal:#2b5bb5;
  --cyan:#2563eb;
  --warn:#d97706;
  --planned:#d97706;
  --optional:#2563eb;
  --shadow:0 18px 50px rgba(15,23,42,.08);
  --chart-ring:rgba(17,24,39,0.08);
  --chart-native:rgba(94,164,10,0.95);
  --chart-planned:rgba(217,119,6,0.92);
  --chart-optional:rgba(37,99,235,0.88);
  --chart-text:rgba(17,24,39,0.92);
  --chart-muted:rgba(107,114,128,0.90);
  --chart-axis:rgba(107,114,128,0.78);
  --chart-outline:rgba(17,24,39,0.12);
  background:
    radial-gradient(720px 720px at -14% 8%, rgba(132,204,22,.13), transparent 62%),
    radial-gradient(620px 620px at 110% 12%, rgba(43,91,181,.10), transparent 62%),
    radial-gradient(760px 760px at 45% 110%, rgba(94,164,10,.06), transparent 58%),
    radial-gradient(circle at 7% 18%, transparent 0 72px, rgba(94,164,10,.12) 73px, transparent 74px),
    radial-gradient(circle at 64% 28%, transparent 0 132px, rgba(37,99,235,.10) 133px, transparent 134px),
    radial-gradient(rgba(17,24,39,.16) .35px, transparent .65px),
    linear-gradient(90deg, rgba(17,24,39,.035) 1px, transparent 1px),
    linear-gradient(rgba(17,24,39,.045) 1px, transparent 1px),
    linear-gradient(180deg, #f9fafb 0%, #ffffff 52%, #f3f4f6 100%);
  background-size:auto, auto, auto, auto, auto, 24px 24px, 80px 80px, 80px 80px, auto;
}
body[data-theme="light"]:before{
  background:rgba(255,255,255,.82);
  border-bottom-color:rgba(17,24,39,.06);
}
body[data-theme="light"]:after{
  opacity:.08;
  filter:saturate(1.05);
}
body[data-theme="light"] a{color:#4d8708}
body[data-theme="light"] .top{
  border-color:rgba(17,24,39,.06);
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 70px rgba(15,23,42,.08);
}
body[data-theme="light"] .logo{
  background:linear-gradient(135deg, #5ea40a, #3a6a00);
  box-shadow:0 14px 30px rgba(94,164,10,.22);
}
body[data-theme="light"] .title:before{color:#4d8708}
body[data-theme="light"] .title h1,
body[data-theme="light"] .kpi .value,
body[data-theme="light"] .chartTitle h2,
body[data-theme="light"] .tableHeader h2,
body[data-theme="light"] .version-head h3{color:#111827}
body[data-theme="light"] .title p{color:#4b5563}
body[data-theme="light"] .chip,
body[data-theme="light"] .summaryPill,
body[data-theme="light"] .pill,
body[data-theme="light"] .badge{
  border-color:#e5e7eb;
  background:#f9fafb;
  color:#374151;
}
body[data-theme="light"] .dot{background:#5ea40a;box-shadow:0 0 0 4px rgba(94,164,10,.16)}
body[data-theme="light"] .btn{
  border-color:#e5e7eb;
  background:#ffffff;
  color:#111827;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
body[data-theme="light"] .btn:hover{background:#f3f4f6}
body[data-theme="light"] .btn.primary{
  border-color:#5ea40a;
  background:#5ea40a;
  color:#f7fee7;
  box-shadow:0 12px 26px rgba(94,164,10,.24);
}
body[data-theme="light"] .btn.primary:hover{background:#4d8708}
body[data-theme="light"] .card,
body[data-theme="light"] .version-card{
  border-color:#e5e7eb;
  background:#ffffff;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
body[data-theme="light"] .kpi .label,
body[data-theme="light"] .filterField span,
body[data-theme="light"] .vfield span,
body[data-theme="light"] .kpi .hint,
body[data-theme="light"] .kpi .value .sub,
body[data-theme="light"] .chartTitle .mini,
body[data-theme="light"] .lg,
body[data-theme="light"] .hintRight,
body[data-theme="light"] .tableHeader p,
body[data-theme="light"] .footer,
body[data-theme="light"] .footer-note,
body[data-theme="light"] .vtoast,
body[data-theme="light"] .version-head p{color:#6b7280}
body[data-theme="light"] .kpi.native .value{color:#3a6a00}
body[data-theme="light"] .kpi.planned .value{color:#b45309}
body[data-theme="light"] .kpi.optional .value{color:#1d4ed8}
body[data-theme="light"] .dashboardNote{
  border-color:#dbeafe;
  background:linear-gradient(135deg, #f8fafc, #f0f7e8);
  color:#374151;
}
body[data-theme="light"] .chartTitle,
body[data-theme="light"] .controlsRow,
body[data-theme="light"] .tableHeader{
  border-bottom-color:#e5e7eb;
  background:linear-gradient(180deg, #ffffff, #f9fafb);
}
body[data-theme="light"] .sw.total{background:#111827}
body[data-theme="light"] .input,
body[data-theme="light"] select,
body[data-theme="light"] .vfield input,
body[data-theme="light"] .vfield select{
  background:#ffffff;
  border-color:#d1d5db;
  color:#111827;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
body[data-theme="light"] .input::placeholder{color:#9ca3af}
body[data-theme="light"] .input:focus,
body[data-theme="light"] select:focus,
body[data-theme="light"] select:focus-visible,
body[data-theme="light"] .vfield input:focus,
body[data-theme="light"] .vfield select:focus{
  border-color:#5ea40a;
  box-shadow:0 0 0 3px rgba(94,164,10,.18);
}
body[data-theme="light"] select option{
  background:#ffffff;
  color:#111827;
}
body[data-theme="light"] select option:hover,
body[data-theme="light"] select option:focus,
body[data-theme="light"] select option:checked{
  background:#ecfccb !important;
  color:#1a2e05 !important;
}
body[data-theme="light"] thead th{
  background:rgba(249,250,251,.94);
  color:#6b7280;
  border-bottom-color:#e5e7eb;
}
body[data-theme="light"] tbody td{
  color:#1f2937;
  border-bottom-color:#edf0f3;
}
body[data-theme="light"] tbody tr:nth-child(even) td{background:#fafafa}
body[data-theme="light"] tbody tr:hover td{background:#f0f7e8}
body[data-theme="light"] .domainKey{
  background:#ecfccb;
  border-color:#bef264;
  color:#3f6212;
}
body[data-theme="light"] .domainName,
body[data-theme="light"] .emptyState{color:#4b5563}
body[data-theme="light"] .bNative,
body[data-theme="light"] .version-badge{
  border-color:#bef264;
  background:#ecfccb;
  color:#3f6212;
}
body[data-theme="light"] .bPlanned{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
body[data-theme="light"] .bOptional{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
body[data-theme="light"] .version-head{border-bottom-color:#e5e7eb}
body[data-theme="light"] .footer-block h4{color:#a3e635}
body[data-theme="light"] .footer-caption{color:#94a3b8}

@media (max-width: 760px){
  body:after{opacity:.08;right:-220px;width:720px;height:1080px}
  .wrap{padding:92px 16px 40px}
  .top{padding:20px;border-radius:20px}
  .title h1{font-size:30px}
}