:root{
      --bg0:#070b14;
      --bg1:#0a1222;
      --bg2:#0b162b;
      --card:#0b1a2f;
      --card2:#0b2038;
      --line:rgba(255,255,255,.08);
      --line2:rgba(255,255,255,.12);
      --text:#e9efff;
      --muted:rgba(233,239,255,.70);
      --muted2:rgba(233,239,255,.52);
      --shadow: 0 18px 50px rgba(0,0,0,.42);
      --radius:18px;
      --radius2:24px;
      --pad:18px;
      --pad2:22px;

      /* “brand” akcent (jemný, ne křiklavý) */
      --accent:#64b5ff;
      --accent2:#7ee1ff;

      --ok: rgba(90, 255, 165, .16);
      --warn: rgba(255, 190, 90, .16);
      --okLine: rgba(90, 255, 165, .38);
      --warnLine: rgba(255, 190, 90, .38);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 70% -10%, rgba(100,181,255,.16), transparent 62%),
        radial-gradient(900px 520px at 15% 10%, rgba(126,225,255,.12), transparent 55%),
        radial-gradient(900px 520px at 85% 60%, rgba(90,255,165,.08), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 42%, var(--bg0));
    }

    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:1880px; margin:0 auto; padding:18px 18px 44px;
    margin-bottom:60px;
   }

   

    /* ===== Hero ===== */
    .hero{
      margin-top:18px;
      border:1px solid var(--line);
      border-radius: var(--radius2);
      background:
        radial-gradient(900px 420px at 70% -10%, rgba(100,181,255,.18), transparent 62%),
        radial-gradient(700px 380px at 10% 20%, rgba(126,225,255,.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .hero-in{
      padding:22px 22px 18px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:start;
    }
    .hero h1{
      margin:0 0 6px;
      font-size:28px;
      letter-spacing:-.2px;
      color:var(--text);
    }
    .hero p{
      margin:0;
      color:var(--muted);
      max-width:62ch;
      line-height:1.55;
      font-size:13px;
    }

    .hero-side{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:stretch;
    }
    .hint{
      border:1px solid var(--line);
      border-radius:16px;
      background: rgba(0,0,0,.16);
      padding:12px 12px;
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .hint .badge{
      font-size:11px;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);
      white-space:nowrap;
    }
    .hint strong{ display:block; font-size:12px; }
    .hint span{ display:block; margin-top:2px; font-size:12px; color:var(--muted2); line-height:1.4; }

    /* ===== Control bar ===== */
    .controls{
      margin-top:14px;
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    
    .chips{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      cursor:pointer;
      user-select:none;
      font-size:12px;
    }
    .chip:hover{ border-color:var(--line2); background: rgba(255,255,255,.05); color:var(--text); }
    .chip.active{
      border-color: rgba(100,181,255,.35);
      background: rgba(100,181,255,.10);
      color: var(--text);
    }

    /* ===== Sections grid ===== */
    .grid{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:14px;
    }

    .section{
      grid-column: span 4;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:
        radial-gradient(700px 360px at 75% -10%, rgba(100,181,255,.11), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10));
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
      overflow:hidden;

    }
    .section-head{
      padding:16px 16px 12px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      border-bottom: 1px solid var(--line);
      background: rgba(0,0,0,.10);
    }
    .section-title{
      display:flex; gap:12px; align-items:flex-start;
    }
    .section-title i{
      font-size:20px;
      padding-top:1px;
      opacity:.9;
    }
    .section-title h2{
      margin:0;
      font-size:14px;
      letter-spacing:.2px;
    }
    .section-title p{
      margin:3px 0 0;
      color: var(--muted);
      font-size:12px;
      line-height:1.45;
      max-width:52ch;
    }
    .section-meta{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--line);
      color:var(--muted);
      background: rgba(255,255,255,.03);
      display:inline-flex;
      align-items:center;
      gap:6px;
      white-space:nowrap;
    }
    .pill b{ color:var(--text); font-weight:600; }

    .section-body{
      padding:14px 16px 16px;
    }

    /* Dual columns inside section */
    .cols{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    .col{
      border:1px solid var(--line);
      border-radius: 16px;
      background: rgba(0,0,0,.12);
      padding:12px;
      overflow:hidden;
    }
    .col-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }
    .col-head strong{
      font-size:12px;
      letter-spacing:.2px;
    }
    .tag{
      font-size:10px;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid var(--line);
      color: var(--muted);
    }
    .tag.ok{
      background: var(--ok);
      border-color: var(--okLine);
      color: rgba(180,255,220,.9);
    }
    .tag.warn{
      background: var(--warn);
      border-color: var(--warnLine);
      color: rgba(255,224,180,.92);
    }

    .list{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .item{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding:9px 10px;
      border-radius: 12px;
      border:1px solid transparent;
      background: rgba(255,255,255,.03);
      cursor:pointer;
    }
    .item:hover{
      border-color: var(--line);
      background: rgba(255,255,255,.05);
    }
    .item .left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .item .left i{
      font-size:18px;
      opacity:.9;
      flex:0 0 auto;
    }
    .item .left .txt{
      min-width:0;
    }
    .item .left .txt strong{
      display:block;
      font-size:12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .item .left .txt span{
      display:block;
      font-size:11px;
      color: var(--muted2);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      margin-top:1px;
    }

    .txt {
      line-height: 1.6;
    }

    .item .right{
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
    }
    .mini{
      width:26px; height:26px;
      border-radius:10px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      display:grid; place-items:center;
      opacity:.9;
    }

    /* Collapsible */
    .section[data-collapsed="true"] .section-body{ display:none; }
    .toggle{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .toggle:hover{
      border-color:var(--line2);
      background: rgba(255,255,255,.05);
      color:var(--text);
    }

    /* Footer area */
    .foot{
      margin-top:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color: var(--muted2);
      font-size:11px;
      padding: 0 4px;
    }
    .foot .k{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 8px;
      border:1px solid var(--line);
      border-radius:10px;
      background: rgba(255,255,255,.03);
      color: var(--muted);
    }

    /* Responsive */
    @media (max-width: 980px){
      .hero-in{ grid-template-columns: 1fr; }
      .section{ grid-column: span 12; }
      .cols{ grid-template-columns: 1fr; }
      .brand{ min-width:auto; }
    }