 



















  :root{
    --bg:#fbf7f8; --text:#2b2326; --muted:#9a8f94;
    --accent:#ff5c7a; --green:#16a34a; --amber:#d97706;
     




    --accent-2:#ff8a9b;                                     
    --accent-shadow:rgba(255,92,122,.32);                   
    --brand-grad:linear-gradient(120deg,#ff5c7a,#ff8a9b);   
    --top-bg:var(--brand-grad);                             
    --accent-deep:#d6335a;                                  
    --accent-deep-hover:#c02a4e;                            
    --accent-tint:#fff2f6;                                  
    --accent-deep-shadow:rgba(120,20,50,.22);               
     
    --card:rgba(255,255,255,.42);         
    --card-strong:rgba(255,255,255,.70);  
    --line:#f0e4e8;                       
    --glass-line:rgba(255,255,255,.62);   
    --glass-blur:blur(20px) saturate(180%);
    --glass-shadow:0 10px 30px rgba(214,130,160,.16), inset 0 1px 0 rgba(255,255,255,.6);
    --glass-shadow-lg:0 20px 60px rgba(180,90,125,.26), inset 0 1px 0 rgba(255,255,255,.6);
     


    --card-sheen:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 62%,rgba(120,60,95,.05) 100%);
    --card-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.015'/></svg>");
    --card-shadow:0 6px 18px rgba(214,130,160,.10), inset 0 1px 0 rgba(255,255,255,.6);
    --card-shade:inset 0 -12px 20px -20px rgba(120,60,95,.20);
    --card-hover-shadow:0 14px 30px rgba(198,108,142,.18), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(255,255,255,.28);
    --card-hover-line:rgba(255,255,255,.9);
    --card-lift:1px;
     
    --glow-x:50%; --glow-y:0px; --glow-r:320px; --glow-o:0; --glow-c:rgba(255,205,225,1);    
    --soft:rgba(255,92,122,.10);    
    --soft2:rgba(255,92,122,.06);   
     


    --soft-link:rgba(255,92,122,.08);    
    --soft-row:rgba(255,92,122,.05);     
    --accent-ring:rgba(255,92,122,.25);  
    --accent-hover:#e0405c;              
    --btn-text:#8a4b57;        
    --btn-dis:#c3b3ba;         
    --tabs-bg:rgba(255,255,255,.55); --tabs-text:#8a4b57;
    --err-bg:rgba(220,38,38,.10); --err-text:#dc2626;
    --scroll:#e5bcc7; --scroll-hover:#d9a3b2;
    --donut-outer:#0c121c; --donut-inner:#fdf8fa;   
    --tooltip-bg:#1f2937; --tooltip-text:#fff;
    --link-hover:#e04462;
    --grid:#eae6ea;           
    --modal-mask:rgba(48,22,32,.40);
     






    --bgfx-band-1:255,146,194; --bgfx-band-2:255,178,214; --bgfx-band-3:196,186,255;
    --bgfx-band-4:150,178,255; --bgfx-band-5:122,156,255;
    --bgfx-corner-1:255,116,172; --bgfx-corner-2:114,152,255; --bgfx-corner-4:255,110,196;
    --bgfx-mid:206,180,255;
    --bgfx-spot-1:116,154,255; --bgfx-spot-2:255,108,174; --bgfx-spot-3:112,150,255;
    --bgfx-spot-4:255,102,176; --bgfx-spot-5:206,180,255; --bgfx-spot-6:255,110,178;
  }
  html.dark{
    --bg:#12141c; --text:#f0f2f8; --muted:#a6afc1;
    --accent:#ff6b88; --green:#2ed07a; --amber:#e0a238;
     



    --top-bg:linear-gradient(120deg,#5a2531,#7a3a46);
     
    --card:rgba(36,40,53,.44);
    --card-strong:rgba(30,34,45,.72);
    --line:#2c303c;
    --glass-line:rgba(255,255,255,.10);
     


    --accent-ring:rgba(255,107,136,.25);
    --glass-blur:blur(20px) saturate(160%);
    --glass-shadow:0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
    --glass-shadow-lg:0 20px 60px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
     

     

    --card-sheen:none;
    --card-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.018'/></svg>");
    --card-shadow:0 8px 22px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
    --card-shade:inset 0 -16px 26px -22px rgba(0,0,0,.55);
    --card-hover-shadow:0 16px 36px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.05);
    --card-hover-line:rgba(255,255,255,.24);
    --glow-c:rgba(255,120,155,.70);    

    --glow-r:240px;                    
    --soft:rgba(255,255,255,.08); --soft2:rgba(255,255,255,.05);
    --btn-text:#d5dae6; --btn-dis:#5a6171;
    --tabs-bg:rgba(35,39,51,.55); --tabs-text:#d5dae6;
    --err-bg:rgba(255,80,80,.14); --err-text:#ff8f8f;
    --scroll:#3a3f4d; --scroll-hover:#4a5060;
    --donut-outer:#0a0c12; --donut-inner:#22252f;
    --tooltip-bg:#e8eaf0; --tooltip-text:#1d2029;
    --link-hover:#ff8ca0;
    --grid:#2c303c;
    --modal-mask:rgba(0,0,0,.58);
     

    --bgfx-dcorner-1:255,92,122; --bgfx-dcorner-2:130,95,255; --bgfx-dcorner-3:56,120,255;
    --bgfx-dcorner-4:255,110,190; --bgfx-dcorner-5:150,90,255;
    --bgfx-dspot-1:255,92,122; --bgfx-dspot-2:120,110,255; --bgfx-dspot-3:80,140,255;
    --bgfx-dspot-4:255,110,190;
  }

   

  html.dark .themeBtn{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.18)}
  html.dark .themeBtn:hover{background:rgba(0,0,0,.4)}
  html.dark .top .rbtn{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.18)}
  html.dark .top .rbtn:hover{background:rgba(0,0,0,.34)}
  html.dark .top .rbtn:disabled{background:rgba(0,0,0,.12);color:rgba(255,255,255,.45);border-color:rgba(255,255,255,.12)}
  html.dark .badge{background:rgba(0,0,0,.22);color:#e8eaf0}
  *{box-sizing:border-box}
  html{background:var(--bg)}
   

















  .bgfx,.bgfx2{position:fixed;inset:-12%;z-index:-1;pointer-events:none;will-change:transform}
  @supports (width:max(1px,2px)){ .bgfx,.bgfx2{inset:calc(-1 * max(12%,60px))} }
  .bgfx{
     

    background:
      linear-gradient(105deg, rgba(var(--bgfx-band-1),.24) 0%, rgba(var(--bgfx-band-2),.20) 26%, rgba(var(--bgfx-band-3),.17) 46%, rgba(var(--bgfx-band-4),.21) 70%, rgba(var(--bgfx-band-5),.23) 100%),
      radial-gradient(44% 38% at 14.5% 9.7%, rgba(var(--bgfx-corner-1),.28) 0%, rgba(var(--bgfx-corner-1),0) 62%),
      radial-gradient(42% 36% at 90.3% 12.9%, rgba(var(--bgfx-corner-2),.27) 0%, rgba(var(--bgfx-corner-2),0) 60%),
      radial-gradient(46% 40% at 85.5% 88.7%, rgba(var(--bgfx-corner-2),.27) 0%, rgba(var(--bgfx-corner-2),0) 60%),
      radial-gradient(44% 38% at 11.3% 85.5%, rgba(var(--bgfx-corner-4),.27) 0%, rgba(var(--bgfx-corner-4),0) 60%),
      radial-gradient(64% 56% at 50% 46%, rgba(var(--bgfx-mid),.17) 0%, rgba(var(--bgfx-mid),0) 68%),
      var(--bg)}
  html.dark .bgfx{
    background:
      radial-gradient(41.9% 37.1% at 14.5% 9.7%, rgba(var(--bgfx-dcorner-1),.34) 0%, rgba(var(--bgfx-dcorner-1),0) 72%),
      radial-gradient(40.3% 35.5% at 90.3% 12.9%, rgba(var(--bgfx-dcorner-2),.30) 0%, rgba(var(--bgfx-dcorner-2),0) 70%),
      radial-gradient(46.8% 38.7% at 85.5% 88.7%, rgba(var(--bgfx-dcorner-3),.32) 0%, rgba(var(--bgfx-dcorner-3),0) 70%),
      radial-gradient(43.5% 37.1% at 11.3% 85.5%, rgba(var(--bgfx-dcorner-4),.26) 0%, rgba(var(--bgfx-dcorner-4),0) 70%),
      radial-gradient(62.9% 54.8% at 50% 45.2%, rgba(var(--bgfx-dcorner-5),.18) 0%, rgba(var(--bgfx-dcorner-5),0) 72%),
      var(--bg)}
   





  .bgfx2{
    background:
      radial-gradient(circle closest-side, rgba(255,255,255,.77) 0%, rgba(255,255,255,.31) 32%, rgba(255,255,255,0) 100%) 16% 28%/520px 520px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-spot-1),.53) 0%, rgba(var(--bgfx-spot-1),.24) 32%, rgba(var(--bgfx-spot-1),0) 100%) 78% 26%/460px 460px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-spot-2),.54) 0%, rgba(var(--bgfx-spot-2),.25) 32%, rgba(var(--bgfx-spot-2),0) 100%) 32% 68%/480px 480px no-repeat,
      radial-gradient(circle closest-side, rgba(255,255,255,.66) 0%, rgba(255,255,255,.25) 32%, rgba(255,255,255,0) 100%) 68% 78%/500px 500px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-spot-3),.49) 0%, rgba(var(--bgfx-spot-3),.23) 32%, rgba(var(--bgfx-spot-3),0) 100%) 94% 54%/420px 420px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-spot-4),.53) 0%, rgba(var(--bgfx-spot-4),.24) 32%, rgba(var(--bgfx-spot-4),0) 100%) 10% 74%/440px 440px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-spot-5),.39) 0%, rgba(var(--bgfx-spot-5),.16) 32%, rgba(var(--bgfx-spot-5),0) 100%) 46% 44%/560px 560px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-spot-6),.49) 0%, rgba(var(--bgfx-spot-6),.23) 32%, rgba(var(--bgfx-spot-6),0) 100%) 56% 14%/400px 400px no-repeat}
  html.dark .bgfx2{
    background:
      radial-gradient(circle closest-side, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 100%) 16.9% 20.8%/150px 150px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-dspot-1),.24) 0%, rgba(var(--bgfx-dspot-1),0) 100%) 77.6% 26.2%/220px 220px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-dspot-2),.24) 0%, rgba(var(--bgfx-dspot-2),0) 100%) 29% 74.8%/190px 190px no-repeat,
      radial-gradient(circle closest-side, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 100%) 62.6% 82.3%/130px 130px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-dspot-3),.20) 0%, rgba(var(--bgfx-dspot-3),0) 100%) 85.6% 66.1%/170px 170px no-repeat,
      radial-gradient(circle closest-side, rgba(var(--bgfx-dspot-4),.22) 0%, rgba(var(--bgfx-dspot-4),0) 100%) 42.7% 11.5%/140px 140px no-repeat}
   
  @media (prefers-reduced-motion:reduce){ .bgfx,.bgfx2{transform:none!important} }
   
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:transparent;color:var(--text);transition:color .2s}
  .top{background:var(--top-bg);color:#fff;padding:22px 20px;position:relative}
  .title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
  .top h1{font-size:20px;margin:0}
   








  .title-row .glogo{width:36px;height:36px;border-radius:10px;object-fit:contain;flex:none}
   



   








   






  .title-row .glogo-lg{width:360px;height:120px;border-radius:22px}
  @media (max-width:560px){ .title-row .glogo-lg{width:100%;height:96px;border-radius:16px} }
   




  .title-row.glogo-center{justify-content:center;text-align:center;gap:20px}
   



















   


  .title-row.glogo-hero{justify-content:center}
   







  .title-row.glogo-hero .glogo{width:132px;height:44px;border-radius:10px}
   



  .gtop{padding:10px 20px 12px}
   







  .top .meta{font-size:13px;opacity:.92;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
  .badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.25)}
   
  .themeBtn{position:absolute;top:12px;right:14px;width:38px;height:38px;font-size:18px;line-height:1;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(255,255,255,.22);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
  .themeBtn:hover{background:rgba(255,255,255,.34);transform:rotate(15deg)}
  .top .rbtn{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:#fff;font-weight:600}
  .top .rbtn:hover{background:rgba(255,255,255,.32)}
  .top .rbtn:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.2)}
  .tabs{display:flex;gap:10px;margin:16px 0}
  .tabs button{flex:1;font-size:15px;padding:12px 0;border:1px solid var(--glass-line);border-radius:12px;background:var(--tabs-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);color:var(--tabs-text);font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s}
  .tabs button:hover{background:var(--soft)}
  .tabs button.on{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px var(--accent-shadow)}
   

   

   
  .card{position:relative;background-color:var(--card);background-image:var(--card-sheen),var(--card-noise);background-repeat:no-repeat,repeat;background-size:100% 100%,140px 140px;border:1px solid var(--glass-line);border-radius:18px;padding:18px;margin-bottom:16px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--card-shadow),var(--card-shade);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
   

  .card:hover{transform:translateY(calc(-1 * var(--card-lift)));box-shadow:var(--card-hover-shadow),var(--card-shade);border-color:var(--card-hover-line)}
  body.sorting .card:hover{transform:none;box-shadow:var(--card-shadow),var(--card-shade);border-color:var(--glass-line)}
   







  @supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
    .card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
      background:radial-gradient(circle var(--glow-r) at var(--glow-x) var(--glow-y),var(--glow-c) 0%,rgba(255,255,255,0) 70%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
      opacity:var(--glow-o);transition:opacity .25s ease}
  }
  @media (hover:none){ .card::before{display:none} } 
  @media (prefers-reduced-motion:reduce){ .card::before{transition:none} }
  @media (prefers-reduced-motion:reduce){ .card{transition:none} .card:hover{transform:none} }
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
  th{color:var(--muted);font-weight:600;font-size:12px}
  .muted{color:var(--muted);font-size:13px}
  .errbox{background:var(--err-bg);color:var(--err-text);border-radius:12px;padding:16px;text-align:center;font-size:14px}
   
   

  .modal-mask{display:none;position:fixed;inset:0;background:var(--modal-mask);z-index:100;align-items:center;justify-content:center;padding:16px}
  @keyframes glassIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
   
  .modal-box{background:var(--card-strong);border:1px solid var(--glass-line);border-radius:18px;padding:18px;width:100%;max-width:640px;max-height:80vh;display:flex;flex-direction:column;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow-lg);animation:glassIn .18s ease-out}
  .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .modal-head b{font-size:15px}
  .pill{background:var(--soft);color:var(--accent);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}
  .rbtn{font-size:12px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--btn-text);cursor:pointer;transition:background .15s,color .15s}
  .rbtn:hover{background:var(--soft)}
  .rbtn:disabled{color:var(--btn-dis);background:var(--soft2);border-color:var(--line);cursor:not-allowed;opacity:.7}
  .rbtn:disabled:hover{background:var(--soft2)}
  .line-tt{position:absolute;background:var(--tooltip-bg);color:var(--tooltip-text);padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.5;pointer-events:none;display:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:5}
   


  .card.tt-open{position:relative;z-index:30}
  .bctrl{display:flex;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
  .bctrl button{font-size:12px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--btn-text);cursor:pointer}
  .bctrl button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .mini-hint{font-size:12.5px;color:var(--muted);margin:0 0 12px;padding:8px 12px;background:var(--soft);border-radius:10px;text-align:center}
  .mini-footer{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;padding:10px 2px 4px;border-top:1px solid var(--line);background:var(--card-strong)}
