:root{
      --bg: #f7f8fb;
      --card: #ffffff;
      --text: #101828;
      --muted: #667085;
      --border: rgba(16,24,40,.10);
      --shadow: 0 18px 40px rgba(16,24,40,.08);
      --shadow-soft: 0 10px 22px rgba(16,24,40,.06);
      --accent: #2563eb;      /* синий */
      --accent-2: #06b6d4;    /* бирюзовый */
      --good: #16a34a;
      --warn: #f59e0b;
      --radius: 18px;
      --radius-sm: 14px;
      --max: 1160px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      color: var(--text);
      background: var(--bg);
    }

    a{ color: inherit; text-decoration: none; }
    a:focus{ outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; border-radius: 10px; }

    .container{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

    /* Header */
    header{
      padding: 34px 0 18px;
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(8px);
      border-radius: 999px;
      box-shadow: var(--shadow-soft);
    }
    .logo{
      width: 34px; height: 34px; border-radius: 10px;
      background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.95));
      display:grid; place-items:center; color:white; font-weight: 800;
      letter-spacing: -0.5px;
      user-select: none;
    }
    .brand-title{ line-height:1.05; }
    .brand-title b{ display:block; font-size: 13px; }
    .brand-title span{ display:block; font-size: 12px; color: var(--muted); margin-top: 2px; }

    .actions{
      display:flex; align-items:center; gap: 10px; flex-wrap: wrap;
    }
    .pill{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.65);
      box-shadow: var(--shadow-soft);
      color: var(--muted);
      font-size: 13px;
      display:flex; align-items:center; gap: 8px;
      cursor: default;
      user-select: none;
    }
    .btn{
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.75);
      box-shadow: var(--shadow-soft);
      font-weight: 600;
      font-size: 13px;
      display:flex; align-items:center; gap: 8px;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); background: #fff; }
    .btn.primary{
      border-color: rgba(37,99,235,.22);
      background: rgba(37,99,235,.10);
    }

    /* Hero */
    .hero{
      margin-top: 18px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(10px);
      border-radius: calc(var(--radius) + 4px);
      box-shadow: var(--shadow);
      padding: 26px;
      overflow:hidden;
      position: relative;
    }
    .hero::before{
      content:"";
      position:absolute; inset: -1px;
      background: transparent;
      pointer-events: none;
    }
    .hero-grid{
      position: relative;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items: start;
    }
    .hero h1{
      margin:0;
      font-size: 30px;
      line-height: 1.12;
      letter-spacing: -0.6px;
    }
    .hero p{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.5;
      max-width: 62ch;
    }
    .hero-badges{
      margin-top: 14px;
      display:flex; flex-wrap: wrap; gap: 10px;
    }
    .badge{
      font-size: 12px;
      color: #0f172a;
      background: rgba(255,255,255,.9);
      border: 1px solid var(--border);
      padding: 8px 10px;
      border-radius: 999px;
      display:flex; align-items:center; gap: 8px;
    }
    .dot{
      width: 9px; height: 9px; border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    }
    .dot.cyan{ background: var(--accent-2); box-shadow: 0 0 0 4px rgba(6,182,212,.12); }
    .dot.green{ background: var(--good); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
    .dot.amber{ background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,.12); }

    .side-card{
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: rgba(255,255,255,.86);
      padding: 16px;
      box-shadow: var(--shadow-soft);
    }
    .side-card h3{
      margin:0;
      font-size: 14px;
      letter-spacing: -0.2px;
    }
    .side-card p{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .side-row{
      margin-top: 12px;
      display:flex; gap: 10px; flex-wrap: wrap;
    }

    /* Toolbar */
    .toolbar{
      margin: 18px 0 8px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .search{
      flex: 1 1 360px;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.75);
      box-shadow: var(--shadow-soft);
    }
    .search input{
      border:0;
      outline: none;
      background: transparent;
      width: 100%;
      font-size: 14px;
      color: var(--text);
    }
    .search .hint{
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      user-select: none;
    }

    .filters{
      display:flex; gap: 10px; flex-wrap: wrap;
    }
    .chip{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.75);
      box-shadow: var(--shadow-soft);
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      transition: transform .12s ease, background .12s ease;
      user-select:none;
    }
    .chip:hover{ transform: translateY(-1px); background: #fff; }
    .chip.active{
      color: #0b1220;
      border-color: rgba(37,99,235,.22);
      background: rgba(37,99,235,.10);
      font-weight: 700;
    }

    /* Grid */
    .grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin: 12px 0 24px;
    }
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px){
      header{ padding-top: 18px; }
      .grid{ grid-template-columns: 1fr; }
      .hero{ padding: 18px; }
      .hero h1{ font-size: 24px; }
    }

    .card{
      border: 1px solid var(--border);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(8px);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      padding: 14px;
      display:flex;
      flex-direction: column;
      gap: 10px;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
      min-height: 170px;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      background: #fff;
    }
    .card-top{
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .icon{
      width: 42px; height: 42px;
      border-radius: 14px;
      background: rgba(37,99,235,.10);
      border: 1px solid rgba(37,99,235,.14);
      display:grid; place-items:center;
      user-select: none;
    }
    .title{
      margin:0;
      font-size: 15px;
      letter-spacing: -0.2px;
    }
    .desc{
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .meta{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .tag{
      font-size: 12px;
      color: #0f172a;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.9);
    }

    .card-actions{
      margin-top: auto;
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .link{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(37,99,235,.18);
      background: rgba(37,99,235,.10);
      font-weight: 700;
      font-size: 13px;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .link:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); background: #fff; }

    .subtle{
      color: var(--muted);
      font-size: 12px;
      display:flex;
      align-items:center;
      gap: 8px;
    }

    /* Empty */
    .empty{
      border: 1px dashed rgba(16,24,40,.18);
      background: rgba(255,255,255,.70);
      border-radius: var(--radius);
      padding: 18px;
      color: var(--muted);
      box-shadow: var(--shadow-soft);
    }

    /* Footer */
    footer{
      margin-top: 8px;
      padding: 18px 0 30px;
      color: var(--muted);
    }
    .footer-card{
      border: 1px solid var(--border);
      background: rgba(255,255,255,.70);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      padding: 16px;
      display:flex;
      gap: 14px;
      align-items:flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .footer-card b{ color: var(--text); }
    .footer-links{
      display:flex; gap: 10px; flex-wrap: wrap;
    }
    .footer-links a{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.85);
      box-shadow: var(--shadow-soft);
      font-weight: 600;
      font-size: 13px;
    }
    .footer-links a:hover{ background: #fff; }
    .small{ font-size: 12px; color: var(--muted); line-height: 1.45; }
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); border:0;
    }

    @media (max-width: 640px){
      /* Верхняя панель: аккуратно в колонку */
      .topbar{ flex-direction: column; align-items: stretch; }
      .brand{ width: 100%; justify-content: flex-start; }
      .actions{ width: 100%; justify-content: flex-start; }
      .actions .pill{ width: 100%; justify-content: center; }
      .actions .btn{ width: 100%; justify-content: center; }

      /* Панель поиска и фильтров — в колонку */
      .toolbar{ flex-direction: column; align-items: stretch; }
      .search{ width: 100%; flex: none; }
      .search input{ min-width: 0; }
      .filters{ width: 100%; flex-direction: column; align-items: stretch; }
      .chip{ width: 100%; text-align: center; }

      /* Чтобы кнопки/пилюли не выглядели "раздутыми" */
      .chip, .btn, .pill{ padding-top: 12px; padding-bottom: 12px; }
    }