/* собрано из каталога — tools/catalog/to_db.py */

  :root{
    --bg:#ffffff; --tile:#ffffff; --tile-hi:#f4f6f9; --line:#e4e7ec; --text:#12141a;
    --muted:#5a6472; --dim:#8a93a3; --accent:#2d67f6;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

  .hero-line{background:var(--tile-hi);border-bottom:1px solid var(--line);padding:16px 24px;
    text-align:center;font-size:1.02rem;font-weight:600;color:var(--text)}
  .hero-line span{color:var(--accent)}
  .topbar{display:flex;gap:16px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:var(--bg);z-index:5}
  .topbar h1{font-size:1.1rem;margin:0;white-space:nowrap}
  .search-row{flex:1;display:flex;max-width:640px;background:var(--tile-hi);border:1px solid var(--line);
    border-radius:10px;overflow:hidden}
  .search-row input{flex:1;border:none;background:none;color:var(--text);padding:11px 16px;font-size:.92rem;outline:none}
  .search-row button{border:none;background:var(--accent);color:#fff;font-weight:650;padding:11px 22px;
    cursor:pointer;font-size:.9rem}

  .shell{display:flex;align-items:flex-start;max-width:1400px;margin:0 auto}
  aside.filters{width:230px;flex:0 0 230px;padding:24px 16px 60px;position:sticky;top:65px;
    max-height:calc(100vh - 65px);overflow-y:auto}
  aside.filters .fgroup{border-bottom:1px solid var(--line);padding:14px 0}
  aside.filters .fgroup summary{cursor:pointer;list-style:none;display:flex;align-items:center;
    justify-content:space-between;font-size:.92rem;font-weight:600}
  aside.filters .fgroup summary::-webkit-details-marker{display:none}
  aside.filters .fgroup summary::after{content:"\203A";color:var(--dim)}
  aside.filters .opt{display:flex;align-items:center;gap:8px;padding:7px 2px;font-size:.86rem;color:var(--muted)}
  aside.filters .opt input{accent-color:var(--accent)}
  aside.filters .opt.sub{padding:5px 2px 5px 24px;font-size:.82rem}
  aside.filters .soc{width:18px;height:18px;flex:0 0 18px}
  aside.filters .soc-l{display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:#fff;font-size:.7rem;font-weight:700}
  .main{flex:1;min-width:0;padding:24px 24px 80px}

  .sub-text{color:var(--muted);margin:0 0 8px;font-size:.95rem}
  .sources{color:var(--dim);font-size:.82rem;margin:0 0 36px}
  section.group{margin:0 0 40px}
  section.group h2{font-size:1.15rem;margin:0 0 16px}
  section.group .count{color:var(--dim);font-weight:400;font-size:.9rem}
  @media (max-width:900px){aside.filters{display:none}}

  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media (max-width:980px){.tiles{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:460px){.tiles{grid-template-columns:1fr}}

  .tile{background:var(--tile);border:1px solid var(--line);border-radius:12px;overflow:hidden;
    display:block;text-decoration:none;color:inherit;cursor:pointer}
  .tile:hover{border-color:var(--accent)}
  .visual{position:relative;aspect-ratio:4/3;background:#0d1117;overflow:hidden;border:1px solid var(--line)}
  .front{position:absolute;inset:0}
  .visual .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    background:radial-gradient(circle at 50% 35%,#1c2b3a,#0d1420)}
  .pic-empty{background:linear-gradient(160deg,#1c2b3a,#0f1a24)}
  .stars-badge{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55);
    color:#facc15;letter-spacing:1px;font-size:.8rem;padding:3px 8px;border-radius:20px}
  .backface{position:absolute;inset:0;background:linear-gradient(160deg,#132623,#0b1512);
    color:var(--muted);padding:14px;display:flex;flex-direction:column;justify-content:space-between;
    gap:8px;font-size:.74rem;line-height:1.4}
  .backface .desc{margin:0}
  .backface .tags{margin:0;display:flex;flex-wrap:wrap;gap:5px}
  .backface .hashtag{color:var(--accent);font-weight:600;font-size:.72rem;background:rgba(45,103,246,.12);
    padding:2px 7px;border-radius:20px}
  .meta{display:flex;flex-direction:column;gap:5px;padding:10px 12px}
  .meta .name{font-size:.87rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meta-row2{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .meta .tier{font-size:.64rem;color:var(--dim);text-transform:uppercase}
  .sota{font-size:.62rem;font-weight:700;color:#fff;background:var(--accent);
    padding:1px 6px;border-radius:20px}

  /* Скан-луч */
  .v-scan .backface{clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.7,0,.3,1)}
  .tile.v-scan:hover .backface,.tile.v-scan.demo .backface{clip-path:inset(0 0 0% 0)}
  .v-scan .scan{position:absolute;left:0;right:0;height:3px;top:0;background:var(--accent);
    box-shadow:0 0 14px 3px var(--accent);opacity:0;
    transition:top .55s cubic-bezier(.7,0,.3,1),opacity .1s;z-index:3}
  .tile.v-scan:hover .scan,.tile.v-scan.demo .scan{top:100%;opacity:1}

  footer{margin-top:40px;color:var(--dim);font-size:.82rem;border-top:1px solid var(--line);padding-top:16px}
  /* filters:start */
  aside.filters{padding:24px 0 60px 16px;width:340px;flex:0 0 340px}
  aside.filters .opt{white-space:nowrap}
  aside.filters .fpanel{background:var(--tile-hi);border:1px solid var(--line);border-radius:12px;padding:0 14px 6px}
  aside.filters .ftitle{display:flex;align-items:center;justify-content:space-between;font-size:.95rem;
    font-weight:700;padding:14px 0;border-bottom:1px solid var(--line)}
  aside.filters .ftitle svg{width:16px;height:16px;stroke:var(--dim)}
  aside.filters .fgroup:last-child{border-bottom:none}
  aside.filters .cat-row{display:flex;align-items:center;justify-content:space-between}
  aside.filters .chev{border:none;background:none;color:var(--dim);font-size:1.1rem;cursor:pointer;
    padding:2px 6px;transition:transform .15s}
  aside.filters .cat.open .chev{transform:rotate(90deg)}
  aside.filters .subs{display:none;padding-left:22px}
  aside.filters .cat.open .subs{display:block}
  aside.filters .subs .opt{padding:5px 2px;font-size:.82rem}
  aside.filters .stars-pick{display:flex;align-items:center;gap:2px;padding:8px 2px}
  aside.filters .star{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;padding:0 1px;color:#d4d8e0}
  aside.filters .star.on{color:#facc15}
  aside.filters .stars-note{margin-left:10px;font-size:.8rem;color:var(--dim)}
  aside.filters .soc{width:18px;height:18px;flex:0 0 18px;border-radius:4px}
  .filter-title{font-size:1.4rem;margin:0 0 20px;display:none}
  .filter-empty{color:var(--muted);display:none}
  /* filters:end */