:root {
      --ink:#14261c; --ink-soft:#3f5147; --muted:#6b7a70; --line:#dde7e0;
      --surface:#ffffff; --surface-alt:#f4f8f5; --bg:#eef3ef;
      --primary:#1b4332; --primary-soft:#2d6a4f; --primary-pale:#d8f3dc;
      --accent:#b7791f; --accent-pale:#fbf1dc; --info:#1d4e89;
      --info-pale:#e3ecf7; --danger:#a63d40; --danger-pale:#f8e1e1;
      --warning:#c98a12; --success:#2f855a;
      --radius:14px; --shadow:0 1px 2px rgba(20,38,28,.06), 0 8px 24px -12px rgba(20,38,28,.25);
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; font-family:'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; color:var(--ink); background:var(--bg);
      line-height:1.5; -webkit-font-smoothing:antialiased; }
    a { color:var(--primary-soft); }
    .topbar { position:sticky; top:0; z-index:20; background:rgba(20,38,28,.96);
      color:#fff; backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08); }
    .topbar .inner { max-width:1240px; margin:auto; padding:10px 24px; display:flex; gap:18px;
      align-items:center; flex-wrap:wrap; }
    .brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; }
    .brand .mark { width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
      background:linear-gradient(135deg,var(--primary-soft),#52b788); font-size:16px; }
    .brand small { font-weight:500; opacity:.75; margin-left:6px; }
    .topbar nav { margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
    .topbar nav a { color:#e6efe9; text-decoration:none; font-size:13px; padding:6px 10px;
      border-radius:8px; }
    .topbar nav a:hover { background:rgba(255,255,255,.1); }
    .hero { background:radial-gradient(1200px 400px at 10% -20%, #2d6a4f 0%, transparent 60%),
      linear-gradient(135deg,#0f2a1d 0%, #1b4332 55%, #2d6a4f 100%); color:#fff;
      padding:48px 24px 44px; }
    .hero .inner { max-width:1240px; margin:auto; display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px; align-items:end; }
    .hero h1 { margin:0 0 10px; font-size:clamp(28px,3.6vw,44px); line-height:1.1;
      letter-spacing:-.01em; }
    .hero p { margin:0; max-width:640px; opacity:.9; font-size:16px; }
    .hero .meta { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
      background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-size:12.5px;
      font-weight:600; letter-spacing:.02em; }
    main { max-width:1240px; margin:auto; padding:28px 24px 64px; }
    section { margin:34px 0; }
    .section-head { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
    .section-head h2 { margin:0; font-size:22px; letter-spacing:-.01em; }
    .section-head p { margin:0; color:var(--muted); font-size:14px; }
    .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
    .kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:16px 18px; box-shadow:var(--shadow); }
    .kpi .label { color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:.04em;
      text-transform:uppercase; }
    .kpi .value { font-size:30px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px;
      color:var(--primary); }
    .kpi .hint { color:var(--ink-soft); font-size:12.5px; }
    .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; }
    .charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }
    .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:172px;
      transition:transform .12s ease, box-shadow .12s ease; }
    .card:hover { transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(20,38,28,.35); }
    .card.primary { border-top:4px solid var(--primary-soft); }
    .card.missing { opacity:.62; }
    .card h3 { font-size:16.5px; margin:14px 0 6px; line-height:1.3; }
    .card p { color:var(--muted); font-size:13px; margin:0 0 16px; }
    .card-top, .card-bottom { display:flex; justify-content:space-between; gap:10px;
      align-items:center; }
    .card-bottom { margin-top:auto; }
    .badge { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.05em;
      padding:3px 8px; border-radius:6px; text-transform:uppercase; }
    .badge.type { background:var(--primary-pale); color:var(--primary); }
    .badge.primary { background:var(--accent-pale); color:var(--accent); }
    .badge.secondary { background:var(--info-pale); color:var(--info); }
    .badge.technical { background:var(--surface-alt); color:var(--muted); }
    .badge.ok { background:var(--primary-pale); color:var(--success); }
    .badge.warn { background:var(--accent-pale); color:var(--warning); }
    .badge.danger { background:var(--danger-pale); color:var(--danger); }
    .btn { background:var(--primary); color:#fff; text-decoration:none; padding:8px 14px;
      border-radius:9px; font-weight:600; font-size:13.5px; }
    .btn:hover { background:var(--primary-soft); }
    .btn.ghost { background:transparent; color:var(--primary); border:1px solid var(--line); }
    .muted { color:var(--muted); }
    .explain { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    .explain div { background:var(--surface); border:1px solid var(--line);
      border-radius:var(--radius); padding:16px 18px; font-size:14px; }
    .explain strong { display:block; color:var(--primary); font-size:15px; margin-bottom:4px;
      font-family:ui-monospace,Consolas,monospace; }
    .chart { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:16px 18px; box-shadow:var(--shadow); }
    .chart h3 { margin:0 0 4px; font-size:15px; }
    .chart .sub { margin:0 0 10px; color:var(--muted); font-size:12.5px; }
    .chart svg { width:100%; height:auto; display:block; }
    details { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:16px 18px; }
    summary { cursor:pointer; font-weight:700; }
    .table-wrap { overflow:auto; margin-top:14px; border-radius:10px; border:1px solid var(--line); }
    table { border-collapse:collapse; width:100%; font-size:13px; background:var(--surface); }
    th, td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--line);
      vertical-align:top; }
    th { background:var(--surface-alt); color:var(--ink-soft); font-size:12px; letter-spacing:.04em;
      text-transform:uppercase; position:sticky; top:0; }
    tbody tr:hover { background:var(--surface-alt); }
    td.num { text-align:right; font-variant-numeric:tabular-nums; }
    code { font-family:ui-monospace,Consolas,monospace; font-size:12px; background:var(--surface-alt);
      padding:1px 5px; border-radius:5px; word-break:break-all; }
    td code { background:transparent; padding:0; color:var(--ink-soft); }
    .callout { border-left:4px solid var(--accent); background:var(--accent-pale); padding:12px 16px;
      border-radius:10px; font-size:14px; }
    .callout.info { border-color:var(--info); background:var(--info-pale); }
    footer { color:var(--muted); font-size:12.5px; margin-top:40px; border-top:1px solid var(--line);
      padding-top:16px; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; }
    @media (max-width:820px) { .hero .inner, .explain { grid-template-columns:1fr; }
      .hero .meta { justify-content:flex-start; } }
    @media print { .topbar { position:static; } .card:hover { transform:none; } }