/* TFT Top Ranking Image 1.1.0 — standalone studio + Team Builder integration */
.tbr-shortcode-host,
.tbr-studio,
.tbr-image-preview-overlay{font-family:"Play",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-sizing:border-box}
.tbr-shortcode-host *,.tbr-studio *,.tbr-image-preview-overlay *{box-sizing:border-box}
.tbr-shortcode-host{width:100%;max-width:1280px;margin:24px auto}
.tbr-shortcode-error{max-width:900px;margin:24px auto;padding:16px 18px;border:1px solid #f1b94e;border-radius:14px;background:#fff7df;color:#6f4c00;font:600 14px/1.55 system-ui,sans-serif}

.tbr-studio{
  --tbr-bg:#090b15;--tbr-panel:#101421;--tbr-panel2:#151a2a;--tbr-border:rgba(255,255,255,.09);
  --tbr-text:#f6f7fb;--tbr-muted:#97a0b4;--tbr-green:#00ff84;--tbr-purple:#8b5cf6;--tbr-gold:#f4c85a;
  position:relative;width:100%;overflow:hidden;margin:0;padding:0;border:1px solid var(--tbr-border);border-radius:28px;
  color:var(--tbr-text);background:
    radial-gradient(circle at 8% 0%,rgba(128,78,255,.18),transparent 30%),
    radial-gradient(circle at 100% 15%,rgba(0,255,132,.08),transparent 28%),
    linear-gradient(180deg,#0b0e18 0%,#090b14 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.28)
}
#tb-app .tbr-studio{margin:0;border-left:0;border-right:0;border-radius:0;box-shadow:none}

.tbr-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:34px 36px 30px;border-bottom:1px solid var(--tbr-border);background:linear-gradient(110deg,rgba(139,92,246,.10),rgba(0,255,132,.03) 55%,transparent)}
.tbr-hero-copy{max-width:760px}.tbr-kicker{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:#b7c0d4;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.tbr-live-dot{width:8px;height:8px;border-radius:50%;background:var(--tbr-green);box-shadow:0 0 0 5px rgba(0,255,132,.10),0 0 20px rgba(0,255,132,.65)}
.tbr-studio .tb-ranking-title{margin:0;color:#fff;font-size:clamp(25px,3vw,38px);font-weight:950;letter-spacing:-.04em;line-height:1.08}.tbr-studio .tb-ranking-subtitle{max-width:720px;margin:12px 0 0;color:var(--tbr-muted);font-size:14px;line-height:1.65}.tbr-studio .tb-ranking-subtitle strong{color:#dfe6f5}
.tbr-hero-side{display:flex;align-items:flex-start;gap:12px}.tbr-size-card{min-width:174px;padding:14px 16px;border:1px solid rgba(0,255,132,.18);border-radius:16px;background:rgba(6,22,19,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.tbr-size-card span,.tbr-size-card small{display:block;color:#7f918f;font-size:9px;font-weight:900;letter-spacing:.14em}.tbr-size-card strong{display:block;margin:4px 0;color:var(--tbr-green);font-size:18px;letter-spacing:-.02em}.tbr-icon-close{width:38px;height:38px;border:1px solid var(--tbr-border);border-radius:12px;background:rgba(255,255,255,.04);color:#dfe4ee;font-size:25px;line-height:1;cursor:pointer}.tbr-icon-close:hover{background:rgba(255,255,255,.09)}

.tbr-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;padding:24px}.tbr-editor-card,.tbr-guide-card{border:1px solid var(--tbr-border);border-radius:20px;background:linear-gradient(180deg,rgba(19,24,39,.96),rgba(13,17,29,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.tbr-editor-card{padding:20px}.tbr-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.tbr-section-head>div,.tbr-preview-head>div{display:flex;align-items:center;gap:12px}.tbr-step{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(139,92,246,.32);border-radius:12px;background:rgba(139,92,246,.12);color:#c8b5ff;font-size:11px;font-weight:950;letter-spacing:.08em}.tbr-section-head h3,.tbr-preview-head h3,.tbr-guide-card h3{margin:0;color:#fff;font-size:16px;font-weight:900}.tbr-section-head p,.tbr-preview-head p{margin:3px 0 0;color:#778197;font-size:11px;line-height:1.45}.tbr-section-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.tbr-text-btn{border:0;background:transparent;color:#8f99ac;font-size:11px;font-weight:800;cursor:pointer}.tbr-text-btn:hover{color:#fff}.tbr-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:#dfe6f2;font-size:11px;font-weight:900;user-select:none}.tbr-toggle input{position:absolute;opacity:0;pointer-events:none}.tbr-toggle-ui{position:relative;display:inline-block;width:40px;height:22px;border-radius:999px;background:#232b3b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:.18s ease}.tbr-toggle-ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#95a3be;transition:.18s ease}.tbr-toggle input:checked + .tbr-toggle-ui{background:rgba(0,255,132,.22);box-shadow:inset 0 0 0 1px rgba(0,255,132,.30)}.tbr-toggle input:checked + .tbr-toggle-ui::after{left:21px;background:#00ff84}.tbr-toggle-text{white-space:nowrap}

.tbr-rank-list{display:grid;gap:10px}.tbr-header-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 140px;gap:12px;margin:0 0 14px}.tbr-setting-field{min-width:0}.tbr-setting-field label{display:block;margin:0 0 6px;color:#7b869b;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.tbr-setting-field input{width:100%;height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#111827;color:#eef2f7;font-size:12px;font-weight:800;outline:none;box-sizing:border-box}.tbr-setting-field input:focus{border-color:rgba(139,92,246,.46);box-shadow:0 0 0 3px rgba(139,92,246,.10)}.tbr-rank-row{display:grid;grid-template-columns:72px minmax(0,1fr) 154px;align-items:center;gap:12px;padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(255,255,255,.025);transition:border-color .18s ease,background .18s ease,transform .18s ease}.tbr-rank-row:hover{border-color:rgba(139,92,246,.30);background:rgba(139,92,246,.045);transform:translateY(-1px)}
.tbr-studio .tb-ranking-rank-chip{height:48px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#171c29;color:#a8b1c3}.tbr-rank-word{font-size:9px;font-weight:900;letter-spacing:.10em}.tbr-studio .tb-ranking-rank-chip strong{color:#fff;font-size:21px;line-height:1}.tbr-rank-1 .tb-ranking-rank-chip{border-color:rgba(244,200,90,.32);background:linear-gradient(135deg,rgba(244,200,90,.20),rgba(244,200,90,.06));color:#e9cd83}.tbr-rank-1 .tb-ranking-rank-chip strong{color:#ffd969}.tbr-rank-2 .tb-ranking-rank-chip{border-color:rgba(191,205,226,.24);background:linear-gradient(135deg,rgba(191,205,226,.13),rgba(191,205,226,.04))}.tbr-rank-2 .tb-ranking-rank-chip strong{color:#dfe8f6}.tbr-rank-3 .tb-ranking-rank-chip{border-color:rgba(203,133,84,.25);background:linear-gradient(135deg,rgba(203,133,84,.15),rgba(203,133,84,.04))}.tbr-rank-3 .tb-ranking-rank-chip strong{color:#e6ab7b}
.tbr-link-field{min-width:0}.tbr-link-field label,.tb-ranking-image-picker label{display:block;margin:0 0 5px;color:#687287;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.tbr-studio .tb-ranking-build-input,.tbr-studio .tb-ranking-image-picker input{width:100%;height:40px;margin:0;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:11px;outline:none;background:#0b0f1a;color:#edf1f8;font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:none}.tbr-studio .tb-ranking-build-input::placeholder,.tbr-studio .tb-ranking-image-picker input::placeholder{color:#4f5869}.tbr-studio .tb-ranking-build-input:focus,.tbr-studio .tb-ranking-image-picker input:focus{border-color:rgba(0,255,132,.52);box-shadow:0 0 0 3px rgba(0,255,132,.08)}
.tbr-lead-control{position:relative}.tbr-studio .tb-ranking-image-btn{width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;border:1px solid rgba(139,92,246,.24);border-radius:11px;background:rgba(139,92,246,.09);color:#c7b7f7;font-size:11px;font-weight:900;cursor:pointer}.tbr-studio .tb-ranking-image-btn:hover{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.15);color:#fff}.tbr-pick-icon{color:#a884ff}.tbr-studio .tb-ranking-image-picker{display:none;position:absolute;z-index:1000002;top:58px;right:0;width:300px;max-width:calc(100vw - 28px);min-height:164px;padding:14px;overflow:visible;box-sizing:border-box;border:1px solid rgba(139,92,246,.34);border-radius:14px;background:#111623;box-shadow:0 18px 48px rgba(0,0,0,.52)}.tbr-studio .tb-ranking-image-picker.is-open{display:block}.tbr-studio .tb-ranking-image-btn.has-selection{border-color:rgba(0,255,132,.34);background:rgba(0,255,132,.08);color:#c9ffe4}.tbr-studio .tb-ranking-image-picker input{display:block!important;position:static!important;float:none!important;width:100%!important;height:42px!important;margin:0!important;box-sizing:border-box!important}.tbr-studio .tb-ranking-image-picker input.has-error{border-color:rgba(255,91,91,.55)!important;box-shadow:0 0 0 3px rgba(255,91,91,.08)!important}.tbr-image-picker-note{display:block;position:static;clear:both;min-height:14px;margin:9px 1px 11px!important;padding:0!important;color:#717c91;font-size:9.5px;line-height:1.45}.tbr-image-picker-note strong{color:#c9d2e4}.tbr-image-picker-actions{display:grid!important;grid-template-columns:1fr 1fr;align-items:center;gap:8px;position:static!important;clear:both;width:100%;margin:0!important;padding:0!important;box-sizing:border-box}.tbr-image-picker-actions button{display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;float:none!important;transform:none!important;width:100%!important;min-width:0!important;height:34px!important;margin:0!important;padding:0 10px!important;box-sizing:border-box!important;border-radius:9px!important;font-size:10px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;cursor:pointer}.tbr-image-clear{border:1px solid rgba(255,255,255,.09)!important;background:#1a2030!important;color:#aeb8ca!important}.tbr-image-apply{border:1px solid rgba(0,255,132,.35)!important;background:#00d574!important;color:#06110c!important}

.tbr-guide-card{padding:22px;align-self:start;position:sticky;top:18px}.tbr-guide-badge{display:inline-flex;padding:6px 8px;border-radius:7px;background:rgba(0,255,132,.08);color:var(--tbr-green);font-size:9px;font-weight:950;letter-spacing:.12em}.tbr-guide-card h3{margin:12px 0 18px;font-size:18px}.tbr-guide-step{display:grid;grid-template-columns:30px 1fr;gap:11px;padding:13px 0;border-top:1px solid rgba(255,255,255,.06)}.tbr-guide-step>span{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:9px;background:#1b2030;color:#aeb7c9;font-size:10px;font-weight:950}.tbr-guide-step strong{display:block;color:#e9edf5;font-size:12px}.tbr-guide-step p{margin:4px 0 0;color:#747f93;font-size:10.5px;line-height:1.5}.tbr-guide-step code{padding:2px 4px;border-radius:5px;background:#090c14;color:#bfaeff;font-size:10px}.tbr-tip{margin-top:16px;padding:13px;border:1px solid rgba(244,200,90,.14);border-radius:13px;background:rgba(244,200,90,.055)}.tbr-tip span{color:#f4c85a;font-size:9px;font-weight:950;letter-spacing:.12em}.tbr-tip p{margin:5px 0 0;color:#938a6e;font-size:10.5px;line-height:1.5}.tbr-sample-image{margin-top:18px;padding-top:17px;border-top:1px solid rgba(255,255,255,.07)}.tbr-sample-image-title{margin:0 0 10px;color:#e9edf5;font-size:12px;font-weight:950;letter-spacing:.02em}.tbr-sample-image img{display:block;width:100%;height:auto;border:1px solid rgba(139,92,246,.18);border-radius:12px;background:#0b0f18;box-shadow:0 8px 24px rgba(0,0,0,.18)}

.tbr-action-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:18px 24px;border-top:1px solid var(--tbr-border);background:rgba(5,7,13,.40)}.tbr-studio .tb-ranking-hint{display:flex;align-items:center;gap:9px;color:#707b8f;font-size:10.5px;line-height:1.4}.tbr-hint-icon{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border:1px solid rgba(255,255,255,.08);border-radius:50%;color:#8f9aad;font-size:10px;font-weight:900}.tbr-action-buttons{display:flex;gap:9px}.tbr-btn{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 16px;border-radius:12px;font-size:11px;font-weight:950;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.tbr-btn:disabled{opacity:.58;cursor:wait;transform:none!important}.tbr-btn-secondary{border:1px solid rgba(255,255,255,.11);background:#171c28;color:#d9deea}.tbr-btn-secondary:hover{border-color:rgba(255,255,255,.22);transform:translateY(-1px)}.tbr-btn-primary{border:1px solid rgba(0,255,132,.38);background:linear-gradient(135deg,#00d874,#00b965);color:#04100b;box-shadow:0 8px 25px rgba(0,255,132,.13)}.tbr-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,255,132,.22)}

.tbr-preview-wrap{margin:0;padding:24px;border-top:1px solid var(--tbr-border)}.tbr-preview-head{margin-bottom:16px}.tbr-studio .tb-ranking-preview-stage{overflow:auto;padding:16px;border:1px solid rgba(139,92,246,.18);border-radius:18px;background:linear-gradient(180deg,#120b21 0%,#180d2b 100%)}.tbr-studio .tb-ranking-loading{padding:24px;text-align:center;border-radius:14px;background:rgba(255,255,255,.04);color:#dce3ef;font-size:12px;font-weight:850}

/* Ranking preview itself */
.tbr-studio .tb-ranking-preview-composition{width:1080px;max-width:1080px;margin:0 auto;background:linear-gradient(180deg,#160d2a 0%,#1a0f2f 100%)}.tbr-studio .tb-ranking-floating-head{height:176px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 28px;text-align:center;background:linear-gradient(180deg,#160d2a 0%,#160d2a 100%);box-sizing:border-box}.tbr-studio .tb-ranking-export-stage{width:1080px;max-width:1080px;margin:0 auto;padding:18px;border:4px solid #473171;border-radius:28px;background:linear-gradient(180deg,#160d2a 0%,#1a0f2f 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}.tbr-studio .tb-ranking-stage-title-1,.tbr-studio .tb-ranking-stage-title-2{margin:0 auto;line-height:1.02;text-transform:uppercase;letter-spacing:.02em;font-family:"Black Ops One",Impact,Haettenschweiler,"Arial Black",sans-serif;font-weight:400}.tbr-studio .tb-ranking-stage-title-1{max-width:1000px;color:#fff;font-size:34px;font-weight:400;text-shadow:0 5px 0 rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)}.tbr-studio .tb-ranking-stage-title-2{max-width:1040px;margin-top:0;font-family:"Bungee",Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:45px;font-weight:400;transform:translateY(10%);background:linear-gradient(180deg,#ffe98a 0%,#ffb423 52%,#ff5d13 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 0 rgba(70,19,0,.55),0 2px 8px rgba(0,0,0,.26)}
.tbr-studio .tb-ranking-card{display:flex;align-items:stretch;margin-bottom:16px;overflow:hidden;border:2px solid rgba(255,255,255,.42);border-radius:28px;background:linear-gradient(180deg,#f1e1d7 0%,#efe7d7 100%);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.tbr-studio .tb-ranking-card-thumb{position:relative;width:234px;min-width:234px;overflow:hidden;align-self:stretch;background:#111827}.tbr-studio .tb-ranking-card-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,18,.18),rgba(8,10,18,.02))}.tbr-studio .tb-ranking-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.16) translateX(-18%);transform-origin:center center}.tbr-studio .tb-ranking-card-thumb-name{position:absolute;z-index:2;left:10px;right:auto;bottom:12px;display:inline-flex;align-items:center;max-width:calc(100% - 20px);padding:7px 11px;overflow:hidden;border-radius:999px;background:rgba(17,15,25,.82);color:#fff;font-size:11px;font-weight:900;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.22)}.tbr-studio .tb-ranking-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2c1d4f,#12233c);color:#fff;font-size:34px;font-weight:900}.tbr-studio .tb-ranking-card-body{flex:1;min-width:0;padding:16px 10px 16px 6px}.tbr-studio .tb-ranking-card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.tbr-studio .tb-ranking-card-badge{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:999px;background:#2e1c4b;color:#ffd55d;font-size:13px;font-weight:900;letter-spacing:.04em}.tbr-studio .tb-ranking-card-meta{color:#8d837c;font-size:12px;font-weight:900}.tbr-studio .tb-ranking-units-row{display:flex;align-items:flex-start;gap:8px;overflow:hidden;padding-top:8px;padding-left:0;box-sizing:border-box;flex-wrap:nowrap}.tbr-studio .tb-ranking-unit{position:relative;width:101px;min-width:101px;display:flex;flex-direction:column;align-items:center}.tbr-studio .tb-ranking-unit-thumb{position:relative;width:101px;padding-top:89px}.tbr-studio .tb-ranking-unit-hex{position:absolute;left:0;top:0;width:101px;height:89px;overflow:hidden;clip-path:polygon(50% 0%,94% 22%,94% 78%,50% 100%,6% 78%,6% 22%);background:#8b94a4}.tbr-studio .tb-ranking-unit.tb-cost-1 .tb-ranking-unit-hex{background:#c9ced8}.tbr-studio .tb-ranking-unit.tb-cost-2 .tb-ranking-unit-hex{background:#27c96a}.tbr-studio .tb-ranking-unit.tb-cost-3 .tb-ranking-unit-hex{background:#1ea3ff}.tbr-studio .tb-ranking-unit.tb-cost-4 .tb-ranking-unit-hex{background:#c777ff}.tbr-studio .tb-ranking-unit.tb-cost-5 .tb-ranking-unit-hex{background:#e4b233}.tbr-studio .tb-ranking-unit-hex-inner{position:absolute;inset:5px;overflow:hidden;clip-path:polygon(50% 0%,94% 22%,94% 78%,50% 100%,6% 78%,6% 22%);background:#101827}.tbr-studio .tb-ranking-unit-hex-inner img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.15)}.tbr-studio .tb-ranking-unit-stars{position:absolute!important;z-index:5!important;top:-7px!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:51px!important;height:21px!important;padding:2px 6px!important;margin:0!important;border-radius:6px!important;background:#f0ba10!important;box-shadow:0 3px 9px rgba(0,0,0,.18)!important;line-height:0!important;overflow:hidden!important}.tbr-studio .tb-ranking-unit-star{display:block!important;width:11px!important;height:11px!important;flex:0 0 11px!important;fill:#111!important}.tbr-studio .tb-ranking-unit-name{position:absolute;z-index:4;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);max-width:88%;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.75);color:#fff;font-size:15px;font-weight:900;line-height:1.05;text-align:center;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tbr-studio .tb-ranking-unit-items{min-height:20px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:2px}.tbr-studio .tb-ranking-unit-items-no-name,.tbr-studio .tb-ranking-unit-items-with-name{margin-top:3px}.tbr-studio .tb-ranking-unit-item{width:19px;height:19px;overflow:hidden;border:1px solid rgba(0,0,0,.14);border-radius:5px;background:#101a2a;box-shadow:0 1px 4px rgba(0,0,0,.10)}.tbr-studio .tb-ranking-unit-item img{display:block;width:100%;height:100%;object-fit:cover}.tbr-studio .tb-ranking-units-row[data-unit-count="8"] .tb-ranking-unit{width:91px;min-width:91px}.tbr-studio .tb-ranking-units-row[data-unit-count="8"] .tb-ranking-unit-thumb{width:91px;padding-top:81px}.tbr-studio .tb-ranking-units-row[data-unit-count="8"] .tb-ranking-unit-hex{width:91px;height:81px}.tbr-studio .tb-ranking-units-row[data-unit-count="9"] .tb-ranking-unit{width:74px;min-width:74px}.tbr-studio .tb-ranking-units-row[data-unit-count="9"] .tb-ranking-unit-thumb{width:74px;padding-top:64px}.tbr-studio .tb-ranking-units-row[data-unit-count="9"] .tb-ranking-unit-hex{width:74px;height:64px}.tbr-studio .tb-ranking-units-row[data-unit-count="10"] .tb-ranking-unit{width:81px;min-width:81px}.tbr-studio .tb-ranking-units-row[data-unit-count="10"] .tb-ranking-unit-thumb{width:81px;padding-top:71px}.tbr-studio .tb-ranking-units-row[data-unit-count="10"] .tb-ranking-unit-hex{width:81px;height:71px}.tbr-studio .tb-ranking-footer{margin-top:4px;color:#fff;font-size:14px;font-weight:900;letter-spacing:.05em;text-align:center}

/* Image preview modal */
#tbr-image-preview-overlay.tbr-image-preview-overlay{position:fixed;z-index:1000000;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,7,13,.86);backdrop-filter:blur(7px)}#tbr-image-preview-overlay.is-visible{display:flex!important}.tbr-image-preview-modal{position:relative;width:min(900px,96vw);max-height:92vh;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:#0f1420;box-shadow:0 28px 90px rgba(0,0,0,.58)}.tbr-image-preview-close{position:absolute;z-index:2;top:12px;right:14px;width:36px;height:36px;border:1px solid rgba(255,255,255,.10);border-radius:11px;background:rgba(255,255,255,.05);color:#fff;font-size:24px;line-height:1;cursor:pointer}.tbr-image-preview-title{padding:20px 24px 12px;color:#fff;font-size:18px;font-weight:900}.tbr-image-preview-body{max-height:calc(92vh - 136px);overflow:auto;padding:0 24px 18px}.tbr-image-preview-body img{display:block;width:min(620px,100%);height:auto;margin:0 auto;border-radius:14px;background:#160d2a}.tbr-image-preview-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 24px 22px}.tbr-image-preview-actions .tb-btn{height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#181e2b;color:#fff;font-size:11px;font-weight:900;cursor:pointer}.tbr-image-preview-actions .tb-btn-gold{border-color:rgba(0,255,132,.35);background:#00d574;color:#06110c}body.tbr-image-preview-open{overflow:hidden}

/* Team Builder Top button safety styling */
#tb-app .tbr-top-button{cursor:pointer}

@media(max-width:980px){.tbr-main-grid{grid-template-columns:1fr}.tbr-guide-card{position:static}.tbr-header-settings{grid-template-columns:1fr 1fr 120px}.tbr-rank-row{grid-template-columns:64px minmax(0,1fr) 138px}.tbr-hero{padding:28px}.tbr-main-grid{padding:18px}.tbr-action-bar{padding:16px 18px}}
@media(max-width:720px){.tbr-shortcode-host{margin:10px auto}.tbr-studio{border-radius:18px}.tbr-hero{padding:22px 18px;flex-direction:column}.tbr-hero-side{width:100%;justify-content:space-between}.tbr-size-card{min-width:0;flex:1}.tbr-main-grid{padding:12px;gap:12px}.tbr-editor-card,.tbr-guide-card{border-radius:16px}.tbr-editor-card{padding:13px}.tbr-section-head{align-items:flex-start}.tbr-section-head p{max-width:250px}.tbr-section-tools{width:100%;justify-content:space-between}.tbr-header-settings{grid-template-columns:1fr;gap:10px}.tbr-rank-row{grid-template-columns:56px 1fr;padding:9px}.tbr-studio .tb-ranking-rank-chip{grid-row:1 / span 2;height:100%;min-height:92px;flex-direction:column}.tbr-link-field{grid-column:2}.tbr-lead-control{grid-column:2}.tbr-studio .tb-ranking-image-btn{margin-top:0}.tbr-studio .tb-ranking-image-picker{position:static;width:100%;margin-top:8px}.tbr-action-bar{align-items:stretch;flex-direction:column}.tbr-action-buttons{display:grid;grid-template-columns:1fr}.tbr-btn{width:100%}.tbr-preview-wrap{padding:12px}.tbr-studio .tb-ranking-preview-stage{padding:8px}.tbr-studio .tb-ranking-preview-composition{width:1040px}.tbr-studio .tb-ranking-floating-head{height:170px;gap:10px;padding:0 18px}.tbr-studio .tb-ranking-export-stage{width:1040px;padding:12px}.tbr-studio .tb-ranking-card-thumb{width:200px;min-width:200px}.tbr-image-preview-actions{padding:0 14px 16px}.tbr-image-preview-body{padding:0 14px 14px}.tbr-image-preview-title{padding:18px 52px 10px 14px}.tbr-studio .tb-ranking-stage-title-1{font-size:26px}.tbr-studio .tb-ranking-stage-title-2{font-size:34px;transform:translateY(10%)}}

/* ===== TFT Top Ranking Image 1.3.5 — Comp Manager picker ===== */
.tbr-rank-row{grid-template-columns:72px 126px minmax(0,1fr) 158px;align-items:start}
.tbr-control-label{display:block;margin:0 0 5px;color:#687287;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.tbr-lead-control,.tbr-comp-control{position:relative;min-width:0}
.tbr-studio .tb-ranking-image-btn{margin-top:0}
.tbr-comp-select-btn{width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid rgba(0,255,132,.22);border-radius:11px;background:rgba(0,255,132,.075);color:#9ee9c2;font-size:10.5px;font-weight:900;cursor:pointer;white-space:nowrap;transition:.16s ease}
.tbr-comp-select-btn:hover,.tbr-comp-select-btn.has-selection{border-color:rgba(0,255,132,.52);background:rgba(0,255,132,.13);color:#d9ffeb}
.tbr-comp-btn-icon{font-size:15px;line-height:1;color:#00ff84}
.tbr-link-field{position:relative}
.tbr-selected-comp{display:flex;align-items:center;gap:7px;min-height:24px;margin-top:6px;padding:4px 5px 4px 9px;border:1px solid rgba(0,255,132,.18);border-radius:9px;background:rgba(0,255,132,.055);color:#bdf4d6;font-size:10px;font-weight:850;line-height:1.25}
.tbr-selected-comp-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbr-selected-comp button{flex:0 0 20px;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.06);color:#8da498;font-size:15px;line-height:20px;cursor:pointer}
.tbr-selected-comp button:hover{background:rgba(255,80,80,.13);color:#ff9a9a}

.tbr-comp-picker-overlay{position:fixed;z-index:1000002;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,7,13,.88);backdrop-filter:blur(8px)}
.tbr-comp-picker-overlay.is-visible{display:flex}
.tbr-comp-picker-modal{width:min(680px,96vw);max-height:86vh;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:linear-gradient(180deg,#121724,#0d111b);box-shadow:0 28px 90px rgba(0,0,0,.58);color:#fff;font-family:"Play",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.tbr-comp-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 22px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.tbr-comp-picker-head h3{margin:4px 0 0;color:#fff;font-size:21px;font-weight:950;letter-spacing:-.02em}
.tbr-comp-picker-head p{margin:6px 0 0;color:#7f899d;font-size:11px;line-height:1.5}
.tbr-comp-picker-head p strong{color:#aab5c7}
.tbr-comp-picker-kicker{color:#9aa5ba;font-size:9px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.tbr-comp-picker-kicker b{color:#00ff84}
#tbr-comp-picker-close{flex:0 0 36px;width:36px;height:36px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.04);color:#dfe4ee;font-size:24px;line-height:1;cursor:pointer}
.tbr-comp-search-wrap{display:flex;align-items:center;gap:9px;margin:16px 18px 12px;padding:0 12px;border:1px solid rgba(139,92,246,.20);border-radius:12px;background:#090d16}
.tbr-comp-search-wrap>span{color:#8c74d8;font-size:16px}
.tbr-comp-search-wrap input{width:100%;height:44px;padding:0;border:0!important;outline:0!important;background:transparent!important;color:#eef2f8!important;font:750 12px/1.2 Inter,ui-sans-serif,system-ui,sans-serif!important;box-shadow:none!important}
.tbr-comp-search-wrap input::placeholder{color:#4f596b}
.tbr-comp-picker-list{max-height:56vh;overflow:auto;padding:0 12px 16px}
.tbr-comp-option{width:100%;min-height:48px;display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:10px;margin:0 0 7px;padding:8px 10px;border:1px solid rgba(255,255,255,.065);border-radius:12px;background:rgba(255,255,255,.025);color:#eef2f7;text-align:left;cursor:pointer;transition:.14s ease}
.tbr-comp-option:hover{transform:translateY(-1px);border-color:rgba(0,255,132,.28);background:rgba(0,255,132,.055)}
.tbr-comp-option strong{min-width:0;overflow:hidden;color:#dfe5ef;font-size:11.5px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.tbr-comp-tier{display:inline-flex;align-items:center;justify-content:center;width:34px;height:28px;border-radius:8px;background:#242b3a;color:#d7dfeb;font-size:11px;font-weight:950}
.tbr-tier-s{background:rgba(255,199,64,.14);color:#ffd56c}.tbr-tier-a{background:rgba(139,92,246,.14);color:#cbb8ff}.tbr-tier-b{background:rgba(0,190,255,.11);color:#8ddcff}.tbr-tier-c{background:rgba(0,255,132,.10);color:#8df0bf}.tbr-tier-d{background:rgba(255,255,255,.07);color:#aeb7c8}
.tbr-comp-arrow{color:#566176;font-size:20px;text-align:right}
.tbr-comp-loading,.tbr-comp-empty{padding:30px 16px;text-align:center;color:#7e899e;font-size:11px;font-weight:800}
body.tbr-comp-picker-open{overflow:hidden}

@media(max-width:1050px){.tbr-rank-row{grid-template-columns:64px 116px minmax(0,1fr) 148px}}
@media(max-width:760px){
  .tbr-rank-row{grid-template-columns:54px minmax(0,1fr) minmax(0,1fr);align-items:start}
  .tbr-studio .tb-ranking-rank-chip{grid-row:1 / span 2;grid-column:1;height:100%;min-height:104px}
  .tbr-link-field{grid-column:2 / 4;grid-row:1}
  .tbr-lead-control{grid-column:2;grid-row:2}
  .tbr-comp-control{grid-column:3;grid-row:2}
  .tbr-studio .tb-ranking-image-picker{position:fixed;z-index:1000003;top:50%;left:50%;right:auto;width:min(340px,90vw);max-width:90vw;min-height:164px;margin:0;transform:translate(-50%,-50%);box-shadow:0 24px 70px rgba(0,0,0,.65)}
  .tbr-comp-picker-overlay{padding:12px}.tbr-comp-picker-modal{border-radius:18px}.tbr-comp-picker-head{padding:18px 16px 13px}.tbr-comp-search-wrap{margin:13px 12px 10px}.tbr-comp-picker-list{padding:0 8px 12px}
}


/* ===== Image picker floating modal fix 1.3.12 ===== */
.tbr-image-picker-backdrop{display:none;position:fixed;z-index:1000001;inset:0;background:rgba(5,8,15,.62);backdrop-filter:blur(3px)}
body.tbr-image-picker-open .tbr-image-picker-backdrop{display:block}
body.tbr-image-picker-open{overflow:hidden}
body > .tb-ranking-image-picker.tbr-floating-picker{display:none;position:fixed!important;z-index:1000003!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;width:min(360px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;min-height:170px!important;margin:0!important;padding:16px!important;overflow:visible!important;box-sizing:border-box!important;transform:translate(-50%,-50%)!important;border:1px solid rgba(139,92,246,.38)!important;border-radius:16px!important;background:#111623!important;box-shadow:0 28px 80px rgba(0,0,0,.72)!important}
body > .tb-ranking-image-picker.tbr-floating-picker.is-open{display:block!important}
body > .tb-ranking-image-picker.tbr-floating-picker label{display:block!important;margin:0 0 7px!important;color:#7e899f!important;font-size:10px!important;font-weight:900!important;letter-spacing:.09em!important;text-transform:uppercase!important}
body > .tb-ranking-image-picker.tbr-floating-picker input{display:block!important;position:static!important;float:none!important;width:100%!important;height:44px!important;margin:0!important;padding:0 12px!important;box-sizing:border-box!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:11px!important;outline:none!important;background:#0b0f1a!important;color:#edf1f8!important;font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;box-shadow:none!important}
body > .tb-ranking-image-picker.tbr-floating-picker input:focus{border-color:rgba(0,255,132,.58)!important;box-shadow:0 0 0 3px rgba(0,255,132,.09)!important}
body > .tb-ranking-image-picker.tbr-floating-picker input.has-error{border-color:rgba(255,91,91,.6)!important;box-shadow:0 0 0 3px rgba(255,91,91,.08)!important}
body > .tb-ranking-image-picker.tbr-floating-picker .tbr-image-picker-note{display:block!important;position:static!important;clear:both!important;min-height:14px!important;margin:10px 1px 12px!important;padding:0!important;color:#7a8599!important;font-size:10px!important;line-height:1.45!important}
body > .tb-ranking-image-picker.tbr-floating-picker .tbr-image-picker-note strong{color:#d5dceb!important}
body > .tb-ranking-image-picker.tbr-floating-picker .tbr-image-picker-actions{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important;gap:9px!important;position:static!important;clear:both!important;width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
body > .tb-ranking-image-picker.tbr-floating-picker .tbr-image-picker-actions button{display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;float:none!important;transform:none!important;width:100%!important;min-width:0!important;height:38px!important;margin:0!important;padding:0 12px!important;box-sizing:border-box!important;border-radius:10px!important;font-size:10.5px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;cursor:pointer!important}
body > .tb-ranking-image-picker.tbr-floating-picker .tbr-image-clear{border:1px solid rgba(255,255,255,.10)!important;background:#1a2030!important;color:#b5bfd0!important}
body > .tb-ranking-image-picker.tbr-floating-picker .tbr-image-apply{border:1px solid rgba(0,255,132,.38)!important;background:#00d574!important;color:#06110c!important}
@media(max-width:600px){body > .tb-ranking-image-picker.tbr-floating-picker{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;padding:14px!important}}

/* Top Ranking 1.3.16 — background đồng bộ Tier List */
.tbr-studio{
  --tbr-bg:#060c16;
  --tbr-panel:#0d1321;
  --tbr-panel2:#0a101b;
  border-color:rgba(129,140,248,.18)!important;
  background:
    radial-gradient(circle at top right,rgba(16,185,129,.14),transparent 26%),
    radial-gradient(circle at top left,rgba(99,102,241,.18),transparent 30%),
    linear-gradient(180deg,#08111d 0%,#060b15 100%)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.35)!important;
}
.tbr-hero{
  background:
    linear-gradient(110deg,rgba(99,102,241,.07),rgba(16,185,129,.025) 58%,transparent)!important;
}
.tbr-studio .tb-ranking-preview-composition,
.tbr-studio .tb-ranking-floating-head{
  background:
    radial-gradient(circle at 8% 0%,rgba(59,130,246,.14),transparent 30%),
    radial-gradient(circle at 100% 0%,rgba(250,204,21,.10),transparent 28%),
    linear-gradient(180deg,#08111d 0%,#060b15 100%)!important;
}
.tbr-studio .tb-ranking-export-stage{
  border-color:rgba(99,102,241,.34)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(59,130,246,.13),transparent 30%),
    radial-gradient(circle at 100% 0%,rgba(250,204,21,.09),transparent 28%),
    linear-gradient(180deg,#08111d 0%,#060b15 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.tbr-image-preview-body img{background:#060b15!important}

/* Background presets */
.tbr-bg-picker-overlay{position:fixed;inset:0;z-index:1000015;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,12,.72);backdrop-filter:blur(6px)}
.tbr-bg-picker-modal{width:min(860px,96vw);max-height:90vh;overflow:auto;padding:20px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#121a2a 0%, #0b1220 100%);box-shadow:0 28px 80px rgba(0,0,0,.52)}
.tbr-bg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:6px}
.tbr-bg-card{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:.16s ease}
.tbr-bg-card:hover{transform:translateY(-1px);border-color:rgba(244,200,90,.34)}
.tbr-bg-card.active{border-color:#f4c85a;box-shadow:0 0 0 1px rgba(244,200,90,.24) inset}
.tbr-bg-swatch{display:block;height:78px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.tbr-bg-name{display:block;text-align:center;font-size:12px;font-weight:800}
@media(max-width:860px){.tbr-bg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* Top Ranking 1.3.18 — UI fonts aligned with Tier List */
.tbr-studio .tb-ranking-title,
.tbr-section-head h3,
.tbr-preview-head h3,
.tbr-guide-card h3,
.tbr-comp-picker-head h3,
.tbr-image-preview-title,
.tbr-size-card strong,
.tbr-sample-image-title{
  font-family:"Anton",Impact,Haettenschweiler,"Arial Black",sans-serif!important;
  letter-spacing:.02em;
}
.tbr-studio .tb-ranking-subtitle,
.tbr-kicker,
.tbr-section-head p,
.tbr-preview-head p,
.tbr-text-btn,
.tbr-toggle,
.tbr-setting-field label,
.tbr-setting-field input,
.tbr-link-field label,
.tbr-studio .tb-ranking-build-input,
.tbr-studio .tb-ranking-image-picker input,
.tbr-studio .tb-ranking-image-btn,
.tbr-comp-select-btn,
.tbr-guide-step,
.tbr-tip,
.tbr-action-bar,
.tbr-comp-picker-modal,
.tbr-comp-option strong,
.tbr-comp-loading,.tbr-comp-empty,
.tbr-image-preview-actions button,
.tbr-bg-card,.tbr-bg-name{
  font-family:"Play",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
}


/* ===== 1.3.20 — Comp champions +10% + matching cost-color border ===== */
.tbr-studio .tb-ranking-units-row{
    position:relative;
    z-index:4;
    gap:2px;
    overflow:visible;
    margin-left:-38px;
    padding-top:4px;
}
.tbr-studio .tb-ranking-unit{width:101px;min-width:101px}
.tbr-studio .tb-ranking-unit-thumb{width:101px;padding-top:98px}
.tbr-studio .tb-ranking-unit-hex{
    left:50%;
    width:111px;
    height:98px;
    transform:translateX(-50%);
}
.tbr-studio .tb-ranking-unit-hex-inner{inset:5px}
.tbr-studio .tb-ranking-unit-items{position:relative;z-index:6;margin-top:-10px}
.tbr-studio .tb-ranking-unit-items-no-name{margin-top:-10px}
.tbr-studio .tb-ranking-units-row[data-unit-count="9"] .tb-ranking-unit{width:90px;min-width:90px}
.tbr-studio .tb-ranking-units-row[data-unit-count="9"] .tb-ranking-unit-thumb{width:90px;padding-top:87px}
.tbr-studio .tb-ranking-units-row[data-unit-count="9"] .tb-ranking-unit-hex{width:99px;height:87px}
.tbr-studio .tb-ranking-units-row[data-unit-count="10"] .tb-ranking-unit{width:81px;min-width:81px}
.tbr-studio .tb-ranking-units-row[data-unit-count="10"] .tb-ranking-unit-thumb{width:81px;padding-top:78px}
.tbr-studio .tb-ranking-units-row[data-unit-count="10"] .tb-ranking-unit-hex{width:89px;height:78px}


/* ===== 1.3.29 — Trang bị hex chồng mép dưới, item giữa nhô xuống giống mẫu ===== */
.tbr-studio .tb-ranking-unit-items{
    position:absolute;
    z-index:7;
    left:50%;
    bottom:-6px;
    width:110%;
    min-height:0;
    margin:0!important;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    transform:translateX(-50%);
    pointer-events:none;
}
.tbr-studio .tb-ranking-unit-item{
    width:33.3333%;
    height:auto;
    aspect-ratio:1/1;
    flex:0 0 33.3333%;
    box-sizing:border-box;
    padding:3px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:#c9ced8;
    clip-path:polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
    box-shadow:none;
}
.tbr-studio .tb-ranking-unit.tb-cost-1 .tb-ranking-unit-item{background:#c9ced8}
.tbr-studio .tb-ranking-unit.tb-cost-2 .tb-ranking-unit-item{background:#27c96a}
.tbr-studio .tb-ranking-unit.tb-cost-3 .tb-ranking-unit-item{background:#1ea3ff}
.tbr-studio .tb-ranking-unit.tb-cost-4 .tb-ranking-unit-item{background:#c777ff}
.tbr-studio .tb-ranking-unit.tb-cost-5 .tb-ranking-unit-item{background:#e4b233}
.tbr-studio .tb-ranking-unit-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    clip-path:polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
}
.tbr-studio .tb-ranking-unit-item:nth-child(2){
    transform:translateY(5px);
    z-index:2;
}

/* ===== 1.3.30 — Lục giác tướng chỉnh lại cho giống layout TFTAcademy hơn ===== */