
:root{
  --bg:#07111f;--panel:rgba(255,255,255,.08);--panel2:rgba(255,255,255,.12);--text:#eef7ff;--muted:#9fb1c7;
  --line:rgba(255,255,255,.16);--yellow:#ffd100;--orange:#ff7a00;--blue:#21b7e7;--cyan:#57d8ff;--black:#07111f;
  --shadow:0 24px 70px rgba(0,0,0,.35);--radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:
 radial-gradient(circle at 15% 0%,rgba(255,209,0,.23),transparent 32%),
 radial-gradient(circle at 78% 8%,rgba(33,183,231,.24),transparent 30%),
 radial-gradient(circle at 45% 110%,rgba(255,122,0,.22),transparent 35%),var(--bg);color:var(--text)}
button,input,select{font:inherit}
.app{max-width:1440px;margin:auto;padding:22px}
.hero{position:sticky;top:0;z-index:20;margin:-22px -22px 18px;padding:20px 22px 16px;background:linear-gradient(180deg,rgba(7,17,31,.96),rgba(7,17,31,.76));backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.heroInner{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;max-width:1440px;margin:auto}
.logoBox{width:74px;height:74px;border-radius:22px;background:#fff;display:grid;place-items:center;box-shadow:0 16px 36px rgba(0,0,0,.28);overflow:hidden;flex:none}
.logoBox img{width:70px;height:70px;object-fit:contain}
h1{font-size:clamp(24px,3vw,42px);line-height:1;margin:0 0 7px;font-weight:950;letter-spacing:-.04em}
.sub{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.badge{display:inline-flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:999px;color:#fff;font-size:13px;white-space:nowrap}
.badge b{color:var(--yellow)}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.searchPanel{overflow:visible;position:relative;z-index:35}
.toolbar{padding:16px;display:grid;gap:12px}
.searchRow{display:grid;grid-template-columns:minmax(250px,1fr) 150px 210px 150px auto;gap:10px;align-items:center}
.inputWrap{position:relative}
.inputWrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.7}
.search{width:100%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:#fff;border-radius:18px;padding:15px 16px 15px 46px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.search:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(33,183,231,.14)}
select{width:100%;border:1px solid rgba(255,255,255,.22);background:#102033;color:#fff;border-radius:18px;padding:14px 13px;outline:none;color-scheme:dark;min-width:0}
select option{background:#102033;color:#fff}
.customSelect{position:relative;min-width:0;width:100%}
.selectBtn{width:100%;border:1px solid rgba(255,255,255,.22);background:#102033;color:#fff;border-radius:18px;padding:14px 42px 14px 13px;outline:none;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative}
.selectBtn:after{content:"⌄";position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:.78;font-weight:900}
.customSelect.open .selectBtn{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(33,183,231,.14)}
.customSelect.open .selectBtn:after{transform:translateY(-50%) rotate(180deg)}
.selectMenu{display:none;position:absolute;top:calc(100% + 8px);left:0;width:min(560px,86vw);max-height:330px;overflow:auto;background:#102033;border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 22px 55px rgba(0,0,0,.45);z-index:80;padding:6px}
.customSelect.open .selectMenu{display:block}
.selectOption{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;border-radius:12px;padding:11px 12px;cursor:pointer;line-height:1.3}
.selectOption:hover,.selectOption.active{background:rgba(255,255,255,.12)}
.selectOption.active{color:var(--yellow);font-weight:900}
.btn{border:0;border-radius:17px;padding:14px 15px;cursor:pointer;font-weight:800;color:#07111f;background:linear-gradient(135deg,var(--yellow),var(--orange));box-shadow:0 12px 30px rgba(255,122,0,.18);white-space:nowrap}
.btn.secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none}
.btn:active{transform:translateY(1px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.stat{padding:16px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.08)}
.stat .num{font-size:27px;font-weight:950;letter-spacing:-.03em}
.stat .lab{font-size:12px;color:var(--muted);margin-top:4px}
.chips{display:flex;gap:10px;overflow:auto;padding:3px 2px 10px;scrollbar-width:thin;cursor:grab;user-select:none;touch-action:pan-x}
.chip{display:flex;gap:9px;align-items:center;min-width:max-content;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:10px 13px;cursor:pointer;font-size:13px;font-weight:800;user-select:none}.chips.dragging{cursor:grabbing}.chips.dragging .chip{cursor:grabbing}.btn[hidden]{display:none!important}
.chip.active{background:linear-gradient(135deg,rgba(255,209,0,.96),rgba(33,183,231,.96));color:#07111f;border-color:transparent}.chip.favoriteChip{border-color:rgba(255,209,0,.55)}
.chip span{opacity:.78;font-weight:900}
.tableTop{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(0,0,0,.16)}
.resultInfo{color:var(--muted);font-size:13px}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pager button{border:1px solid var(--line);background:rgba(255,255,255,.09);color:#fff;border-radius:13px;padding:8px 11px;cursor:pointer}
.pager button:disabled{opacity:.38;cursor:not-allowed}
.tableWrap{overflow:auto;max-height:calc(100vh - 290px);min-height:360px;background:rgba(255,255,255,.035)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1250px}
th,td{border-bottom:1px solid rgba(255,255,255,.1);padding:12px 12px;text-align:left;vertical-align:top;font-size:13px;line-height:1.35}
th{position:sticky;top:0;z-index:1;background:#102033;color:#dcecff;font-size:12px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
tbody tr:hover{background:rgba(255,255,255,.075)}
td.small{color:#b7c6d8;white-space:nowrap}.favCell{width:82px;white-space:nowrap}.favBtn{border:1px solid rgba(255,209,0,.5);background:rgba(255,209,0,.12);color:var(--yellow);border-radius:999px;padding:7px 10px;cursor:pointer;font-weight:900;min-width:60px}.favBtn.saved{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#07111f;border-color:transparent}.favBtn:active{transform:translateY(1px)}
.kat{font-weight:850;color:#fff;min-width:210px}
.uni{font-weight:850;color:#fff}
.prog{color:#e8f7ff}
mark{background:rgba(255,209,0,.95);color:#07111f;border-radius:6px;padding:1px 3px}
.empty{padding:70px 22px;text-align:center;color:var(--muted)}
.note{color:var(--muted);font-size:12px;line-height:1.55;margin:14px 4px 0}
.toast{position:fixed;right:18px;bottom:18px;z-index:50;background:#102033;border:1px solid var(--line);box-shadow:var(--shadow);padding:13px 16px;border-radius:16px;display:none;color:#fff}
@media(max-width:1050px){.heroInner{grid-template-columns:auto 1fr}.badge{grid-column:1/-1;width:max-content}.searchRow{grid-template-columns:1fr 1fr}.inputWrap{grid-column:1/-1}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.app{padding:14px}.hero{margin:-14px -14px 14px;padding:15px 14px}.logoBox{width:58px;height:58px;border-radius:17px}.logoBox img{width:55px;height:55px}.searchRow{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:12px;border-radius:17px}.stat .num{font-size:22px}.tableWrap{max-height:64vh}}

.tcf-root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.tcf-root *{box-sizing:border-box}.tcf-root .searchPanel,.tcf-root #chips{display:none!important}.tcf-root .filter-row th{padding:8px 7px;background:#142033;position:sticky;top:0;z-index:6}.tcf-root .header-row th{top:54px;z-index:5}.tcf-root .col-filter{width:100%;min-width:130px;border:1px solid rgba(255,255,255,.18);background:#0e1727;color:#eef6ff;border-radius:9px;padding:9px 10px;font-size:13px;outline:none}.tcf-root .col-filter:focus{border-color:#58c7ee;box-shadow:0 0 0 3px rgba(88,199,238,.14)}.tcf-root .fav-filter-cell{text-align:center;color:#91a0b5;font-size:12px}.tcf-root .quickActions{display:flex;gap:8px;align-items:center}.tcf-root .resetBtn,.tcf-root .favOnlyBtn{background:#1e3148;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:9px 14px;cursor:pointer}.tcf-root .favOnlyBtn.active{background:linear-gradient(135deg,#ffd100,#21b7e7);color:#07111f}.tcf-root .tableTop{gap:12px;flex-wrap:wrap}@media(max-width:900px){.tcf-root .filter-row th,.tcf-root .header-row th{position:static}.tcf-root .col-filter{min-width:145px}}

/* v2.0.1: logo, compact total badge, and visible favorite state */
.tcf-root .heroInner{grid-template-columns:auto minmax(0,1fr) auto}
.tcf-root .heroTitle{min-width:0}
.tcf-root .badge{justify-self:end;width:auto;min-width:150px;max-width:max-content;padding:10px 16px}
.tcf-root .filter-row .fav-filter-cell{color:transparent;font-size:0}
.tcf-root .star{width:44px;height:40px;display:inline-grid;place-items:center;border:1px solid rgba(237,72,118,.72);border-radius:4px;background:rgba(237,72,118,.04);color:#ed4876;font-size:19px;line-height:1;cursor:pointer;transition:.16s ease}
.tcf-root .star:hover{background:rgba(237,72,118,.13);transform:translateY(-1px)}
.tcf-root .star.on{background:#ed4876;color:#fff;border-color:#ed4876;box-shadow:0 0 0 3px rgba(237,72,118,.15)}
.tcf-root .star.on::after{content:"";position:absolute}
@media(max-width:1050px){.tcf-root .heroInner{grid-template-columns:auto minmax(0,1fr) auto}.tcf-root .badge{grid-column:auto;width:auto}}
@media(max-width:720px){.tcf-root .heroInner{grid-template-columns:auto 1fr}.tcf-root .badge{grid-column:1/-1;justify-self:start}.tcf-root .logoBox{width:58px;height:58px}.tcf-root .logoBox img{width:55px;height:55px}}


/* v2.0.2: separated actions, CSV export, 20-row favorites, refined favorite motion */
.tcf-root .actionBar{display:flex;justify-content:flex-start;align-items:center;padding:14px 16px 4px;background:rgba(0,0,0,.10)}
.tcf-root .quickActions{justify-content:flex-start}
.tcf-root .tableTop{padding-top:12px}
.tcf-root .favOnlyBtn,.tcf-root .resetBtn,.tcf-root .exportBtn{min-height:42px;border-radius:13px;padding:10px 16px;font-weight:800;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease}
.tcf-root .favOnlyBtn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none}
.tcf-root .favOnlyBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.tcf-root .favOnlyBtn.active{background:linear-gradient(135deg,#ffd65a,#51c9ee);color:#08121f;border-color:transparent;box-shadow:0 10px 26px rgba(67,190,226,.20)}
.tcf-root .favIcon{display:inline-grid;place-items:center;width:20px;height:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tcf-root .favOnlyBtn:active .favIcon{transform:scale(.78) rotate(-12deg)}
.tcf-root .resetBtn:hover,.tcf-root .exportBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.15)}
.tcf-root .exportBtn{border:1px solid rgba(87,216,255,.36)!important;background:rgba(33,183,231,.12)!important;color:#eafaff!important}
.tcf-root .favPageSize{display:inline-flex;align-items:center;min-height:38px;padding:8px 11px;border:1px solid var(--line);border-radius:12px;background:#102033;color:#fff;font-size:13px;font-weight:800}
.tcf-root .favPageSize[hidden]{display:none!important}
.tcf-root .star{position:relative;width:42px;height:42px;border-radius:12px;background:rgba(237,72,118,.06);overflow:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1),background .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease}
.tcf-root .star span{display:block;transition:transform .3s cubic-bezier(.18,.89,.32,1.28)}
.tcf-root .star:hover{transform:translateY(-2px) scale(1.03);background:rgba(237,72,118,.13)}
.tcf-root .star.on{background:linear-gradient(145deg,#f05b86,#d93668);border-color:#f26a91;box-shadow:0 8px 20px rgba(217,54,104,.28),inset 0 1px 0 rgba(255,255,255,.28)}
.tcf-root .star.on span{transform:scale(1.08)}
.tcf-root .star.animating span{animation:tcfFavPop .36s cubic-bezier(.18,.89,.32,1.35)}
.tcf-root .star.animating:after{content:"";position:absolute;inset:-7px;border:2px solid rgba(240,91,134,.52);border-radius:16px;animation:tcfFavRing .4s ease-out forwards;pointer-events:none}
@keyframes tcfFavPop{0%{transform:scale(1)}45%{transform:scale(.62) rotate(-15deg)}100%{transform:scale(1.08) rotate(0)}}
@keyframes tcfFavRing{0%{opacity:.8;transform:scale(.72)}100%{opacity:0;transform:scale(1.18)}}
@media(max-width:720px){.tcf-root .actionBar{padding:12px 12px 4px}.tcf-root .tableTop{align-items:flex-start}.tcf-root .pager{width:100%}.tcf-root .exportBtn{order:-1}}


/* v2.0.3: precision-aligned action and favorite controls */
.tcf-root .actionBar{
  min-height:76px;
  padding:16px 24px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(7,14,24,.10);
}
.tcf-root .quickActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
}
.tcf-root .favOnlyBtn,
.tcf-root .resetBtn{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0 20px;
  border-radius:14px;
  line-height:1;
  letter-spacing:0;
  vertical-align:middle;
  white-space:nowrap;
  cursor:pointer;
  transform:translateZ(0);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.tcf-root .favOnlyBtn{
  min-width:164px;
  gap:10px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
  color:#f5f8ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.12);
}
.tcf-root .favOnlyBtn .favIcon{
  display:grid;
  place-items:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  font-size:20px;
  line-height:1;
  transform-origin:50% 52%;
}
.tcf-root .favOnlyBtn .favLabel{display:block;line-height:1;font-weight:850}
.tcf-root .favOnlyBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.30);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.18);
}
.tcf-root .favOnlyBtn.active{
  border-color:rgba(255,255,255,.28);
  background:linear-gradient(135deg,#ffe16a 0%,#b9dfb4 48%,#59c7e9 100%);
  color:#0a1524;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 10px 25px rgba(46,183,224,.20);
}
.tcf-root .favOnlyBtn.active:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 13px 30px rgba(46,183,224,.27)}
.tcf-root .favOnlyBtn:active,
.tcf-root .resetBtn:active{transform:translateY(0) scale(.975)}
.tcf-root .favOnlyBtn:focus-visible,
.tcf-root .resetBtn:focus-visible,
.tcf-root .star:focus-visible{outline:3px solid rgba(88,199,238,.38);outline-offset:3px}
.tcf-root .resetBtn{
  min-width:112px;
  border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(180deg,#253a56,#1c2e47);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.12);
}
.tcf-root .resetBtn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.30);
  background:linear-gradient(180deg,#2c4362,#20344f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.18);
}
.tcf-root table th:first-child,
.tcf-root table td:first-child{width:92px;min-width:92px;text-align:center}
.tcf-root .star{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  isolation:isolate;
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  margin:0 auto;
  padding:0;
  border:1px solid rgba(238,77,126,.78);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(238,77,126,.08),rgba(238,77,126,.025));
  color:#eb4d7c;
  line-height:1;
  overflow:hidden;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.08);
  transform:translateZ(0);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-radius .24s ease,background .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease;
}
.tcf-root .star span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:25px;
  line-height:1;
  transform-origin:50% 52%;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.08));
  transition:transform .28s cubic-bezier(.2,.9,.25,1.25),filter .22s ease;
}
.tcf-root .star:hover{
  transform:translateY(-2px) scale(1.045);
  border-radius:17px;
  border-color:#f06b95;
  background:linear-gradient(180deg,rgba(238,77,126,.16),rgba(238,77,126,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px rgba(223,61,111,.17);
}
.tcf-root .star:hover span{transform:scale(1.10) rotate(-4deg)}
.tcf-root .star.on{
  border-color:rgba(255,255,255,.26);
  background:linear-gradient(145deg,#f36b94 0%,#df4776 54%,#c92f61 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(122,13,50,.20),0 10px 24px rgba(212,47,99,.28);
}
.tcf-root .star.on span{transform:scale(1.08);filter:drop-shadow(0 2px 4px rgba(103,9,42,.22))}
.tcf-root .star.on:hover{transform:translateY(-2px) scale(1.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.40),inset 0 -1px 0 rgba(122,13,50,.20),0 13px 28px rgba(212,47,99,.36)}
.tcf-root .star:active{transform:translateY(0) scale(.91)}
.tcf-root .star.animating span{animation:tcfFavPopPrecise .44s cubic-bezier(.2,.9,.25,1.35)}
.tcf-root .star.animating:after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:5px;
  border:2px solid rgba(244,110,151,.72);
  border-radius:12px;
  pointer-events:none;
  animation:tcfFavPulsePrecise .46s ease-out forwards;
}
@keyframes tcfFavPopPrecise{
  0%{transform:scale(1) rotate(0)}
  35%{transform:scale(.68) rotate(-14deg)}
  72%{transform:scale(1.20) rotate(5deg)}
  100%{transform:scale(1.08) rotate(0)}
}
@keyframes tcfFavPulsePrecise{
  0%{opacity:.85;transform:scale(.68)}
  100%{opacity:0;transform:scale(1.55)}
}
@media(max-width:720px){
  .tcf-root .actionBar{min-height:70px;padding:12px 14px}
  .tcf-root .quickActions{gap:10px}
  .tcf-root .favOnlyBtn{min-width:148px;padding:0 16px}
  .tcf-root .resetBtn{min-width:96px;padding:0 15px}
}
