.ttl-app {
    --ttl-bg: #060c16;
    --ttl-panel: #0d1321;
    --ttl-panel-2: #0a101b;
    --ttl-border: rgba(255,255,255,.08);
    --ttl-text: #eef2ff;
    --ttl-muted: #9ca3af;
    --ttl-accent: #facc15;
    --ttl-green: #10b981;
    color: var(--ttl-text);
    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%);
    border: 1px solid rgba(129, 140, 248, .18);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    font-family: "Play", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ttl-shell { display:flex; gap:24px; align-items:flex-start; }
.ttl-board { flex: 1 1 auto; min-width: 0; }
.ttl-sidebar { width: 360px; flex: 0 0 360px; }
.ttl-brand { display:flex; align-items:flex-start; gap:10px; margin-bottom:18px; }
.ttl-brand-fixed { flex-direction:column; gap:10px; }
.ttl-brand-row { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.ttl-brand-title-white,
.ttl-brand-title-orange {
    font-family: "Anton", Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(22px, 3vw, 42px);
    line-height: 1.02;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ttl-brand-title-white {
    color:#fff;
    text-shadow: 0 4px 0 rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.28);
}
.ttl-brand-title-orange {
    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);
}
.ttl-toolbar {
    display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
    background: rgba(255,255,255,.035); border:1px solid var(--ttl-border);
    border-radius: 20px; padding:16px; margin-bottom:18px;
}
.ttl-title-settings {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; flex: 1 1 100%;
}
.ttl-field { min-width: 180px; flex:1 1 220px; }
.ttl-field label, .ttl-side-label {
    display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color: #94a3b8; margin-bottom:8px;
}
.ttl-field input, .ttl-search input, .ttl-row-modal-field input {
    width:100%; height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.08);
    background:#08101b; color:#fff; padding:0 14px; outline:none; box-shadow:none;
}
.ttl-field input:focus, .ttl-search input:focus, .ttl-row-modal-field input:focus { border-color: rgba(250,204,21,.55); }
.ttl-actions { display:flex; gap:10px; flex-wrap:wrap; }
.ttl-btn {
    height:46px; border-radius:14px; padding:0 16px; border:1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, #101827 0%, #0a111c 100%); color:#fff;
    font-weight:800; cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.ttl-btn:hover { transform: translateY(-1px); border-color: rgba(250,204,21,.45); }
.ttl-btn-primary {
    background: linear-gradient(180deg, #facc15 0%, #eab308 100%);
    color:#111827; border-color: rgba(250,204,21,.8);
}
.ttl-btn-ghost { background: rgba(255,255,255,.03); }
.ttl-rows { display:flex; flex-direction:column; gap:14px; }
.ttl-row {
    display:grid; grid-template-columns: 110px 1fr; gap:14px; align-items:stretch;
    min-height: 120px;
}
.ttl-row-label {
    font-family: "Anton", Impact, Haettenschweiler, "Arial Black", sans-serif;
    position:relative; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-weight:400; font-size:54px; color:#0b1020; text-transform:uppercase; letter-spacing:.02em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 12px 22px rgba(0,0,0,.2);
}
.ttl-row-label small { font-family: "Play", ui-sans-serif, system-ui, sans-serif; font-size:11px; letter-spacing:.08em; margin-top:6px; color: rgba(11,16,32,.72); }
.ttl-row-body {
    background: linear-gradient(180deg, rgba(6,10,16,.95) 0%, rgba(6,10,20,.96) 100%);
    border:2px solid rgba(255,255,255,.15); border-radius:22px; padding:18px 18px 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.ttl-row.active .ttl-row-body { box-shadow: 0 0 0 2px rgba(250,204,21,.28), inset 0 0 0 1px rgba(255,255,255,.04); }
.ttl-row-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ttl-row-name { font-size:13px; font-weight:800; color:#cbd5e1; letter-spacing:.03em; text-transform:uppercase; }
.ttl-row-controls { display:flex; gap:8px; }
.ttl-mini-btn {
    border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:#dbeafe;
    border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer;
}
.ttl-mini-btn-edit{border-color:rgba(250,204,21,.26);color:#fde68a;background:rgba(250,204,21,.06)}
.ttl-mini-btn-edit:hover{border-color:rgba(250,204,21,.55);background:rgba(250,204,21,.11)}
.ttl-dropzone {
    min-height: 68px; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; align-content:flex-start;
}
.ttl-empty { color: #64748b; font-size:14px; font-weight:600; padding:12px 2px; }
.ttl-chip {
    width: 68px; position:relative; cursor:grab; user-select:none;
}
.ttl-chip img {
    width:68px; height:68px; border-radius:16px; display:block; object-fit:cover;
    background:#0b1220; border:1px solid rgba(255,255,255,.12);
}
.ttl-chip-name {
    font-size:10px; line-height:1.2; color:#dbe3f0; margin-top:4px; text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:24px;
}
.ttl-chip-remove {
    position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:999px; border:none;
    background:#ef4444; color:#fff; font-size:14px; font-weight:900; cursor:pointer; box-shadow:0 8px 16px rgba(239,68,68,.3);
}
.ttl-sidebar-card {
    background: linear-gradient(180deg, rgba(8,15,27,.95) 0%, rgba(8,14,24,.98) 100%);
    border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.ttl-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.ttl-tab {
    height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:#0b1220;
    color:#cbd5e1; padding:0 14px; font-size:13px; font-weight:800; cursor:pointer;
}
.ttl-tab.active { background: #facc15; color:#111827; border-color:#facc15; }
.ttl-search { margin-bottom: 12px; }
.ttl-grid {
    display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; max-height: 760px; overflow:auto; padding-right:4px;
}
.ttl-library-card {
    background: rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:8px;
    cursor:grab; transition: transform .12s ease, border-color .12s ease;
}
.ttl-library-card:hover { transform: translateY(-1px); border-color: rgba(250,204,21,.45); }
.ttl-library-card img {
    width:100%; aspect-ratio:1/1; border-radius:12px; object-fit:cover; display:block; background:#0b1220;
}
.ttl-library-name { margin-top:6px; font-size:11px; line-height:1.25; color:#e5e7eb; text-align:center; min-height:28px; }
.ttl-hint {
    margin-top:14px; padding:12px 14px; border-radius:16px; background: rgba(250,204,21,.08); border:1px solid rgba(250,204,21,.18);
    color:#fde68a; font-size:12px; line-height:1.5;
}
.ttl-shortcode-error {
    border-radius: 18px; padding: 16px 18px; background: #1f2937; color: #f9fafb; border:1px solid rgba(255,255,255,.08);
}
.ttl-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 99999; background: #0f172a; color:#fff;
    border:1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.ttl-row-modal {
    position: fixed; inset: 0; z-index: 99999; display:none; align-items:center; justify-content:center; padding:20px;
}
.ttl-row-modal.is-open { display:flex; }
.ttl-row-modal-backdrop {
    position:absolute; inset:0; background:rgba(2,6,12,.76); border:none; padding:0; cursor:pointer;
}
.ttl-row-modal-card {
    position:relative; z-index:1; width:min(460px, 96vw); border-radius:22px; padding:20px;
    background:linear-gradient(180deg,#121a2a 0%, #0b1220 100%); border:1px solid rgba(255,255,255,.08);
    box-shadow:0 28px 80px rgba(0,0,0,.46);
}
.ttl-row-modal-title {
    font-family: "Anton", Impact, Haettenschweiler, "Arial Black", sans-serif;
    margin:0 0 16px; font-size:22px; font-weight:400; color:#fff;
}
.ttl-row-modal-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 128px; gap:12px; }
.ttl-row-modal-field span { display:block; margin-bottom:8px; color:#94a3b8; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ttl-row-modal-color-field input { padding:0; }
.ttl-row-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
@media (max-width: 1180px) {
    .ttl-shell { flex-direction:column; }
    .ttl-sidebar { width:100%; flex:1 1 auto; }
    .ttl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 420px; }
}
@media (max-width: 860px) {
    .ttl-app { padding:16px; border-radius:22px; }
    .ttl-brand-row { gap:10px; }
    .ttl-brand-title-white, .ttl-brand-title-orange { font-size: clamp(18px, 7vw, 34px); }
    .ttl-title-settings { grid-template-columns:1fr; }
    .ttl-row { grid-template-columns: 84px 1fr; }
    .ttl-row-label { font-size:40px; border-radius:16px; }
    .ttl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ttl-row-modal-grid { grid-template-columns:1fr; }
}

.ttl-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);
}
.ttl-image-preview-overlay.is-visible{display:flex!important}
.ttl-image-preview-modal{
    position:relative;width:min(920px,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)
}
.ttl-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
}
.ttl-image-preview-title{font-family:"Anton",Impact,Haettenschweiler,"Arial Black",sans-serif;padding:20px 24px 12px;color:#fff;font-size:18px;font-weight:400}
.ttl-image-preview-body{max-height:calc(92vh - 136px);overflow:auto;padding:0 24px 18px}
.ttl-image-preview-body img{display:block;width:min(760px,100%);height:auto;margin:0 auto;border-radius:14px;background:#060b14}
.ttl-image-preview-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 24px 22px}
.ttl-image-preview-actions .ttl-btn{height:40px;padding:0 14px;border-radius:11px;font-size:11px;font-weight:900}
body.ttl-image-preview-open{overflow:hidden}
@media (max-width: 860px) {
    .ttl-image-preview-title{padding:18px 52px 10px 14px}
    .ttl-image-preview-body{padding:0 14px 14px}
    .ttl-image-preview-actions{padding:0 14px 16px}
}

/* Tier List 1.0.5 — Toolbox giống Team Builder */
.ttl-library-controls{margin:0 0 12px}
.ttl-filter-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ttl-filter-pill{
    min-height:30px;padding:6px 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;
    background:#101722;color:#aeb8c9;font-size:11px;font-weight:850;cursor:pointer;transition:.15s ease
}
.ttl-filter-pill:hover{border-color:#566174;color:#fff}
.ttl-filter-pill.active{background:#facc15;border-color:#facc15;color:#111827}
.ttl-grid-champions{display:flex!important;flex-wrap:wrap;align-content:flex-start;gap:6px!important}
.ttl-grid-items{display:flex!important;flex-wrap:wrap;align-content:flex-start;gap:6px!important}
.ttl-grid-augments{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px!important;align-content:flex-start}
.ttl-champ-card{
    width:46px!important;height:46px!important;flex:0 0 46px;padding:0!important;border:2px solid #253144!important;
    border-radius:10px!important;overflow:hidden;background:#0b1018!important
}
.ttl-champ-card img{width:100%!important;height:100%!important;border-radius:0!important;object-fit:cover}
.ttl-champ-card:hover{transform:translateY(-2px) scale(1.04)}
.ttl-champ-cost-1{border-color:#8b94a4!important}
.ttl-champ-cost-2{border-color:#24b96c!important}
.ttl-champ-cost-3{border-color:#2b9bff!important}
.ttl-champ-cost-4{border-color:#bc65ff!important}
.ttl-champ-cost-5{border-color:#f0c400!important}
.ttl-item-card{
    width:36px!important;height:36px!important;flex:0 0 36px;padding:0!important;border:2px solid #283140!important;
    border-radius:8px!important;overflow:hidden;background:#0b1018!important
}
.ttl-item-card img{width:100%!important;height:100%!important;border-radius:0!important;object-fit:cover}
.ttl-item-card:hover{border-color:#facc15!important;transform:translateY(-2px) scale(1.04)}
.ttl-item-cat-radiant{border-color:#b8860b!important}
.ttl-item-cat-taotac{border-color:#7c3aed!important}
.ttl-item-cat-other{border-color:#607d8b!important}
.ttl-augment-group-title{
    grid-column:1/-1;margin:6px 0 0;padding:8px 10px;border-radius:10px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.ttl-augment-group-silver{background:rgba(203,213,225,.08);color:#d5dde8;border:1px solid rgba(203,213,225,.14)}
.ttl-augment-group-gold{background:rgba(250,204,21,.08);color:#fde68a;border:1px solid rgba(250,204,21,.16)}
.ttl-augment-group-diamond{background:rgba(147,51,234,.09);color:#ddb8ff;border:1px solid rgba(147,51,234,.18)}
.ttl-augment-group-other{background:rgba(148,163,184,.06);color:#aeb8c9;border:1px solid rgba(148,163,184,.12)}
.ttl-augment-card{padding:7px!important;border-width:1px!important}
.ttl-augment-card img{border-radius:10px!important}
.ttl-augment-card-silver{border-color:rgba(203,213,225,.30)!important}
.ttl-augment-card-gold{border-color:rgba(250,204,21,.36)!important}
.ttl-augment-card-diamond{border-color:rgba(168,85,247,.44)!important}
.ttl-augment-silver.active{background:#cbd5e1!important;border-color:#cbd5e1!important;color:#111827!important}
.ttl-augment-gold.active{background:#facc15!important;border-color:#facc15!important;color:#111827!important}
.ttl-augment-diamond.active{background:#a855f7!important;border-color:#a855f7!important;color:#fff!important}
@media(max-width:860px){
    .ttl-grid-augments{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ttl-champ-card{width:42px!important;height:42px!important;flex-basis:42px}
    .ttl-item-card{width:34px!important;height:34px!important;flex-basis:34px}
}


/* Tier List 1.0.7 — custom scrollbar cho bảng thư viện bên phải */
.ttl-grid{
    scrollbar-width:thin;
    scrollbar-color:rgba(116,128,151,.55) transparent;
    scrollbar-gutter:stable;
}
.ttl-grid::-webkit-scrollbar{width:7px;height:7px}
.ttl-grid::-webkit-scrollbar-track{background:transparent}
.ttl-grid::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(116,128,151,.58),rgba(75,85,105,.48));
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
}
.ttl-grid::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,rgba(148,163,184,.78),rgba(100,116,139,.68));
    border:1px solid transparent;
    background-clip:padding-box;
}
.ttl-grid::-webkit-scrollbar-button{display:none;width:0;height:0}
.ttl-grid::-webkit-scrollbar-corner{background:transparent}

/* Tier List 1.0.9 — viền màu cho tướng trong khu vực đã chọn */
.ttl-chip-champion img{border-width:2px!important;border-style:solid!important}
.ttl-chip-cost-1 img{border-color:#8b94a4!important;box-shadow:0 0 0 1px rgba(139,148,164,.16),0 4px 12px rgba(139,148,164,.18)}
.ttl-chip-cost-2 img{border-color:#24b96c!important;box-shadow:0 0 0 1px rgba(36,185,108,.16),0 4px 12px rgba(36,185,108,.18)}
.ttl-chip-cost-3 img{border-color:#2b9bff!important;box-shadow:0 0 0 1px rgba(43,155,255,.16),0 4px 12px rgba(43,155,255,.18)}
.ttl-chip-cost-4 img{border-color:#bc65ff!important;box-shadow:0 0 0 1px rgba(188,101,255,.16),0 4px 12px rgba(188,101,255,.18)}
.ttl-chip-cost-5 img{border-color:#f0c400!important;box-shadow:0 0 0 1px rgba(240,196,0,.18),0 4px 12px rgba(240,196,0,.20)}

/* Tier List 1.1.1 — mục phụ trên từng ô */
.ttl-chip{padding-top:12px}
.ttl-chip-attach-btn{
    position:absolute;left:50%;top:-2px;transform:translateX(-50%);width:26px;height:26px;border-radius:999px;
    border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#151f31 0%,#0a121f 100%);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:"Anton",sans-serif;font-size:18px;line-height:1;
    cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.32);overflow:hidden;z-index:2
}
.ttl-chip-attach-btn:hover{border-color:rgba(250,204,21,.55)}
.ttl-chip-attach-btn img{width:100%;height:100%;border-radius:999px;object-fit:cover;border:none!important;box-shadow:none!important}
.ttl-chip-remove{z-index:3}
.ttl-attach-modal{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;padding:20px}
.ttl-attach-modal.is-open{display:flex}
.ttl-attach-modal-card{
    position:relative;z-index:1;width:min(760px,96vw);max-height:90vh;overflow:hidden;border-radius:22px;padding:20px;
    background:linear-gradient(180deg,#121a2a 0%, #0b1220 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 80px rgba(0,0,0,.46)
}
.ttl-attach-tabs{margin:0 0 12px}
.ttl-attach-search{margin-bottom:12px}
.ttl-attach-grid{display:grid;gap:8px;max-height:54vh;overflow:auto;padding-right:4px;align-content:flex-start}
.ttl-attach-grid.ttl-grid-champions,.ttl-attach-grid.ttl-grid-items{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.ttl-attach-grid.ttl-grid-augments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ttl-attach-grid{scrollbar-width:thin;scrollbar-color:rgba(116,128,151,.55) transparent;scrollbar-gutter:stable}
.ttl-attach-grid::-webkit-scrollbar{width:7px;height:7px}
.ttl-attach-grid::-webkit-scrollbar-track{background:transparent}
.ttl-attach-grid::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(116,128,151,.58),rgba(75,85,105,.48));border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.ttl-attach-grid::-webkit-scrollbar-button{display:none;width:0;height:0}
@media(max-width:860px){.ttl-attach-modal-card{padding:16px}.ttl-attach-grid.ttl-grid-augments{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Tier List 1.1.2 — sửa popup Tộc Hệ bị phóng icon */
.ttl-attach-grid.ttl-grid-traits{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px!important;
    align-content:flex-start;
}
.ttl-attach-grid .ttl-trait-card{
    width:auto!important;
    min-width:0!important;
    padding:8px 6px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.025)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    color:#e5e7eb;
    overflow:hidden;
}
.ttl-attach-grid .ttl-trait-card:hover{
    border-color:rgba(250,204,21,.42)!important;
    transform:translateY(-1px);
}
.ttl-trait-icon-wrap{
    width:54px;
    height:54px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
}
.ttl-attach-grid .ttl-trait-card .ttl-trait-icon-wrap img{
    width:42px!important;
    height:42px!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    border-radius:0!important;
    background:transparent!important;
    filter:none!important;
}
.ttl-attach-grid .ttl-trait-card .ttl-library-name{
    min-height:28px;
    margin-top:6px;
    font-size:10px;
    line-height:1.25;
    text-align:center;
    color:#dbe3f0;
}
@media(max-width:860px){
    .ttl-attach-grid.ttl-grid-traits{grid-template-columns:repeat(4,minmax(0,1fr))}
    .ttl-trait-icon-wrap{width:50px;height:50px}
    .ttl-attach-grid .ttl-trait-card .ttl-trait-icon-wrap img{width:38px!important;height:38px!important}
}

/* Background presets */
.ttl-bg-modal{position:fixed;inset:0;z-index:100002;display:none;align-items:center;justify-content:center;padding:20px}
.ttl-bg-modal.is-open{display:flex}
.ttl-bg-modal-card{position:relative;z-index:1;width:min(820px,96vw);max-height:90vh;overflow:auto;border-radius:22px;padding:20px;background:linear-gradient(180deg,#121a2a 0%,#0b1220 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 80px rgba(0,0,0,.46)}
.ttl-bg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:8px}
.ttl-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,.025);color:#fff;cursor:pointer;transition:.16s ease}
.ttl-bg-card:hover{transform:translateY(-1px);border-color:rgba(250,204,21,.34)}
.ttl-bg-card.active{border-color:#facc15;box-shadow:0 0 0 1px rgba(250,204,21,.26) inset}
.ttl-bg-swatch{display:block;height:72px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.ttl-bg-name{font:800 12px/1.2 "Play",sans-serif;text-align:center}
@media(max-width:860px){.ttl-bg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Tier List 1.1.6 — nhập nhanh bằng JSON */
.ttl-btn-json{border-color:rgba(96,165,250,.28);background:linear-gradient(180deg,rgba(37,99,235,.24),rgba(30,64,175,.14))}
.ttl-json-modal{position:fixed;inset:0;z-index:100002;display:none;align-items:center;justify-content:center;padding:20px}
.ttl-json-modal.is-open{display:flex}
.ttl-json-modal-card{position:relative;z-index:1;width:min(780px,96vw);max-height:92vh;overflow:auto;border-radius:22px;padding:20px;background:linear-gradient(180deg,#121a2a 0%,#0b1220 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 80px rgba(0,0,0,.46)}
.ttl-json-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.ttl-json-head .ttl-row-modal-title{margin-bottom:8px}
.ttl-json-help{max-width:590px;color:#94a3b8;font-size:12px;line-height:1.55}
.ttl-json-help code{color:#fde68a;background:rgba(250,204,21,.06);padding:2px 5px;border-radius:5px}
.ttl-json-copy{flex:0 0 auto;height:40px}
.ttl-json-textarea{display:block;width:100%;min-height:300px;resize:vertical;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:#060d17;color:#e5eefc;padding:15px 16px;outline:none;box-shadow:none;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;tab-size:2}
.ttl-json-textarea:focus{border-color:rgba(96,165,250,.58);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.ttl-json-note{margin-top:10px;color:#7f8da3;font-size:11px;line-height:1.5}
.ttl-json-status{display:none;margin-top:12px;padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.5}
.ttl-json-status:not(:empty){display:block}
.ttl-json-status.is-success{background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.22);color:#a7f3d0}
.ttl-json-status.is-warning{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.22);color:#fde68a}
.ttl-json-status.is-error{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.22);color:#fecaca}
.ttl-json-status.is-working{background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.22);color:#bfdbfe}
@media(max-width:860px){.ttl-json-modal{padding:12px}.ttl-json-modal-card{padding:16px}.ttl-json-head{display:block}.ttl-json-copy{margin-top:12px}.ttl-json-textarea{min-height:260px}}

/* Insertion marker does not change the wrapping layout. */
.ttl-chip.ttl-drop-before::before,.ttl-chip.ttl-drop-after::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:#facc15;border-radius:3px;box-shadow:0 0 8px #facc15;pointer-events:none;z-index:5}
.ttl-chip.ttl-drop-before::before{left:-7px}
.ttl-chip.ttl-drop-after::after{right:-7px}