:root{
      --tech_bg:#0b1220;
      --tech_panel:#0f1b32;
      --tech_text:#e7eefc;
      --tech_muted:rgba(231,238,252,.72);
      --tech_line:rgba(231,238,252,.12);
      --tech_link:#8ab4ff;
      --tech_accent:#5eead4;

      --tech_radius:16px;
      --tech_shadow:0 10px 30px rgba(0,0,0,.35);
      --tech_max:1140px;

      --tech_h1:clamp(22px, 3vw, 34px);
      --tech_h2:clamp(16px, 2.2vw, 20px);
      --tech_body:16px;
      --tech_small:14px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font:400 var(--tech_body)/1.75 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--tech_text);
      background:
        radial-gradient(900px 500px at 10% 10%, rgba(94,234,212,.12), transparent 60%),
        radial-gradient(700px 500px at 90% 0%, rgba(138,180,255,.12), transparent 55%),
        var(--tech_bg);
    }
    a{color:var(--tech_link);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;height:auto;display:block}

    .tech_skip{
      position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
    }
    .tech_skip:focus{
      left:16px;top:16px;width:auto;height:auto;padding:10px 12px;
      background:#0b1220;border:1px solid var(--tech_line);border-radius:12px;z-index:9999;
    }

    .tech_topbar{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(11,18,32,.55);
      border-bottom:1px solid var(--tech_line);
    }
    .tech_topbar_in{
      max-width:var(--tech_max);
      margin:0 auto;
      padding:12px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .tech_brand{display:flex;align-items:center;gap:10px;min-width:160px}
    .tech_logo{
      width:34px;height:34px;border-radius:12px;
      background: linear-gradient(135deg, rgba(94,234,212,.9), rgba(138,180,255,.9));
      box-shadow: var(--tech_shadow);
      flex:0 0 auto;
    }
    .tech_brand_name{font-weight:700;letter-spacing:.3px;line-height:1.2}
    .tech_brand_tag{display:block;font-size:12px;color:var(--tech_muted);margin-top:2px}

    .tech_nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
    .tech_nav a{
      font-size:14px;color:var(--tech_muted);
      padding:8px 10px;border-radius:12px;
    }
    .tech_nav a:hover{color:var(--tech_text);background:rgba(231,238,252,.06);text-decoration:none}

    .tech_wrap{
      max-width:var(--tech_max);
      margin:0 auto;
      padding:18px 16px 56px;
    }

    .tech_breadcrumb{
      font-size:13px;color:var(--tech_muted);
      margin:10px 0 14px;
    }
    .tech_breadcrumb a{color:var(--tech_muted)}
    .tech_breadcrumb span{opacity:.7;margin:0 6px}

    .tech_grid{
      display:grid;
      grid-template-columns: 1fr 320px;
      gap:18px;
      align-items:start;
    }

    .tech_card{
      background: linear-gradient(180deg, rgba(15,27,50,.92), rgba(15,27,50,.78));
      border:1px solid var(--tech_line);
      border-radius:var(--tech_radius);
      box-shadow: var(--tech_shadow);
    }

    /* 页头区 */
    .tech_header{
      padding:16px 16px 14px;
    }
    .tech_header h1{
      margin:0;
      font-size:var(--tech_h1);
      line-height:1.25;
      letter-spacing:.2px;
    }
    .tech_header p{
      margin:8px 0 0;
      color:var(--tech_muted);
      font-size:15px;
    }

    /* 工具条（搜索 + 筛选） */
    .tech_tools{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      padding:12px 16px 16px;
      border-top:1px solid var(--tech_line);
    }
    .tech_search{
      display:flex;
      gap:10px;
      align-items:center;
      flex:1 1 360px;
    }
    .tech_search input{
      width:100%;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(0,0,0,.18);
      color:var(--tech_text);
      outline:none;
    }
    .tech_search input::placeholder{color:rgba(231,238,252,.45)}
    .tech_btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.06);
      color:var(--tech_text);
      font-size:14px;
      white-space:nowrap;
    }
    .tech_btn:hover{background:rgba(231,238,252,.10);text-decoration:none}
    .tech_btn_primary{
      border-color:rgba(94,234,212,.35);
      background:rgba(94,234,212,.10);
    }

    .tech_filters{
      display:flex;gap:8px;flex-wrap:wrap;
      justify-content:flex-end;
      flex:1 1 240px;
    }
    .tech_chip{
      font-size:13px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.05);
      color:var(--tech_muted);
    }
    .tech_chip:hover{color:var(--tech_text);text-decoration:none;background:rgba(231,238,252,.08)}
    .tech_chip_active{
      color:var(--tech_text);
      border-color:rgba(94,234,212,.35);
      background:rgba(94,234,212,.10);
    }

    /* 列表 */
    .tech_list{
      padding:14px;
      display:grid;
      gap:12px;
    }

    .tech_item{
      display:grid;
      grid-template-columns: 168px 1fr;
      gap:12px;
      padding:12px;
      border-radius:16px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.04);
      overflow:hidden;
    }
    .tech_item:hover{background:rgba(231,238,252,.07)}
    .tech_cover{
      border-radius:14px;
      border:1px solid rgba(231,238,252,.12);
      background:rgba(0,0,0,.15);
      overflow:hidden;
      aspect-ratio: 16/10;
    }
    .tech_cover img{width:100%;height:100%;object-fit:cover}

    .tech_item h2{
      margin:2px 0 6px;
      font-size:var(--tech_h2);
      line-height:1.35;
      letter-spacing:.2px;
    }
    .tech_item h2 a{color:var(--tech_text)}
    .tech_item h2 a:hover{text-decoration:none;color:#fff}

    .tech_meta{
      display:flex;flex-wrap:wrap;gap:8px 12px;
      font-size:13px;color:var(--tech_muted);
      align-items:center;
      margin:0 0 8px;
    }
    .tech_badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.06);
      color:var(--tech_muted);
    }
    .tech_dot{
      width:6px;height:6px;border-radius:99px;background:var(--tech_accent);
      box-shadow:0 0 0 4px rgba(94,234,212,.12);
    }

    .tech_desc{
      margin:0;
      color:var(--tech_muted);
      font-size:14px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .tech_kws{
      margin-top:10px;
      display:flex;flex-wrap:wrap;gap:8px;
    }
    .tech_kw{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(231,238,252,.12);
      background:rgba(231,238,252,.05);
      color:rgba(231,238,252,.75);
    }

    /* 分页 */
    .tech_pagination{
      padding:10px 14px 16px;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      border-top:1px solid var(--tech_line);
      flex-wrap:wrap;
    }
    .tech_pages{
      display:flex;gap:8px;flex-wrap:wrap;align-items:center;
      color:var(--tech_muted);font-size:14px;
    }
    .tech_page{
      padding:8px 10px;border-radius:12px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.05);
      color:var(--tech_muted);
    }
    .tech_page:hover{color:var(--tech_text);text-decoration:none;background:rgba(231,238,252,.08)}
    .tech_page_active{
      color:var(--tech_text);
      border-color:rgba(94,234,212,.35);
      background:rgba(94,234,212,.10);
    }

    /* Sidebar */
    .tech_aside{
      position:sticky;
      top:74px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .tech_aside_box{padding:14px}
    .tech_aside_title{font-weight:700;margin:0 0 10px;letter-spacing:.2px}

    .tech_side_list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
    .tech_side_list a{
      display:block;
      padding:12px;
      border-radius:14px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.05);
      color:var(--tech_text);
    }
    .tech_side_list a:hover{text-decoration:none;background:rgba(231,238,252,.08)}
    .tech_side_list small{display:block;color:var(--tech_muted);margin-top:6px}

    .tech_tagcloud{display:flex;flex-wrap:wrap;gap:8px}
    .tech_tag{
      font-size:13px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--tech_line);
      background:rgba(231,238,252,.06);
      color:var(--tech_muted);
    }
    .tech_tag:hover{color:var(--tech_text);text-decoration:none;background:rgba(231,238,252,.09)}

    .tech_footer{
      max-width:var(--tech_max);
      margin:0 auto;
      padding:22px 16px 30px;
      color:var(--tech_muted);
      border-top:1px solid var(--tech_line);
      font-size:14px;
    }

    @media (max-width: 980px){
      .tech_grid{grid-template-columns:1fr}
      .tech_aside{position:static}
    }
    @media (max-width: 620px){
      .tech_item{grid-template-columns:1fr}
      .tech_cover{aspect-ratio: 16/9}
      .tech_brand_tag{display:none}
    }