:root{
      --bg:#0a0d12;
      --bg-2:#060709;
      --panel:rgba(16,20,33,.92);
      --panel-2:rgba(20,24,36,.88);
      --panel-3:rgba(18,24,38,.95);
      --panel-soft:rgba(255,255,255,.035);
      --text:#fff;
      --muted:#cfc8b7;
      --muted-2:rgba(244,231,199,.58);
      --gold:#f0c15b;
      --gold-2:rgba(240,193,91,.95);
      --gold-3:#9d6f22;
      --blue:#7fb3ff;
      --green:#7fe0aa;
      --line:rgba(212,175,55,.18);
      --line-strong:rgba(212,175,55,.32);
      --shadow:0 24px 70px rgba(0,0,0,.42);
      --content:1500px;
      --radius-xl:30px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:16px;
    }

    *{box-sizing:border-box}
    input,textarea,select,option,button,a{
      text-transform:none !important;
      letter-spacing:normal !important;
    }

    body{margin:0;background:#060709}

    .tg-guild-search{
      position:relative;
      min-height:100vh;
      font-family:"Inter",sans-serif;
      color:var(--text);
      background:
        radial-gradient(1100px 520px at 50% -6%, rgba(255,210,125,.14), transparent 60%),
        radial-gradient(760px 460px at 16% 18%, rgba(110,170,255,.10), transparent 58%),
        radial-gradient(820px 500px at 84% 70%, rgba(255,120,80,.08), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg-2));
      overflow-x:hidden;
      padding:110px 0 60px;
    }

    .tg-guild-search::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at center, transparent 0 65%, rgba(0,0,0,.14) 100%),
        linear-gradient(180deg, rgba(10,12,20,.06), rgba(10,12,20,.16));
      z-index:0;
    }

    .tg-guild-search a{color:inherit;text-decoration:none}
    .tg-guild-search .container{
      width:min(var(--content), calc(100% - 40px));
      margin:0 auto;
      position:relative;
      z-index:1;
    }

    .tg-guild-search .hero,
    .tg-guild-search .spotlight-shell,
    .tg-guild-search .state-box{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid rgba(212,175,55,.16);
      background:linear-gradient(180deg, rgba(16,20,33,.92), rgba(10,12,20,.88));
      box-shadow:var(--shadow);
      backdrop-filter:blur(8px);
    }

    .tg-guild-search .hero{padding:30px}

    .tg-guild-search .hero::before,
    .tg-guild-search .spotlight-shell::before,
    .tg-guild-search .state-box::before,
    .tg-guild-search .card::before,
    .tg-guild-search .spotlight-card::before{
      content:"";
      position:absolute;
      inset:-120px;
      pointer-events:none;
      opacity:.58;
      filter:blur(28px);
      background:
        radial-gradient(circle at 18% 20%, rgba(110,170,255,.10), transparent 40%),
        radial-gradient(circle at 82% 18%, rgba(255,210,125,.08), transparent 36%);
    }

    .tg-guild-search .hero-content,
    .tg-guild-search .spotlight-content,
    .tg-guild-search .card-inner,
    .tg-guild-search .state-box > *{
      position:relative;
      z-index:1;
    }

    .tg-guild-search .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
      color:rgba(240,193,91,.82);
      font-size:12px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.14em;
    }

    .tg-guild-search .eyebrow::before{
      content:"";
      width:34px;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(240,193,91,.72));
    }

    .tg-guild-search .hero-top{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      align-items:start;
    }

    .tg-guild-search .hero-title{
      margin:0;
      font-family:"Cinzel",serif;
      font-size:clamp(34px, 5vw, 56px);
      line-height:1.02;
      color:var(--gold);
      max-width:900px;
    }

    .tg-guild-search .hero-copy{
      margin:14px 0 0;
      max-width:900px;
      color:var(--muted);
      font-size:17px;
      line-height:1.72;
    }

    .tg-guild-search .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:18px 0 12px;
    }

    .tg-guild-search .hero-side{
      display:grid;
      gap:12px;
    }

    .tg-guild-search .hero-stat{
      padding:16px 18px;
      border-radius:20px;
      border:1px solid rgba(212,175,55,.14);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    }

    .tg-guild-search .hero-stat-label{
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(244,231,199,.58);
      font-weight:800;
    }

    .tg-guild-search .hero-stat-value{
      margin-top:8px;
      font-size:24px;
      font-weight:800;
      color:#fff;
    }

    .tg-guild-search .hero-stat-copy{
      margin-top:6px;
      font-size:13px;
      color:var(--muted);
      line-height:1.55;
    }

    .tg-guild-search .hero-guides{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }

    .tg-guild-search .guide{
      padding:14px 16px;
      border-radius:18px;
      border:1px solid rgba(212,175,55,.14);
      background:rgba(255,255,255,.03);
      transition:transform .18s ease,border-color .18s ease,background .18s ease;
    }

    .tg-guild-search .guide:hover{
      transform:translateY(-2px);
      border-color:rgba(240,193,91,.24);
      background:rgba(255,255,255,.045);
    }

    .tg-guild-search .guide-title{
      font-size:11px;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#f4e7c7;
    }

    .tg-guild-search .guide-text{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }

    .tg-guild-search .filters{
      margin-top:18px;
      display:grid;
      grid-template-columns:minmax(260px,1.8fr) repeat(6, minmax(138px,.9fr)) auto;
      gap:12px;
      align-items:stretch;
    }

    .tg-guild-search .field{
      position:relative;
    }

    .tg-guild-search .field-label{
      margin-bottom:7px;
      font-size:10px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(244,231,199,.5);
      font-weight:800;
    }

    .tg-guild-search .input,
    .tg-guild-search .select{
      width:100%;
      min-height:56px;
      padding:0 16px;
      border-radius:16px;
      border:1px solid rgba(212,175,55,.14);
      background:#fff;
      color:#111;
      font-size:15px;
      outline:none;
      transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
    }

    .tg-guild-search .input:focus,
    .tg-guild-search .select:focus{
      border-color:rgba(240,193,91,.42);
      box-shadow:0 0 0 3px rgba(240,193,91,.08);
    }

    .tg-guild-search #tgSearchInput::placeholder{color:rgba(17,17,17,.45);opacity:1}

    .tg-guild-search .select,
    .tg-guild-search select.select{
      color:#fff !important;
      -webkit-text-fill-color:#fff !important;
      opacity:1 !important;
      appearance:none;
      -webkit-appearance:none;
      background:
        linear-gradient(180deg, rgba(20,24,36,.94), rgba(10,12,20,.94)) !important;
    }

    .tg-guild-search .select option,
    .tg-guild-search .select option:checked{
      background:#101824 !important;
      color:#fff !important;
    }

    .tg-guild-search .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:56px;
      padding:0 20px;
      border-radius:16px;
      font-size:15px;
      font-weight:800;
      cursor:pointer;
      border:none;
      white-space:nowrap;
      transition:transform .18s ease,opacity .18s ease,color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
    }

    .tg-guild-search .btn:hover,
    .tg-guild-search .btn:focus-visible{
      transform:translateY(-1px);
      color:#fff;
      text-decoration:none;
      box-shadow:0 12px 30px rgba(0,0,0,.24);
    }

    .tg-guild-search .btn-primary{
      color:#201407;
      border:1px solid rgba(212,175,55,.95);
      background:linear-gradient(180deg, #f0c15b, #9d6f22);
      box-shadow:inset 0 1px 0 rgba(255,243,211,.40),0 12px 30px rgba(208,149,39,.16);
    }

    .tg-guild-search .btn-primary:hover,
    .tg-guild-search .btn-primary:focus-visible{
      color:#2a1908;
    }

    .tg-guild-search .btn-secondary{
      color:#f4e7c7;
      border:1px solid rgba(212,175,55,.22);
      background:linear-gradient(180deg, rgba(20,24,36,.94), rgba(10,12,20,.94));
    }

    .tg-guild-search .btn-secondary:hover,
    .tg-guild-search .btn-secondary:focus-visible{
      color:#fff3d3;
    }

    .tg-guild-search .results-top{
      margin-top:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .tg-guild-search .results-title,
    .tg-guild-search .spotlight-title{
      font-family:"Cinzel",serif;
      font-size:28px;
      color:#fff;
      margin:0;
    }

    .tg-guild-search .results-sub,
    .tg-guild-search .spotlight-sub{
      color:var(--muted-2);
      font-size:14px;
      line-height:1.6;
      margin-top:6px;
    }

    .tg-guild-search .results-meta{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .tg-guild-search .results-count,
    .tg-guild-search .results-chip{
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(212,175,55,.18);
      background:rgba(0,0,0,.18);
      color:#f4e7c7;
      font-size:13px;
      font-weight:700;
    }

    .tg-guild-search .results-chip{color:#dbe8ff;border-color:rgba(110,170,255,.24)}

    .tg-guild-search .spotlight-shell{
      margin-top:18px;
      padding:22px;
      border-color:rgba(212,175,55,.30);
      background:
        radial-gradient(circle at 85% 12%, rgba(255,220,140,.12), transparent 36%),
        linear-gradient(180deg, rgba(22,28,45,.96), rgba(8,12,20,.96));
    }

    .tg-guild-search .spotlight-grid,
    .tg-guild-search .cards{
      margin-top:16px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }

    .tg-guild-search .spotlight-card,
    .tg-guild-search .card{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(212,175,55,.16);
      background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(8,12,20,.95));
      box-shadow:var(--shadow);
      display:flex;
      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
    }

    .tg-guild-search .spotlight-card:hover,
    .tg-guild-search .card:hover{
      transform:translateY(-3px);
      border-color:rgba(240,193,91,.32);
      box-shadow:0 28px 75px rgba(0,0,0,.48);
    }

    .tg-guild-search .spotlight-card{
      border-color:rgba(240,193,91,.38);
      background:
        radial-gradient(circle at 85% 10%, rgba(255,220,140,.15), transparent 34%),
        linear-gradient(180deg, rgba(26,32,49,.98), rgba(10,14,22,.98));
      box-shadow:
        0 24px 70px rgba(0,0,0,.42),
        0 0 0 1px rgba(240,193,91,.12) inset,
        0 0 28px rgba(240,193,91,.10);
    }

    .tg-guild-search .spotlight-card::after{
      content:"";
      position:absolute;
      inset:-20%;
      background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.04) 42%, transparent 54%);
      transform:translateX(-120%);
      animation:tgGuildShine 5.5s linear infinite;
      pointer-events:none;
    }

    @keyframes tgGuildShine{
      0%{transform:translateX(-120%)}
      100%{transform:translateX(120%)}
    }

    .tg-guild-search .card-inner{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
      width:100%;
      min-height:100%;
    }

    .tg-guild-search .card-top,
    .tg-guild-search .spotlight-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    .tg-guild-search .card-title,
    .tg-guild-search .spotlight-name{
      margin:0;
      font-size:20px;
      font-weight:800;
      color:#fff;
      line-height:1.15;
    }

    .tg-guild-search .pill,
    .tg-guild-search .meta,
    .tg-guild-search .chip,
    .tg-guild-search .spotlight-shiny{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 13px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }

    .tg-guild-search .pill{
      border:1px solid rgba(212,175,55,.22);
      background:rgba(240,193,91,.10);
      color:#f4e7c7;
    }

    .tg-guild-search .pill--pro{
      background:rgba(110,170,255,.16);
      border-color:rgba(110,170,255,.34);
      color:#dce7ff;
    }

    .tg-guild-search .meta-row,
    .tg-guild-search .chips,
    .tg-guild-search .card-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .tg-guild-search .meta{
      min-height:32px;
      padding:0 12px;
      border:1px solid rgba(212,175,55,.12);
      background:rgba(255,255,255,.03);
      color:#fff;
      font-size:12px;
      font-weight:700;
    }

    .tg-guild-search .desc,
    .tg-guild-search .spotlight-desc{
      color:#d8d2c4;
      font-size:13px;
      line-height:1.65;
      min-height:66px;
    }

    .tg-guild-search .spotlight-desc{color:#efe7d1}

    .tg-guild-search .split{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      align-items:stretch;
    }

    .tg-guild-search .mini-panel{
      border:1px solid rgba(212,175,55,.12);
      background:rgba(255,255,255,.03);
      border-radius:16px;
      padding:12px;
      min-height:156px;
      display:flex;
      flex-direction:column;
    }

    .tg-guild-search .mini-title{
      margin:0 0 8px;
      color:rgba(240,193,91,.84);
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.14em;
    }

    .tg-guild-search .mini-list{
      margin:0;
      padding-left:18px;
      display:grid;
      gap:6px;
      color:#fff;
      font-size:12px;
      line-height:1.5;
    }

    .tg-guild-search .chip{
      min-height:30px;
      padding:0 11px;
      border:1px solid rgba(212,175,55,.16);
      background:rgba(255,255,255,.04);
      color:#f4e7c7;
      font-size:11px;
      font-weight:700;
    }

    .tg-guild-search .chip--class{background:rgba(255,255,255,.03)}
    .tg-guild-search .card-actions{margin-top:auto;padding-top:2px}

    .tg-guild-search .state-box{
      margin-top:18px;
      padding:22px;
      color:#fff;
    }

    .tg-guild-search .state-box h2{
      margin:0 0 10px;
      font-family:"Cinzel",serif;
      color:#fff;
      font-size:28px;
    }

    .tg-guild-search .state-box p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
    }

    @media (max-width: 1380px){
      .tg-guild-search .cards,
      .tg-guild-search .spotlight-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    }

    @media (max-width: 1240px){
      .tg-guild-search .hero-top{grid-template-columns:1fr}
      .tg-guild-search .filters{grid-template-columns:1fr 1fr 1fr}
    }

    @media (max-width: 920px){
      .tg-guild-search .cards,
      .tg-guild-search .filters,
      .tg-guild-search .split,
      .tg-guild-search .hero-guides,
      .tg-guild-search .spotlight-grid{grid-template-columns:1fr}
    }

    @media (max-width: 640px){
      .tg-guild-search .container{width:min(var(--content), calc(100% - 24px))}
      .tg-guild-search .hero,
      .tg-guild-search .spotlight-shell,
      .tg-guild-search .state-box{border-radius:24px}
      .tg-guild-search .hero{padding:22px 18px}
      .tg-guild-search .card,
      .tg-guild-search .spotlight-card{border-radius:22px}
      .tg-guild-search .btn,
      .tg-guild-search .card-actions .btn{width:100%}
    }