/* ===== CSS vars/body/nav/keyframes/theme-toggle → styles.css ===== */

    [data-theme="light"] {
      --chip-bg:#f1f5f9;--chip-active:#2563eb;--chip-active-text:#fff;
    }
    [data-theme="dark"] {
      --chip-bg:#21262d;--chip-active:#58a6ff;--chip-active-text:#0d1117;
    }



    /* SEARCH HERO */
    .hero{background:var(--gradient);border-radius:20px;padding:40px 44px;margin-bottom:32px;margin-top:26px;position:relative;overflow:hidden;animation:fadeUp .5s ease .05s both;}
    .hero::before{content:'';position:absolute;top:-60px;right:-40px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07);}
    .hero::after{content:'';position:absolute;bottom:-80px;right:120px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.04);}
    .hero-label{font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,255,255,.65);letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;}
    .hero-title{font-family:'Noto Serif SC',serif;font-size:36px;font-weight:300;color:#fff;line-height:1.25;margin-bottom:20px;}
    .hero-title strong{font-weight:700;}



    /* SEARCH BOX */
    .search-box{position:relative;background:rgba(255,255,255,.2);border-radius:14px;padding:5px;box-shadow:0 4px 20px rgba(0,0,0,.1);display:flex;gap:8px;backdrop-filter:blur(4px);margin-top:8px;}
    .search-input{flex:1;border:none;background:transparent;padding:14px 18px;font-size:15px;color:#fff;outline:none;font-family:'Inter',sans-serif;}
    .search-input::placeholder{color:rgba(255,255,255,.6);}
    .search-btn{padding:12px 24px;border-radius:10px;background:#fff;color:var(--blue);font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;white-space:nowrap;}
    .search-btn:hover{background:rgba(255,255,255,.9);transform:translateY(-1px);}



    /* FILTERS */

    .filters{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:var(--shadow);animation:fadeUp .5s ease .1s both;}

    .filter-section{margin-bottom:20px;}

    .filter-section:last-child{margin-bottom:0;}

    .filter-title{font-size:12px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}

    .filter-chips{display:flex;flex-wrap:wrap;gap:8px;}

    .filter-chip{padding:8px 16px;border-radius:100px;background:var(--chip-bg);border:1px solid transparent;color:var(--text-2);font-size:13px;cursor:pointer;transition:all .2s;}

    .filter-chip:hover{border-color:var(--blue-border);color:var(--blue);}

    .filter-chip.active{background:var(--chip-active);color:var(--chip-active-text);border-color:transparent;}



    /* RESULTS */

    .results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;animation:fadeUp .5s ease .15s both;}

    .results-count{font-size:14px;color:var(--text-2);}

    .results-count strong{color:var(--text);font-weight:600;}

    .results-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);}

    .sort-select{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;cursor:pointer;}



    .results-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;animation:fadeUp .5s ease .2s both;}

    .result-item{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);transition:all .25s;text-decoration:none;color:inherit;position:relative;overflow:hidden;}

    .result-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gradient);transform:scaleX(0);transition:transform .3s ease;transform-origin:left;}

    .result-item:hover{box-shadow:var(--shadow-h);border-color:var(--border-h);transform:translateY(-2px);}

    .result-item:hover::after{transform:scaleX(1);}

    .result-top{display:flex;align-items:center;gap:12px;}

    .result-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC',serif;font-size:18px;font-weight:700;border:2px solid var(--blue-border);background:var(--blue-pale);color:var(--blue);flex-shrink:0;}

    .result-info{flex:1;min-width:0;}

    .result-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    .result-role{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}

    .result-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

    .result-tag{font-size:10px;padding:3px 8px;border-radius:100px;background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue-border);}

    .result-match{font-size:10px;padding:3px 8px;border-radius:100px;background:var(--chip-bg);color:var(--text-2);}

    .result-match strong{color:var(--blue);}

    .result-arrow{display:none;}



    /* PAGINATION */

    .pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap;animation:fadeUp .5s ease .25s both;}

    .page-btn{min-width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-2);font-size:13px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;}

    .page-btn:hover{border-color:var(--blue-border);color:var(--blue);background:var(--blue-pale);}

    .page-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 8px rgba(37,99,235,0.25);}

    [data-theme="dark"] .page-btn.active{box-shadow:0 2px 8px rgba(88,166,255,0.2);}

    .page-btn.disabled{opacity:.35;cursor:default;pointer-events:none;}

    .page-info{font-size:12px;color:var(--text-3);margin:0 8px;font-family:'Space Mono',monospace;}



    /* EMPTY STATE */

    .empty{text-align:center;padding:60px 20px;animation:fadeUp .5s ease .2s both;}

    .empty-icon{font-size:48px;margin-bottom:16px;opacity:.5;}

    .empty-title{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px;}

    .empty-desc{font-size:14px;color:var(--text-2);margin-bottom:20px;}

    .empty-btn{padding:12px 24px;border-radius:10px;background:var(--gradient);color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;}



    /* QUICK SEARCH */

    .quick-searches{margin-top:32px;animation:fadeUp .5s ease .25s both;}

    .quick-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:16px;}

    .quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}

    .quick-item{padding:14px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s;}

    .quick-item:hover{border-color:var(--blue-border);box-shadow:var(--shadow-h);}

    .quick-emoji{font-size:20px;margin-bottom:6px;}

    .quick-label{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;}

    .quick-desc{font-size:11px;color:var(--text-3);}



    footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--border);text-align:center;}

    footer p{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-3);letter-spacing:.08em;}

    .heart{color:var(--blue);}




    /* ===== @keyframes → styles.css ===== */




    @media(max-width:640px){

      .search-hero{padding:32px 24px;}

      .hero-title{font-size:28px;}

      .search-box{flex-direction:column;}

      .search-btn{width:100%;}

      .results-list{grid-template-columns:1fr;}

      .result-arrow{display:none;}

    }

    @media(max-width:900px) and (min-width:641px){

      .results-list{grid-template-columns:repeat(2,1fr);}

    }