@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&display=swap');
.tfi-page{background:#0b0e1a;padding-bottom:32px;font-family:'Oxanium',sans-serif;}
.tfi-hero{padding:24px 24px 20px;border-bottom:0.5px solid rgba(255,255,255,0.05);text-align:center;}
.tfi-hero-inner{position:relative;z-index:2;}
.tfi-patch{display:inline-flex;background:rgba(200,155,60,0.1);border:0.5px solid rgba(200,155,60,0.25);border-radius:20px;padding:3px 10px;font-size:10px;color:#C89B3C;margin-bottom:8px;}
.tfi-title{font-size:24px;font-weight:700;color:#eef3ff;margin-bottom:4px;}
.tfi-title span{color:#C89B3C;}
.tfi-sub{font-size:12px;color:#4a6080;}
.tfi-layout{display:flex;gap:16px;padding:16px 24px;max-width:1280px;margin:0 auto;align-items:flex-start;}
.tfi-sidebar{width:200px;min-width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;}
.tfi-search{display:flex;align-items:center;gap:8px;background:#111d35;border:0.5px solid rgba(255,255,255,0.07);border-radius:8px;padding:0 10px;height:34px;}
.tfi-search svg{width:13px;height:13px;color:#3c4a6a;flex-shrink:0;}
.tfi-search input{flex:1;background:none;border:none;outline:none;font-size:12px;color:#eef3ff;font-family:inherit;}
.tfi-search input::placeholder{color:#2c3a5a;}
.tfi-sidebar-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#4a6080;font-weight:700;}
.tfi-base-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.tfi-base-item{cursor:pointer;border-radius:8px;border:1.5px solid rgba(255,255,255,0.1);background:#162035;padding:6px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
.tfi-base-item:hover{border-color:var(--ic);background:rgba(255,255,255,0.05);}
.tfi-base-item.active{border-color:var(--ic);background:rgba(200,155,60,0.08);box-shadow:0 0 8px rgba(200,155,60,0.15);}
.tfi-base-img{width:32px;height:32px;border-radius:6px;background:#1a2540;display:flex;align-items:center;justify-content:center;font-size:9px;color:#8090b8;font-weight:700;}
.tfi-tier-filters{display:flex;gap:5px;flex-wrap:wrap;}
.tfi-tfbtn{background:transparent;border:0.5px solid rgba(255,255,255,0.07);border-radius:6px;padding:4px 10px;font-size:11px;color:#4a6080;cursor:pointer;font-family:inherit;font-weight:700;transition:all 0.15s;}
.tfi-tfbtn.on{background:rgba(200,155,60,0.08);border-color:rgba(200,155,60,0.35);color:#C89B3C;}
.tfi-ts{color:#f59e0b!important;} .tfi-ta{color:#e84040!important;} .tfi-tb{color:#4a9eff!important;} .tfi-tc{color:#9aaabb!important;}
.tfi-main{flex:1;min-width:0;}
.tfi-table-head{display:grid;grid-template-columns:120px 180px 1fr 60px;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#6a80a0;font-weight:700;background:rgba(255,255,255,0.02);}
.tfi-table-body{display:flex;flex-direction:column;}
.tfi-row{display:grid;grid-template-columns:220px 1fr;gap:12px;padding:12px 14px;border-bottom:0.5px solid rgba(255,255,255,0.07);align-items:center;transition:background 0.15s;background:rgba(255,255,255,0.01);}
.tfi-row:hover{background:rgba(255,255,255,0.04);}
.tfi-recipe{display:flex;align-items:center;gap:5px;}
.tfi-rimg{width:32px;height:32px;border-radius:7px;background:#1a2540;border:1px solid #2a3d5a;display:flex;align-items:center;justify-content:center;font-size:9px;color:#4a6080;font-weight:700;}
.tfi-plus{font-size:14px;color:#3c4a6a;font-weight:700;}
.tfi-result{display:flex;align-items:center;gap:8px;}
.tfi-result-img{width:38px;height:38px;border-radius:8px;background:#1a2540;border:1.5px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.tfi-result-name{font-size:14px;font-weight:700;color:#ffffff;}
.tfi-desc{font-size:12px;color:#8090b8;line-height:1.5;}
.tfi-tier-cell{display:flex;justify-content:center;}
.tfi-tier-badge{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.tfi-tier-s{background:rgba(245,158,11,0.12);color:#f59e0b;border:0.5px solid rgba(245,158,11,0.3);}
.tfi-tier-a{background:rgba(232,64,64,0.1);color:#e84040;border:0.5px solid rgba(232,64,64,0.25);}
.tfi-tier-b{background:rgba(74,158,255,0.1);color:#4a9eff;border:0.5px solid rgba(74,158,255,0.25);}
.tfi-tier-c{background:rgba(154,170,187,0.08);color:#9aaabb;border:0.5px solid rgba(154,170,187,0.2);}
@media(max-width:768px){.tfi-layout{flex-direction:column;padding:12px 14px;}.tfi-sidebar{width:100%;}.tfi-table-head,.tfi-row{grid-template-columns:100px 150px 1fr 50px;}}
.tfi-item-icon{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;display:block;}
.tfi-result img { width:48px !important; height:48px !important; border-radius:8px; object-fit:cover; flex-shrink:0; display:block; }
.tfi-base-item { width:52px; height:52px; cursor:pointer; border-radius:8px; border:2px solid transparent; overflow:hidden; }
.tfi-base-item img { width:100% !important; height:100% !important; object-fit:cover; display:block; }
.tfi-base-item.active { border-color:#C89B3C; }