:root{
      --bg:#0b1220;
      --card:#111a2d;
      --muted:#a7b3cc;
      --text:#e8eefc;
      --accent:#59d6c7;
      --accent2:#7aa8ff;
      --line:rgba(255,255,255,.10);
      --shadow: 0 12px 30px rgba(0,0,0,.35);
      --radius:18px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(1200px 800px at 20% -10%, rgba(122,168,255,.18), transparent 60%),
        radial-gradient(900px 700px at 90% 10%, rgba(89,214,199,.14), transparent 55%),
        var(--bg);
      color:var(--text);
      line-height:1.6;
    }

    .wrap{ max-width:1100px; margin:0 auto; padding:28px 16px 60px; }

    header.hero{
      padding:22px 22px;
      background: linear-gradient(135deg, rgba(89,214,199,.18), rgba(122,168,255,.10));
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    header.hero h1{
      margin:0 0 10px;
      letter-spacing:.2px;
      line-height:1.15;
      font-size: clamp(26px, 3.6vw, 42px);
    }

    header.hero p{
      margin:0;
      color:var(--muted);
      max-width: 78ch;
      font-size: 1.02rem;
    }

    .pillRow{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top:16px;
    }

    .pill{
      border:1px solid var(--line);
      padding:8px 10px;
      border-radius:999px;
      background: rgba(17,26,45,.65);
      color: var(--text);
      font-size:.92rem;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
    .dot.alt{ background: var(--accent2); }

    main{ margin-top:18px; display:grid; gap:16px; }

    section.card{
      background: rgba(17,26,45,.86);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:18px 18px;
    }

    h2{
      margin:0 0 8px;
      font-size: clamp(18px, 2.2vw, 26px);
      letter-spacing:.2px;
    }
    h3{
      margin:14px 0 6px;
      font-size:1.05rem;
      color: #d8e5ff;
      letter-spacing:.2px;
    }

    p{ margin: 8px 0; color: #d7e2fb; }
    .muted{ color: var(--muted); }

    q{
      display:block;
      margin: 12px 0;
      padding: 12px 14px;
      border-left: 4px solid var(--accent);
      background: rgba(89,214,199,.08);
      border-radius: 12px;
      color:#eafdfb;
      quotes: "„" "“" "‚" "‘";
    }

    .grid2{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items:start;
    }
    @media (max-width: 900px){
      .grid2{ grid-template-columns: 1fr; }
    }

    ul{
      margin: 10px 0 0 18px;
      padding:0;
    }
    li{ margin: 6px 0; color:#dbe6ff; }
    li strong{ color:#ffffff; }

    .callout{
      margin-top:12px;
      padding:12px 14px;
      border:1px solid rgba(122,168,255,.22);
      background: rgba(122,168,255,.08);
      border-radius: 14px;
    }

    table{
      width:100%;
      border-collapse: collapse;
      margin-top: 10px;
      border: 2px solid #a5a5a5;        /* hlavní 1bodový rámeček tabulky */
      background: rgba(10,16,30,.35);
    }

    th, td{
      padding: 12px 10px;
      border: 1px solid #a5a5a5;        /* 1bodová linka pro každou buňku */
      text-align:left;
      vertical-align: top;
    }

    th{
      font-weight:700;
      background: rgba(255,255,255,.06);
    }
    tr:last-child td{ border-bottom:none; }
    .num{ white-space:nowrap; font-variant-numeric: tabular-nums; }
    .good{ color: #8af2d5; font-weight:700; }
    .warn{ color: #ffd27a; font-weight:700; }

    .foot{
      margin-top:16px;
      border-top:1px solid var(--line);
      padding-top:14px;
      color: var(--muted);
      font-size: .95rem;
    }
    .links a{
      color: #bfe6ff;
      text-decoration: none;
      border-bottom: 1px dashed rgba(191,230,255,.45);
    }
    .links a:hover{ border-bottom-color: rgba(191,230,255,.9); }

    .mini{
      font-size:.95rem;
      color: var(--muted);
    }

    .badge{
      display:inline-block;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.05);
      color: #eaf1ff;
      font-size: .85rem;
      margin-left: 8px;
      transform: translateY(-1px);
    }

    .hr{
      height:1px;
      background: var(--line);
      margin: 14px 0;
    }