*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#06101e;color:#dcecff;font-family:"PingFang SC","Microsoft YaHei",sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[hidden]{display:none!important}
.tg-app{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh}
.tg-hidden{display:none!important}
.tg-header{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:56px;padding:0 12px;background:linear-gradient(180deg,rgba(13,26,48,.98),rgba(7,16,32,.98));border-bottom:1px solid rgba(80,160,255,.16);position:relative;z-index:30;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.tg-header::-webkit-scrollbar{display:none}
.tg-brand{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:15px;font-weight:700;color:#6fd3ff;padding-right:12px;border-right:1px solid rgba(80,160,255,.16)}
.tg-brand h1{font-size:15px;font-weight:700;margin:0;display:inline-flex;align-items:center;gap:6px;color:inherit}
.tg-brand h1 .glyphicon{font-size:17px}
.tg-metrics{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.tg-metric{display:inline-flex;align-items:baseline;gap:4px;flex:0 0 auto;padding:4px 10px;border-radius:8px;background:rgba(50,110,190,.12);border:1px solid rgba(80,160,255,.14);font-size:12px;line-height:1;color:#9fc3e8}
.tg-metric .glyphicon{font-size:12px;color:#57b7ff;position:relative;top:1px}
.tg-metric-label{font-size:11px;opacity:.78}
.tg-metric-value{font-size:15px;font-weight:700;color:#eaf6ff;font-variant-numeric:tabular-nums;min-width:12px;text-align:right}
.tg-metric-unit{font-size:10px;opacity:.6}
.tg-metric.hot{background:rgba(255,140,60,.16);border-color:rgba(255,150,60,.34)}
.tg-metric.hot .glyphicon{color:#ffa14a}
.tg-metric.good{background:rgba(60,200,120,.14);border-color:rgba(70,210,130,.3)}
.tg-metric.good .glyphicon{color:#4ade80}
.tg-metric.bad{background:rgba(240,80,80,.14);border-color:rgba(240,90,90,.32)}
.tg-metric.bad .glyphicon{color:#ff7676}
.tg-metric.warn{background:rgba(255,180,40,.2);border-color:rgba(255,190,70,.5)}
.tg-metric.warn .glyphicon{color:#ffb84a}
.tg-metric.warn .tg-metric-value{color:#ffd166}
.tg-metric.mode-solo{background:rgba(80,160,255,.16);border-color:rgba(90,180,255,.4)}
.tg-metric.mode-pvp{background:rgba(255,150,60,.18);border-color:rgba(255,160,70,.45)}
.tg-metric.mode-pvp .glyphicon{color:#ffa14a}
.tg-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-left:auto;padding-left:10px;border-left:1px solid rgba(80,160,255,.16)}
.tg-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;min-width:32px;padding:0 9px;border:1px solid rgba(90,170,255,.28);border-radius:8px;background:rgba(30,70,130,.3);color:#b8d8f8;font-size:12px;line-height:1;cursor:pointer;transition:all .16s;outline:none;white-space:nowrap}
.tg-btn:hover{background:rgba(50,120,210,.48);border-color:rgba(120,200,255,.6);color:#fff}
.tg-btn .glyphicon{font-size:13px}
.tg-btn.tg-btn-primary{background:linear-gradient(180deg,#2f8dff,#1867d6);border-color:#4aa3ff;color:#fff}
.tg-btn.tg-btn-pvp{background:linear-gradient(180deg,#ff8f3c,#e56a1a);border-color:#ffab66;color:#fff}
.tg-btn[disabled]{opacity:.42;cursor:not-allowed;transform:none!important}
.tg-stage{flex:1 1 auto;position:relative;overflow:hidden;background:#0a1830}
#tg_canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#tg_input{position:absolute;z-index:5;margin:0;padding:0;border:0;outline:0;resize:none;overflow:hidden;background:transparent;color:transparent;caret-color:transparent;opacity:.01;font-size:16px;line-height:1;-webkit-user-select:text;user-select:text;pointer-events:auto}
.tg-focus-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;padding:12px 22px;border-radius:12px;background:rgba(10,26,50,.9);border:1px solid rgba(90,180,255,.5);color:#bfe4ff;font-size:14px;pointer-events:none}
.tg-focus-hint .glyphicon{margin-right:6px;color:#57b7ff}
.tg-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);z-index:2000;padding:12px 26px;border-radius:40px;font-size:16px;font-weight:700;color:#fff;background:rgba(20,44,78,.94);border:1px solid rgba(90,180,255,.5);box-shadow:0 12px 48px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,1.5,.4,1);white-space:nowrap}
.tg-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tg-toast.ahead{border-color:rgba(70,220,130,.7);color:#b6ffd4}
.tg-toast.behind{border-color:rgba(255,110,110,.7);color:#ffc2c2}
.tg-toast.finish{border-color:rgba(255,214,70,.8);color:#ffe9a0}
.tg-toast.hint{border-color:rgba(120,190,255,.6);color:#cfe8ff;font-size:14px;font-weight:500}
.tg-toast.warn{border-color:rgba(255,180,60,.85);background:rgba(80,50,10,.95);color:#ffd166}
.modal{text-align:center;padding:0!important}
.modal::before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-4px}
.modal-dialog{display:inline-block;text-align:left;vertical-align:middle;margin:12px auto!important;max-width:560px;width:calc(100% - 32px)}
.modal-backdrop.in{opacity:.72}
.tg-modal .modal-content{background:linear-gradient(180deg,rgba(18,36,64,.99),rgba(9,20,38,.99));border:1px solid rgba(90,175,255,.3);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.85);color:#d8ecff}
.tg-modal .modal-header{border-bottom:1px solid rgba(90,175,255,.16);padding:16px 20px;text-align:center;position:relative}
.tg-modal .modal-title{font-size:18px;font-weight:700;color:#eaf6ff;letter-spacing:1px;margin:0}
.tg-modal .modal-title .glyphicon{color:#57b7ff;margin-right:8px}
.tg-modal .modal-body{padding:20px}
.tg-modal .modal-footer{border-top:1px solid rgba(90,175,255,.16);padding:14px 20px;text-align:center}
.tg-modal .close{position:absolute;right:14px;top:12px;color:#9fc3e8;opacity:.6;text-shadow:none;font-size:22px}
.tg-modal .close:hover{opacity:1;color:#fff}
.tg-field{margin-bottom:16px}
.tg-field-label{display:block;font-size:12px;color:#8fb8dd;margin-bottom:7px}
.tg-field-label .glyphicon{margin-right:5px;color:#57b7ff}
.tg-seg{display:flex;gap:8px;flex-wrap:wrap}
.tg-seg label{flex:1 1 0;min-width:74px;margin:0;padding:9px 6px;text-align:center;border-radius:10px;border:1px solid rgba(90,170,255,.24);background:rgba(30,66,120,.3);font-size:13px;font-weight:500;color:#b6d4f0;cursor:pointer;transition:all .16s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-seg label:hover{background:rgba(48,104,180,.46);border-color:rgba(120,200,255,.5)}
.tg-seg input{position:absolute;opacity:0;pointer-events:none}
.tg-seg input:checked+label,.tg-seg label.active{background:linear-gradient(180deg,#2f8dff,#1867d6);border-color:#6bb6ff;color:#fff}
.tg-seg.disabled label{opacity:.35;cursor:not-allowed;pointer-events:none}
.tg-seg label .glyphicon{display:block;font-size:15px;margin-bottom:3px}
.tg-rules{margin:0;padding:0;list-style:none}
.tg-rules li{position:relative;padding:9px 0 9px 30px;font-size:13px;line-height:1.65;color:#b8d4ee;border-bottom:1px dashed rgba(90,170,255,.12)}
.tg-rules li:last-child{border-bottom:0}
.tg-rules li .glyphicon{position:absolute;left:4px;top:11px;font-size:13px;color:#57b7ff}
.tg-rules li b{color:#eaf6ff}
.kbd{display:inline-block;padding:1px 7px;margin:0 2px;border-radius:5px;background:rgba(80,150,240,.22);border:1px solid rgba(110,190,255,.35);font-size:11px;color:#bfe4ff;font-family:Consolas,Monaco,monospace}
.tg-match-overlay{position:fixed;inset:0;z-index:1500;display:none;text-align:center;padding:20px;background:rgba(4,12,26,.94)}
.tg-match-overlay.show{display:block}
.tg-match-overlay::before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-4px}
.tg-match-card{display:inline-block;vertical-align:middle;text-align:center;padding:36px 40px;background:linear-gradient(180deg,rgba(18,36,64,.98),rgba(9,20,38,.98));border:1px solid rgba(90,175,255,.4);border-radius:20px;box-shadow:0 32px 100px rgba(0,0,0,.9);max-width:440px}
.tg-match-title{font-size:22px;font-weight:800;color:#eaf6ff;letter-spacing:2px;margin:0 0 8px}
.tg-match-title .glyphicon{color:#ffa14a;margin-right:8px}
.tg-match-sub{font-size:13px;color:#8fb8dd;margin-bottom:22px;line-height:1.7}
.tg-match-ring{width:150px;height:150px;position:relative;margin:0 auto 30px}
.tg-match-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tg-match-ring .ring-bg{fill:none;stroke:rgba(80,150,240,.2);stroke-width:8}
.tg-match-ring .ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.tg-match-ring .time-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tg-match-ring .time-text{font-size:34px;font-weight:800;color:#eaf6ff;font-variant-numeric:tabular-nums;line-height:1}
.tg-match-ring .time-label{font-size:11px;color:#8fb8dd;letter-spacing:2px;margin-top:4px}
.tg-match-status{font-size:13px;color:#bfe4ff;min-height:20px;margin-bottom:20px}
.tg-match-status .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#57b7ff;margin-right:6px;vertical-align:middle;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.tg-match-btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tg-opp-bar{position:absolute;left:0;right:0;top:0;height:6px;z-index:10;background:rgba(0,0,0,.3);display:none}
.tg-opp-bar.show{display:block}
.tg-opp-bar .fill{height:100%;width:0;background:linear-gradient(90deg,#ff8f3c,#ffd166);transition:width .2s;box-shadow:0 0 12px rgba(255,150,60,.6)}
.tg-reconnect{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1800;padding:10px 20px;border-radius:30px;background:rgba(20,44,78,.96);border:1px solid rgba(255,180,60,.6);color:#ffd166;font-size:13px;display:none}
.tg-reconnect.show{display:block}
.tg-result-card{text-align:center}
.tg-result-icon{font-size:54px;line-height:1;margin-bottom:6px;display:block}
.tg-result-icon.win{color:#ffd54a}
.tg-result-icon.lose{color:#ff7d7d}
.tg-result-title{font-size:24px;font-weight:800;letter-spacing:2px;margin:0 0 4px}
.tg-result-title.win{color:#ffe27a}
.tg-result-title.lose{color:#ff9c9c}
.tg-result-sub{font-size:12px;color:#8fb8dd;margin-bottom:16px;letter-spacing:1px}
.tg-result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.tg-result-item{padding:10px 8px;border-radius:10px;background:rgba(40,84,150,.26);border:1px solid rgba(90,170,255,.16)}
.tg-result-item .glyphicon{font-size:15px;color:#57b7ff;display:block;margin-bottom:5px}
.tg-result-item .val{font-size:17px;font-weight:700;color:#eaf6ff;display:block;line-height:1.2}
.tg-result-item .lbl{font-size:11px;color:#8fb8dd;display:block;margin-top:2px}
.tg-result-item.opp{background:rgba(255,140,60,.12);border-color:rgba(255,150,60,.32)}
.tg-result-item.opp .glyphicon{color:#ffa14a}
.tg-result-banner{display:inline-block;padding:6px 18px;border-radius:30px;font-size:13px;font-weight:700;margin-bottom:14px}
.tg-result-banner.win{background:rgba(255,200,40,.16);border:1px solid rgba(255,210,60,.5);color:#ffe27a}
.tg-result-banner.lose{background:rgba(255,90,90,.14);border:1px solid rgba(255,110,110,.45);color:#ff9c9c}
.tg-newbest{display:inline-block;padding:4px 14px;margin-bottom:12px;border-radius:20px;font-size:12px;font-weight:700;color:#10233e;background:linear-gradient(90deg,#ffe066,#ffb300)}
#fx_canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1090}
body.mode-solo #tg_net_wrap,
body.mode-solo #tg_mode_badge,
body.mode-solo #tg_opp_speed_wrap,
body.mode-solo #tg_prog_wrap{display:none!important}
body.mode-pvp #tg_acc_wrap,
body.mode-pvp #tg_err_wrap,
body.mode-pvp #tg_combo_wrap,
body.mode-pvp #tg_diff_wrap{display:none!important}
@media(max-width:900px){.tg-brand h1 span{display:none}.tg-metric-label{display:none}}
@media(max-width:640px){
    .tg-header{height:50px;padding:0 8px;gap:6px}
    .tg-metric{padding:3px 7px;font-size:11px}
    .tg-metric-value{font-size:13px}
    .tg-btn{height:30px;min-width:30px;padding:0 7px}
    #tg_lead_wrap,#tg_combo_wrap,#tg_diff_wrap{display:none!important}
    .tg-result-grid{grid-template-columns:repeat(2,1fr)}
    .tg-result-title{font-size:20px}
    .tg-match-card{padding:28px 20px}
    .tg-match-ring{width:120px;height:120px}
    .tg-match-ring .time-text{font-size:28px}
}
@media(max-width:480px){
    #tg_opp_speed_wrap,#tg_prog_wrap,#tg_net_wrap{display:none!important}
}