/* Team Board: one board card (js/team-board-grid.js). Scoped to #mod-teams.uss-tb-board so the Chase List page is untouched. */

/* The teams are the main column; the live preview sits beside them. */
#mod-teams.uss-tb-board .module-grid{grid-template-columns:minmax(0,1fr) clamp(420px,42%,560px)!important;align-items:start}
#mod-teams.uss-tb-board .uss-primary-setup-card{order:-1;min-width:0}
#mod-teams.uss-tb-board .uss-primary-preview-column{position:sticky;top:12px}
#mod-teams.uss-tb-board .uss-edit-teams-details,
#mod-teams.uss-tb-board .uss-primary-editor-field,
#mod-teams.uss-tb-board .uss-primary-editor-actions{display:none!important}
@media(max-width:1050px){#mod-teams.uss-tb-board .module-grid{grid-template-columns:1fr!important}#mod-teams.uss-tb-board .uss-primary-preview-column{position:static}}

/* League chips: one row instead of four big buttons. */
#mod-teams.uss-tb-board .league-controls{display:flex!important;flex-wrap:wrap;gap:6px!important}
#mod-teams.uss-tb-board .league-controls .btn{flex:0 0 auto!important;min-height:34px!important;padding:0 14px!important;border-radius:999px!important;font-size:13px!important}

/* Search, sort, add. */
#mod-teams.uss-tb-board .uss-primary-search-row{grid-template-columns:minmax(0,1fr) auto auto auto auto!important;align-items:center;gap:8px!important}
#mod-teams.uss-tb-board .uss-primary-setup-card{padding:14px!important;gap:10px!important}
#mod-teams.uss-tb-board .uss-primary-setup-card>div:first-child{display:none!important}
#mod-teams.uss-tb-board .uss-primary-search-field .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.tb-btn:hover{background:rgba(255,255,255,.12)}
.tb-btn.is-primary{border-color:transparent;background:linear-gradient(180deg,#e3b94a,#b98d24);color:#14110a}
.tb-btn.is-primary:hover{filter:brightness(1.08)}
.tb-btn:focus-visible,.tb-modes button:focus-visible,.tb-link:focus-visible,.tb-remove:focus-visible{outline:2px solid #7fb6ff;outline-offset:2px}

/* Mode switch. */
.tb-modes{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:3px;border-radius:12px;background:rgba(255,255,255,.06)}
.tb-modes button{min-height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#9aa5b4;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tb-modes button:hover{color:#fff}
.tb-modes button.is-active{background:#252b36;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.tb-mode-hint{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;border:1px solid rgba(127,182,255,.28);border-radius:10px;background:rgba(127,182,255,.08);color:#cfe3ff;font-size:12px}
.tb-mode-hint[hidden]{display:none}
.tb-link{padding:0;border:0;background:none;color:#7fb6ff;font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}

/* The board. */
.tb-board{display:grid;gap:12px;min-width:0}
.tb-board #teamsGrid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))!important;gap:8px!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:2px}

/* Tiles: the team color stays, with depth on top of it (a soft light from the top left, a shadow below, a lift on hover). */
#teamsGrid .team-editor-item>.item{position:relative;min-height:76px!important;padding:8px 4px 6px!important;gap:4px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 8px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -14px 22px rgba(0,0,0,.2)!important;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;overflow:hidden}
#teamsGrid .team-editor-item>.item::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%);pointer-events:none}
#teamsGrid .team-editor-item>.item:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -14px 22px rgba(0,0,0,.2)!important;filter:brightness(1.06)}
#teamsGrid .team-editor-item>.item:active{transform:translateY(0)}
/* Taken reads at a glance: the tile goes nearly black, the gloss goes, and a small TAKEN tag sits on it. */
#teamsGrid .team-editor-item>.item.taken{box-shadow:none!important;filter:grayscale(.55);border-color:#10141a!important;transform:none!important}
#teamsGrid .team-editor-item>.item.taken::after{z-index:2;background:linear-gradient(180deg,rgba(6,8,12,.78),rgba(6,8,12,.9))!important}
#teamsGrid .team-editor-item>.item.taken::before{content:attr(data-taken-label);position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#eef1f6;font-size:10px;font-weight:900;letter-spacing:.14em;line-height:1.2;pointer-events:none}
#teamsGrid .team-editor-item>.item.taken:hover{filter:grayscale(.55) brightness(1.15)}
/* The logo is drawn the way the board draws it: no circle behind it, a soft drop shadow, about 50px. */
#teamsGrid .team-editor-item>.item .team-logo-wrap{width:40px!important;height:40px!important;flex:0 0 40px!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
#teamsGrid .team-editor-item>.item .team-logo{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;object-fit:contain;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
#teamsGrid .team-editor-item>.item .team-logo-wrap.logo-fallback{display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
#teamsGrid .team-editor-item>.item .team-label{display:none!important}
/* The Ureka display theme's white and yellow logo silhouettes (css/app.css, body.theme-ureka), for the same teams. */
#teamsGrid[data-display-theme="ureka"] .team-logo.team-logo-theme-white{filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.28))!important;opacity:.98}
#teamsGrid[data-display-theme="ureka"] .team-logo.team-logo-theme-yellow{filter:brightness(0) saturate(100%) invert(64.8%) sepia(95.3%) saturate(2692%) hue-rotate(341.8deg) brightness(141.7%) contrast(122.4%) drop-shadow(0 1px 2px rgba(0,0,0,.28))!important;opacity:.98}
.tb-abbr{position:relative;z-index:1;font-size:11px;font-weight:900;letter-spacing:.07em;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.55);color:#fff}
#teamsGrid .team-editor-item>.item.taken .tb-abbr{opacity:.55}
@media(prefers-reduced-motion:reduce){#teamsGrid .team-editor-item>.item{transition:none}#teamsGrid .team-editor-item>.item:hover{transform:none}}
.tb-taken{display:grid;gap:6px}
.tb-taken:not(:has(#teamsSelected button)){display:none}
.tb-taken-label{color:#8d96a3;font-size:11px;font-weight:700;letter-spacing:.04em}
.tb-taken #teamsSelected{display:flex!important;flex-wrap:wrap;gap:6px;margin:0!important;min-height:0!important;padding:0!important}
.tb-taken #teamsSelected button.item{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:0!important;min-height:34px!important;height:34px!important;padding:0 12px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:999px!important;background:rgba(255,255,255,.07)!important;color:#d6dce6!important;font:inherit;font-size:12px!important;font-weight:800;letter-spacing:.06em;box-shadow:none!important;cursor:pointer}
.tb-taken #teamsSelected button.item:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
.tb-taken #teamsSelected button.item:focus-visible{outline:2px solid #7fb6ff;outline-offset:2px}
@media(max-width:899px){.tb-taken #teamsSelected button.item{min-height:44px!important;height:44px!important}}
.tb-top{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.tb-status{display:inline-flex;align-items:center;gap:7px;color:#b4bdca;font-size:12px}
.tb-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#7c8696}
.tb-status[data-live="1"]::before{background:#38df74;box-shadow:0 0 0 3px rgba(56,223,116,.15)}
.tb-modes-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tb-count{color:#b4bdca;font-size:12px}
.tb-more-wrap{position:relative}
.tb-more{min-width:40px;padding:0 12px;font-size:18px;line-height:1}
.tb-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;min-width:210px;padding:6px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#171a20;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.tb-menu[hidden]{display:none}
.tb-menu button{padding:10px 12px;border:0;border-radius:8px;background:none;color:#fff;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.tb-menu button:hover{background:rgba(255,255,255,.1)}

/* What shows on a tile depends on the mode. A tier badge always shows; the controls show in their own mode. */
#teamsGrid .top-team-toggle{opacity:0;pointer-events:none}
#teamsGrid .top-team-toggle[data-tier="1"],#teamsGrid .top-team-toggle[data-tier="2"]{opacity:1}
#teamsGrid[data-mode="tiers"] .top-team-toggle{opacity:1;pointer-events:auto}
#teamsGrid .team-color-input,#teamsGrid .team-color-reset,#teamsGrid .tb-remove{display:none}
#teamsGrid[data-mode="colors"] .team-color-input,#teamsGrid[data-mode="colors"] .team-color-reset{display:block}
#teamsGrid[data-mode="colors"] .team-color-reset{display:grid}
#teamsGrid[data-mode="colors"] .team-editor-item:not(:has(.team-color-input)){opacity:.45}
#teamsGrid[data-mode="edit"] .tb-remove{display:grid}
#teamsGrid[data-mode="edit"] .team-editor-item{cursor:grab}
#teamsGrid[data-mode="edit"] .team-editor-item.tb-dragging{opacity:.4}
#teamsGrid[data-mode="edit"] .team-editor-item.tb-drop-before{box-shadow:-4px 0 0 #7fb6ff}
.tb-remove{position:absolute;top:6px;right:6px;z-index:6;width:26px;height:26px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(10,12,16,.82);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.tb-remove:hover{background:#b3261e;border-color:#b3261e}
#teamsGrid[data-mode="edit"] .top-team-toggle{display:none}

/* Add spots. */
html.tb-composer-open{overflow:hidden}
.tb-composer-overlay{position:fixed;inset:0;z-index:10060;display:grid;place-items:center;padding:20px;background:rgba(3,6,11,.72);backdrop-filter:blur(6px)}
.tb-composer-overlay[hidden]{display:none!important}
.tb-composer{display:grid;gap:12px;width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#14171d;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.tb-composer-head{display:flex;align-items:center;justify-content:space-between}
.tb-composer-head h2{margin:0;font-size:18px}
.tb-composer-close{width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.tb-composer-tabs{display:flex;gap:4px;width:fit-content;padding:3px;border-radius:12px;background:rgba(255,255,255,.06)}
.tb-composer-tabs button{min-height:34px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:#9aa5b4;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tb-composer-tabs button[aria-pressed="true"]{background:#252b36;color:#fff}
.tb-composer-pane{display:grid;gap:6px}
.tb-composer-pane[hidden]{display:none}
.tb-composer-label{color:#9aa5b4;font-size:12px;font-weight:700}
.tb-composer-input{width:100%;padding:11px 13px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#0c0e12;color:#fff;font:inherit;font-size:14px;line-height:1.5;box-sizing:border-box}
.tb-composer-input:focus{outline:2px solid #7fb6ff;outline-offset:1px}
.tb-composer-text{min-height:130px;resize:vertical}
.tb-composer-count{min-height:18px;margin:0;color:#9aa5b4;font-size:12px}
.tb-composer-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow:auto}
.tb-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 6px 5px 11px;border-radius:999px;background:rgba(36,193,122,.16);color:#9be7c2;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-chip.is-skipped{padding:5px 11px;border:1px dashed rgba(255,255,255,.28);background:none;color:#7c8696;text-decoration:line-through}
.tb-chip-x{width:20px;height:20px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:inherit;font-size:14px;line-height:1;cursor:pointer}
.tb-composer-foot{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:899px){.tb-btn,.tb-modes button,.tb-composer-tabs button{min-height:44px}.tb-remove{width:34px;height:34px}}

/* ===== Chase List: the same board card (js/chase-board-grid.js), scoped to #mod-chase ===== */
#mod-chase.uss-tb-board .module-grid{grid-template-columns:minmax(0,1fr) clamp(420px,42%,560px)!important;align-items:start}
#mod-chase.uss-tb-board .uss-primary-setup-card{order:-1;min-width:0;padding:14px!important;gap:10px!important;border-radius:16px!important}
#mod-chase.uss-tb-board .uss-primary-preview-column{position:sticky;top:12px}
#mod-chase.uss-tb-board .uss-primary-board-preview{border-radius:16px!important}
#mod-chase.uss-tb-board .uss-edit-chase-details,
#mod-chase.uss-tb-board .uss-primary-editor-field,
#mod-chase.uss-tb-board .uss-primary-editor-actions,
#mod-chase.uss-tb-board .tb-header{display:none!important}
@media(max-width:1050px){#mod-chase.uss-tb-board .module-grid{grid-template-columns:1fr!important}#mod-chase.uss-tb-board .uss-primary-preview-column{position:static}}

/* The saved Chase List picker: one row, select then Load and Save New. */
#mod-chase.uss-tb-board .tb-top{align-items:flex-start}
#mod-chase.uss-tb-board .uss-chase-library-slot{flex:1 1 360px;min-width:0}
#mod-chase.uss-tb-board .uss-chase-library-slot .uss-primary-section-label{display:none!important}
#mod-chase.uss-tb-board .uss-chase-library-slot>[data-ux-break-library="workspace"]{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;width:100%!important}
#mod-chase.uss-tb-board .uss-chase-library-slot .uss-ux-break-picker{flex:1 1 180px;grid-column:auto!important;min-width:0!important}
#mod-chase.uss-tb-board .uss-chase-library-slot [data-ux-break-library="workspace"]>.btn{flex:0 0 auto!important;width:auto!important;min-height:38px!important;padding:0 14px!important}
#mod-chase.uss-tb-board .uss-chase-library-slot .uss-ux-break-picker{display:block!important}
#mod-chase.uss-tb-board .uss-chase-library-slot .uss-ux-break-picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mod-chase.uss-tb-board .uss-chase-library-slot .uss-ux-break-picker select{width:100%;min-height:38px}
#mod-chase.uss-tb-board .uss-primary-search-row{grid-template-columns:minmax(0,1fr) auto auto auto!important;align-items:center;gap:8px!important}
#mod-chase.uss-tb-board .uss-primary-search-field .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The spots. */
#chaseGrid.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:8px!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:2px}
#chaseGrid .chase-editor-item>.item{position:relative;min-height:64px!important;padding:8px 10px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.18)!important;font-size:13px!important;font-weight:800;line-height:1.25;text-align:center;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -14px 22px rgba(0,0,0,.2)!important;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
#chaseGrid .chase-editor-item>.item:not(.chase-blackout)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%);pointer-events:none}
#chaseGrid .chase-editor-item>.item:not(.chase-blackout):hover{transform:translateY(-2px);filter:brightness(1.06)}
#chaseGrid .chase-editor-item>.item.chase-blackout{box-shadow:none!important;border-color:#10141a!important;filter:grayscale(.55)}
/* Leave room for a tier badge so it never sits on the spot's name. */
#chaseGrid .chase-editor-item:has(.top-chaser-toggle[data-tier="1"])>.item,#chaseGrid .chase-editor-item:has(.top-chaser-toggle[data-tier="2"])>.item{padding-right:34px!important}
@media(prefers-reduced-motion:reduce){#chaseGrid .chase-editor-item>.item{transition:none}#chaseGrid .chase-editor-item>.item:hover{transform:none!important}}

/* What shows on a spot depends on the mode: a tier badge always, the star in Tiers mode, the x in Edit spots. */
#chaseGrid .top-chaser-toggle{opacity:0;pointer-events:none}
#chaseGrid .top-chaser-toggle[data-tier="1"],#chaseGrid .top-chaser-toggle[data-tier="2"]{opacity:1}
#chaseGrid[data-mode="tiers"] .top-chaser-toggle{opacity:1;pointer-events:auto}
#chaseGrid[data-mode="edit"] .top-chaser-toggle{display:none}
#chaseGrid .tb-remove{display:none}
#chaseGrid[data-mode="edit"] .tb-remove{display:grid}
#chaseGrid[data-mode="edit"] .chase-editor-item{cursor:grab}
#chaseGrid[data-mode="edit"] .chase-editor-item.tb-dragging{opacity:.4}
#chaseGrid[data-mode="edit"] .chase-editor-item.tb-drop-before{box-shadow:-4px 0 0 #7fb6ff}

/* ===== Phone: the board card uses the whole width ===== */
@media(max-width:899px){
  #mod-teams.uss-tb-board .uss-primary-setup-card,#mod-chase.uss-tb-board .uss-primary-setup-card{padding:10px!important;gap:8px!important;border-radius:14px!important}
  /* search first, then the buttons share the next row */
  #mod-teams.uss-tb-board .uss-primary-search-row,#mod-chase.uss-tb-board .uss-primary-search-row{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important}
  #mod-teams.uss-tb-board .uss-primary-search-row .tb-btn,#mod-teams.uss-tb-board .uss-primary-search-row #sortTeams,#mod-chase.uss-tb-board .uss-primary-search-row .tb-btn{flex:1 1 auto;min-height:44px}
  #mod-teams.uss-tb-board .uss-primary-search-row .tb-more-wrap,#mod-chase.uss-tb-board .uss-primary-search-row .tb-more-wrap{flex:0 0 auto}
  /* row 1: search and Add spots; row 2: the smaller actions share the width */
  #mod-teams.uss-tb-board .uss-primary-search-row .uss-primary-search-field,#mod-chase.uss-tb-board .uss-primary-search-row .uss-primary-search-field{flex:1 1 190px;min-width:190px;order:1}
  #mod-teams.uss-tb-board .uss-primary-search-row #tbAddSpots,#mod-chase.uss-tb-board .uss-primary-search-row #tcAddSpots{flex:0 0 auto;order:2;padding:0 16px}
  #mod-teams.uss-tb-board .uss-primary-search-row #sortTeams,#mod-teams.uss-tb-board .uss-primary-search-row #tbResetTaken,#mod-chase.uss-tb-board .uss-primary-search-row #tcResetPurchased{order:3;flex:1 1 0;white-space:nowrap;min-width:0}
  #mod-teams.uss-tb-board .uss-primary-search-row .tb-more-wrap,#mod-chase.uss-tb-board .uss-primary-search-row .tb-more-wrap{order:3}
  #mod-teams.uss-tb-board .uss-primary-search-row .tb-more,#mod-chase.uss-tb-board .uss-primary-search-row .tb-more{min-height:44px}
  .tb-top{gap:4px 10px}
  .tb-status{font-size:11px}
  #mod-teams.uss-tb-board .uss-primary-setup-card .uss-primary-section-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #mod-teams.uss-tb-board .league-controls{display:flex!important;flex-wrap:nowrap;gap:5px!important;padding:0!important;border:0!important;background:none!important;width:100%}
  #mod-teams.uss-tb-board .league-controls .btn{flex:1 1 0!important;min-width:0!important;min-height:44px!important;padding:0 6px!important;font-size:12px!important;white-space:nowrap}
  #mod-teams.uss-tb-board .tb-top>div:first-child{flex:1 1 100%}
  /* modes: one row, equal buttons, pinned under the menu button while the spots scroll */
  .tb-modes-row{position:sticky;top:58px;z-index:20;flex-direction:column;align-items:stretch;gap:4px;margin:0 -2px;padding:6px 2px;background:#12151b;border-radius:12px}
  .tb-modes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
  .tb-modes button{min-height:44px;padding:0 6px;font-size:13px;white-space:nowrap}
  .tb-count{text-align:right}
  #teamsGrid.grid,.tb-board #teamsGrid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))!important;gap:6px!important}
  #chaseGrid.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:6px!important}
  .tb-remove{width:34px;height:34px}
  #teamsSearch,#chaseSearch{min-height:44px!important}
  #mod-chase.uss-tb-board .uss-chase-library-slot select,#mod-chase.uss-tb-board .uss-chase-library-slot [data-ux-break-library="workspace"]>.btn{min-height:44px!important}
}

/* ===== Is the stream showing this board? ===== */
.tb-status[data-state="synced"]::before{background:#38df74;box-shadow:0 0 0 3px rgba(56,223,116,.15)}
.tb-status[data-state="behind"]{color:#f0d68a}
.tb-status[data-state="behind"]::before{background:#e5b839;box-shadow:0 0 0 3px rgba(229,184,57,.18)}
.tb-sync{min-height:34px;padding:0 14px;border:1px solid transparent;border-radius:10px;background:linear-gradient(180deg,#e3b94a,#b98d24);color:#14110a;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.tb-sync[hidden]{display:none}
.tb-sync:disabled{opacity:.7;cursor:default}
.tb-sync:focus-visible{outline:2px solid #7fb6ff;outline-offset:2px}
@media(max-width:899px){.tb-sync{min-height:44px}}

/* ===== Undo ===== */
.uss-undo-bar{position:fixed;left:50%;bottom:calc(var(--uss-statusbar-height,64px) + 14px);z-index:10050;display:flex;align-items:center;gap:6px;max-width:min(560px,calc(100vw - 24px));padding:6px 6px 6px 16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:#1c2028;box-shadow:0 14px 40px rgba(0,0,0,.55);color:#f4f6f8;transform:translateX(-50%)}
.uss-undo-bar[hidden]{display:none!important}
.uss-undo-text{flex:1 1 auto;min-width:0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.uss-undo-btn{min-height:38px;padding:0 14px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.uss-undo-btn:hover{background:rgba(255,255,255,.22)}
.uss-undo-btn[hidden]{display:none}
.uss-undo-close{width:38px;height:38px;border:0;border-radius:10px;background:none;color:#aab4c2;font-size:20px;line-height:1;cursor:pointer}
.uss-undo-close:hover{background:rgba(255,255,255,.1);color:#fff}
.uss-undo-btn:focus-visible,.uss-undo-close:focus-visible{outline:2px solid #7fb6ff;outline-offset:2px}
@media(max-width:899px){.uss-undo-btn,.uss-undo-close{min-height:44px;height:44px}}