@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root { --tl-blue:#2563eb; --tl-violet:#7c3aed; --tl-navy:#10182d; --tl-text:#1c2942; --tl-muted:#68758a; --tl-line:#e5eaf2; }
body.site-home-page { margin:0; min-width:320px; color:var(--tl-text); background:#f7f9fc; font-family:'Inter','Segoe UI',Arial,sans-serif; }
.site-home-page button,.site-home-page input,.site-home-page select,.site-home-page textarea { font-family:'Inter','Segoe UI',Arial,sans-serif; }
.site-home-page .app.navtop { display:none; }
.tl-home *, .tl-home *::before, .tl-home *::after { box-sizing:border-box; }
.tl-home a { color:inherit; text-decoration:none; }
.tl-container { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.tl-nav { position:absolute; top:0; left:0; right:0; z-index:20; color:#fff; border-bottom:1px solid rgba(255,255,255,.15); background:linear-gradient(to bottom,rgba(8,20,45,.55),transparent); }
.tl-nav__inner { min-height:176px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.tl-brand { display:flex; align-items:center; gap:9px; color:#fff!important; }
.tl-brand img { width:169px; height:117px; object-fit:contain; filter:drop-shadow(0 5px 15px rgba(21,39,80,.25)); }
.tl-brand span { display:flex; flex-direction:column; line-height:1.25; }
.tl-brand strong { font-size:13px; }.tl-brand small { color:#dbeafe; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.tl-nav__links { display:flex; align-items:center; gap:27px; }
.tl-nav__links a { position:relative; padding:31px 0 27px; color:#eef5ff; font-size:12px; font-weight:600; }
.tl-nav__links a::after { position:absolute; left:0; right:100%; bottom:18px; height:2px; content:''; background:#fff; transition:.2s ease; }
.tl-nav__links a:hover::after,.tl-nav__links a.active::after { right:0; }
.tl-nav__actions { display:flex; align-items:center; gap:9px; }
.tl-btn { min-height:40px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:10px; font-size:11px; font-weight:700; line-height:1.2; text-align:center; transition:.22s ease; }
.tl-btn:hover { transform:translateY(-2px); }
.tl-btn--primary { color:#fff!important; background:linear-gradient(135deg,#2563eb,#6d28d9); box-shadow:0 12px 25px rgba(37,99,235,.25); }
.tl-btn--ghost { color:#fff!important; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.tl-btn--light { color:#1e3a8a!important; background:#fff; box-shadow:0 12px 25px rgba(30,64,175,.12); }
.tl-btn--large { min-height:50px; padding:0 22px; border-radius:12px; font-size:12px; }
.tl-hero { position:relative; min-height:700px; overflow:hidden; background:#dff4ff url('../../../images/site/tl/Layout/hero-wuxia-v2.webp') center center / cover no-repeat; }
.tl-hero::before { position:absolute; inset:0; content:''; background:linear-gradient(90deg,rgba(239,248,255,.08) 0%,rgba(238,248,255,.14) 47%,rgba(235,247,255,.6) 78%,rgba(245,250,255,.88) 100%); }
.tl-hero__inner { position:relative; z-index:2; min-height:700px; display:flex; align-items:center; justify-content:flex-end; padding-top:170px; }
.tl-hero__content { width:50%; max-width:570px; padding-left:25px; }
.tl-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#33537a; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
.tl-eyebrow i { width:20px; height:2px; background:#3b82f6; }
.tl-hero h1 { margin:18px 0; color:#172554; font-family:'Inter','Segoe UI',Arial,sans-serif; font-size:clamp(48px,6vw,76px); font-weight:800; line-height:1.06; letter-spacing:-.045em; }
.tl-hero h1 em { color:#5b21b6; font-style:normal; }
.tl-hero__content > p { max-width:520px; margin:0 0 28px; color:#52657e; font-size:14px; line-height:1.8; }
.tl-hero__actions { display:flex; gap:11px; flex-wrap:wrap; }
.tl-hero__fade { position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(transparent,#f7f9fc); }
.tl-section { padding:92px 0; }
.tl-news-section { padding-top:72px; }
.tl-section-heading { margin-bottom:28px; display:flex; align-items:end; justify-content:space-between; }
.tl-section-heading span,.tl-ranking-panel__head > div > span { color:#2563eb; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.tl-section-heading h2 { margin:6px 0 0; font-family:'Inter','Segoe UI',Arial,sans-serif; font-size:34px; font-weight:800; }.tl-section-heading > a { color:#52657e; font-size:11px; font-weight:700; }.tl-section-heading > a b { margin-left:6px; color:#2563eb; }
.tl-content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:20px; }
.tl-news-panel,.tl-ranking-panel { border:1px solid var(--tl-line); border-radius:20px; background:#fff; box-shadow:0 14px 40px rgba(24,39,75,.06); }
.tl-news-panel { min-height:430px; padding:24px 27px; }.tl-tabs { display:flex; gap:7px; padding-bottom:19px; border-bottom:1px solid #edf0f5; }.tl-tabs button { min-height:36px; padding:9px 15px; display:inline-flex; align-items:center; justify-content:center; color:#7b8799; border:0; border-radius:9px; background:transparent; font:700 11px 'Inter','Segoe UI',Arial,sans-serif; line-height:1.2; text-align:center; cursor:pointer; }.tl-tabs button.active { color:#2563eb; background:#eff6ff; }
.tl-news-list { display:none; }.tl-news-list.active { display:block; }.tl-news-list a { min-height:64px; display:grid; grid-template-columns:75px minmax(0,1fr) 80px; align-items:center; gap:13px; border-bottom:1px solid #eef1f5; }.tl-news-list a.has-date { grid-template-columns:50px 75px minmax(0,1fr); }.tl-news-list a:last-child { border:0; }.tl-news-date { width:48px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#2563eb!important; border:1px solid #bfdbfe; border-radius:13px; background:linear-gradient(145deg,#eff6ff,#fff); text-align:center!important; box-shadow:0 5px 14px rgba(37,99,235,.08); }.tl-news-date b { color:#1d4ed8; font-size:17px; line-height:1; }.tl-news-date span { margin-top:4px; color:#7c8da5; font-size:7px; line-height:1; }.tl-news-type { width:max-content; padding:5px 8px; color:#2563eb; border-radius:6px; background:#eff6ff; font-size:8px; font-weight:800; text-transform:uppercase; }.tl-news-list strong { overflow:hidden; color:#334155; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }.tl-news-list time { color:#9aa5b4; font-size:9px; text-align:right; }
.tl-ranking-panel { padding:24px; background:linear-gradient(155deg,#fff,#f7faff); }.tl-ranking-panel__head { display:flex; justify-content:space-between; align-items:start; }.tl-ranking-panel h3 { margin:5px 0 0; font-family:'Inter','Segoe UI',Arial,sans-serif; font-size:25px; font-weight:800; }.tl-live { display:flex; align-items:center; gap:5px; color:#059669; font-size:8px; font-weight:700; text-transform:uppercase; }.tl-live i { width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 0 4px #d1fae5; }
.tl-server-select { margin:20px 0 11px; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid #e5eaf2; border-radius:10px; background:#fff; }.tl-server-select > span { color:#8a96a8; font-size:9px; font-weight:700; text-transform:uppercase; }.tl-server-select select { max-width:65%; color:#334155; border:0; background:transparent; font:700 10px 'Inter','Segoe UI',Arial,sans-serif; text-align:right; }
.tl-rank-row { min-height:47px; display:flex; align-items:center; gap:11px; border-bottom:1px solid #edf0f5; }.tl-rank-row:last-child { border:0; }.tl-rank-number { width:25px; height:25px; display:grid; place-items:center; color:#718096; border-radius:8px; background:#f1f5f9; font-size:9px; font-weight:800; }.tl-rank-row:nth-child(-n+3) .tl-rank-number { color:#fff; background:linear-gradient(135deg,#f59e0b,#f97316); }.tl-rank-player { min-width:0; flex:1; display:flex; flex-direction:column; }.tl-rank-player strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; }.tl-rank-player small { color:#9aa5b4; font-size:8px; }.tl-rank-row > b { color:#2563eb; font-size:9px; }
.tl-loading,.tl-empty { min-height:150px; display:grid; place-items:center; padding:25px; color:#9aa5b4; font-size:10px; text-align:center; }
.tl-world-section { padding:85px 0; background:#111a31; color:#fff; }.tl-world-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; align-items:center; }.tl-world-section .tl-eyebrow { color:#93c5fd; }.tl-world-copy h2 { margin:15px 0; font-family:'Inter','Segoe UI',Arial,sans-serif; font-size:42px; font-weight:800; line-height:1.15; }.tl-world-copy p { color:#aab7cc; font-size:11px; line-height:1.8; }.tl-text-link { display:inline-block; margin-top:17px; color:#93c5fd!important; font-size:11px; font-weight:700; }.tl-school-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.tl-school-grid a { min-height:135px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#dbeafe!important; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.04); transition:.2s ease; }.tl-school-grid a:hover { border-color:#60a5fa; background:rgba(37,99,235,.17); transform:translateY(-4px); }.tl-school-grid b { font:700 29px 'Inter','Segoe UI',Arial,sans-serif; }.tl-school-grid span { font-size:10px; font-weight:700; }
.tl-cta-section { padding:64px 0; }.tl-cta-card { min-height:170px; padding:36px 46px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#fff; border-radius:20px; background:linear-gradient(120deg,#1d4ed8,#6d28d9); box-shadow:0 18px 45px rgba(67,56,202,.18); }.tl-cta-card span { color:#bfdbfe; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }.tl-cta-card h2 { margin:7px 0; font-family:'Inter','Segoe UI',Arial,sans-serif; font-size:30px; font-weight:800; }.tl-cta-card p { margin:0; color:#dbeafe; font-size:11px; }.tl-cta-card .tl-btn span { color:inherit; font-size:12px; }
.tl-footer { color:#9ba8bc; background:#0c1427; }.tl-footer__inner { min-height:220px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; }.tl-footer__brand { display:flex; align-items:center; gap:12px; }.tl-footer__brand img { width:165px; height:98px; object-fit:contain; filter:grayscale(1) brightness(1.4); }.tl-footer p { font-size:9px; line-height:1.7; }.tl-footer__links { display:flex; gap:25px; }.tl-footer__links a { color:#cbd5e1; font-size:10px; font-weight:600; }.tl-footer__copy { grid-column:1/-1; margin:-25px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
@media(max-width:980px){.tl-nav__links{display:none}.tl-hero{background-position:38% 0}.tl-hero__content{width:56%}.tl-content-grid{grid-template-columns:1fr}.tl-world-grid{gap:35px}}
@media(max-width:700px){.tl-container{width:calc(100% - 24px)}.tl-nav__inner{min-height:145px}.tl-brand span,.tl-nav__actions .tl-btn--ghost{display:none}.tl-brand img{width:140px;height:97px}.tl-hero{min-height:720px;background-position:29% 0}.tl-hero::before{background:linear-gradient(0deg,rgba(243,249,255,.97) 0%,rgba(243,249,255,.7) 60%,rgba(243,249,255,.18) 100%)}.tl-hero__inner{min-height:720px;align-items:flex-end;padding:190px 0 78px}.tl-hero__content{width:100%;padding:0}.tl-hero h1{font-size:45px}.tl-section{padding:60px 0}.tl-news-section{padding-top:52px}.tl-section-heading h2{font-size:29px}.tl-news-panel{padding:18px 16px}.tl-news-list a{grid-template-columns:65px minmax(0,1fr)}.tl-news-list time{display:none}.tl-world-grid{grid-template-columns:1fr}.tl-school-grid{grid-template-columns:repeat(2,1fr)}.tl-cta-card{padding:30px 24px;flex-direction:column;align-items:flex-start}.tl-footer__inner{padding:30px 0;grid-template-columns:1fr}.tl-footer__links{flex-wrap:wrap}.tl-footer__copy{grid-column:auto;margin:0}}
@media(max-width:700px){.tl-news-list a.has-date{grid-template-columns:50px 65px minmax(0,1fr)}.tl-news-list a.has-date time{display:flex}}
@media(max-width:390px){.tl-hero h1{font-size:39px}.tl-hero__actions{flex-direction:column}.tl-hero__actions .tl-btn{width:100%}.tl-tabs button{padding:8px 10px}.tl-school-grid{grid-template-columns:1fr 1fr}}
