/* ============================================================
   BASE & TOKENS
   ============================================================ */
:root {
  --bg-0: #050d1c;
  --bg-1: #0a1a33;
  --bg-2: #0f2447;
  --bg-3: #16305a;
  --bg-4: #1e3d70;
  --line: #22467e;
  --line-strong: #2f5aa0;
  --ink-1: #e8f0ff;
  --ink-2: #b8c7e0;
  --ink-3: #7e93b5;
  --ink-4: #4d6389;
  --team-a: #22d3ee;
  --team-a-dim: #22d3ee40;
  --team-b: #c084fc;
  --team-b-dim: #c084fc40;
  --accent: #38bdf8;
  --success: #22c55e;
  --warn: #facc15;
  --danger: #ef4444;
  --pitch: #0d5a2e;
  --pitch-line: #7ee0aa;
  --shadow: 0 4px 20px rgba(0,0,0,.4);
  --radius: 12px;
  --radius-sm: 8px;
  --grid-color: rgba(56, 189, 248, 0.06);

  /* Club branding. Stock values here are the unbranded fallback; a club with a
     saved profile overrides these (plus --accent, --line, --line-strong and
     --grid-color) inline on .app via BrandingTheme.ToCssVars(). A slot the club
     hasn't set simply keeps its value below. */
  --brand-primary: #38bdf8;
  --brand-secondary: #22467e;
  --brand-tertiary: #2f5aa0;
}
/* Scoped to .rb-shell so this stylesheet, loaded globally from index.html,
   does not clobber layout/colors/scroll on non-ReportBuilder pages. */
.rb-shell,
.rb-shell *,
.rb-shell *::before,
.rb-shell *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rb-shell {
  height: 100%;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.rb-shell button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
.rb-shell input, .rb-shell select { font: inherit; color: inherit; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  background: radial-gradient(ellipse at top, #123063 0%, var(--bg-0) 60%);
}
/* Render host (ReadOnly): no TopBar, so collapse the row template and let
   the app fill the parent flex container instead of the whole viewport —
   the /reports/render page already sits inside a bounded flex column. */
.app.readonly {
  grid-template-rows: 1fr;
  height: 100%;
}

/* --------- Top bar --------- */
.topbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0e2551 0%, #0a1a33 100%);
  gap: 20px;
  z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: 1px;
  font-size: 15px;
}
.brand .u { color: #fff; }
.brand .pap { color: var(--accent); }
.brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.crumbs {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-3); font-size: 12px;
}
.crumbs .sep { color: var(--ink-4); }
.crumbs .current { color: var(--ink-1); font-weight: 600; }
.report-name {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--ink-1);
  font-weight: 600;
  width: 240px;
  transition: all .15s;
}
.report-name:hover, .report-name:focus {
  border-color: var(--line-strong);
  background: rgba(255,255,255,.03);
  outline: none;
}
.toolbar { display: flex; gap: 8px; margin-left: auto; }
.tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
}
.tbtn:hover { background: var(--bg-3); color: var(--ink-1); border-color: var(--line-strong); }
.tbtn.primary {
  background: linear-gradient(180deg, #0284c7, #0369a1);
  color: white;
  border-color: #0ea5e9;
  box-shadow: 0 2px 8px rgba(2, 132, 199, .3);
}
.tbtn.primary:hover { background: linear-gradient(180deg, #0ea5e9, #0284c7); }
.tbtn .ic { width: 14px; height: 14px; }
.mode-switch {
  display: inline-flex;
  background: var(--bg-1);
  border-radius: 6px;
  padding: 3px;
  border: 1px solid var(--line);
}
.mode-switch button {
  padding: 5px 12px;
  border-radius: 4px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.mode-switch button.active {
  background: var(--accent);
  color: var(--bg-0);
}
.subject-switch {
  display: inline-flex;
  background: var(--bg-1);
  border-radius: 6px;
  padding: 3px;
  border: 1px solid var(--line);
  margin-right: 4px;
}
.subject-switch button {
  padding: 5px 10px;
  border-radius: 4px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.subject-switch button:hover { color: var(--ink-1); }
.subject-switch button.active {
  background: var(--accent);
  color: var(--bg-0);
}

/* --------- Main layout --------- */
.main {
  display: grid;
  grid-template-columns: 300px 1fr 380px;
  overflow: hidden;
}
.main.preview { grid-template-columns: 1fr; }
.main.preview .side { display: none; }
.main.preview .canvas-wrap { grid-column: 1; }

.side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.side.right { border-right: none; border-left: 1px solid var(--line); }

.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-track { background: transparent; }
.side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.side::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

.side-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0;
  background: var(--bg-1);
  z-index: 5;
}
.side-header h3 {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
}

/* --------- Library --------- */
.lib-search {
  margin: 12px 16px 4px;
  position: relative;
}
.lib-search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 7px 10px 7px 28px;
  border-radius: 6px;
  color: var(--ink-1);
  font-size: 12px;
}
.lib-search input:focus { outline: none; border-color: var(--accent); }
.lib-search::before {
  content: "";
  position: absolute; left: 9px; top: 9px;
  width: 12px; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237e93b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}

.lib-category {
  padding: 12px 12px 8px;
}
.lib-category h4 {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 4px;
  margin-bottom: 6px;
}
.lib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.lib-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  user-select: none;
}
.lib-item:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lib-item.dragging { opacity: 0.4; cursor: grabbing; }
.lib-item .ico {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.lib-item .lbl {
  font-size: 10.5px;
  color: var(--ink-2);
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
}

/* --------- Canvas --------- */
.canvas-wrap {
  overflow: auto;
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,26,51,.9) 0%, rgba(5,13,28,1) 100%);
}
.canvas-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.canvas-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
.canvas-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

.canvas-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 36, 71, .6) 0%, transparent 100%);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
}
.match-context {
  display: flex; align-items: center; gap: 14px;
}
.match-context .badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 12px;
  border: 2px solid;
}
.match-context .score {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.match-context .meta {
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.3;
}
.match-context .meta .comp {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}
.canvas-tools {
  display: flex; align-items: center; gap: 6px;
}
.canvas-tools .zoom-lvl {
  min-width: 42px; text-align: center;
  color: var(--ink-2); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tiny-btn {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tiny-btn:hover { background: var(--bg-3); color: var(--ink-1); }
.tiny-btn.active { background: var(--accent); color: var(--bg-0); border-color: var(--accent); }

.canvas-viewport {
  padding: 24px;
  min-height: 100%;
  display: flex;
  justify-content: center;
}
.canvas {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%),
    var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 60px rgba(56, 189, 248, .04);
  transform-origin: top center;
  transition: transform .2s;
}
.canvas.show-grid {
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}
.canvas.drop-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .12), var(--shadow);
}
.drop-ghost {
  position: absolute;
  background: rgba(56, 189, 248, .16);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 100;
}

/* --------- Widget --------- */
.widget {
  position: absolute;
  background: linear-gradient(180deg, #14315c 0%, #0f2447 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* overflow:visible so selection overlays (width picker at top:-28px,
     resize handles at top/left:-5px) escape the widget's rounded box.
     Actual widget content stays clipped by .widget-body's own
     overflow:hidden below. */
  overflow: visible;
  transition: box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
}
/* Keep the widget's rounded background intact even when children escape. */
.widget > .widget-head { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); overflow: hidden; }
.widget.no-chrome > .widget-body { border-radius: var(--radius); }
.widget:not(.no-chrome) > .widget-body { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.widget:hover:not(.selected) {
  border-color: var(--line-strong);
}
.widget.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .35);
  z-index: 5;
}
.widget-head {
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
  cursor: move;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.widget.no-chrome .widget-head { display: none; }
.widget-head .actions { display: none; gap: 4px; }
.widget.selected .widget-head .actions { display: flex; }
.widget-head .actions button {
  color: var(--ink-3);
  padding: 2px 4px;
  border-radius: 3px;
}
.widget-head .actions button:hover { background: rgba(255,255,255,.08); color: var(--ink-1); }
.widget-body {
  flex: 1;
  padding: 8px 12px 12px;
  overflow: hidden;
  position: relative;
}
.widget.no-chrome .widget-body { padding: 0; }

/* Resize handles */
.resize {
  position: absolute;
  background: var(--accent);
  border: 1.5px solid var(--bg-0);
  border-radius: 2px;
  width: 8px; height: 8px;
  z-index: 6;
  display: none;
}
.widget.selected .resize { display: block; }
.preview-mode .resize { display: none !important; }
/* Preview mode = "what the finished report looks like". Hide the whole
   chrome header — name label, data-source config chip, duplicate/delete —
   and let the body claim the full rounded rectangle, mirroring how the
   NoChrome widgets already render. */
.preview-mode .widget > .widget-head { display: none !important; }
.preview-mode .widget:not(.no-chrome) > .widget-body { border-radius: var(--radius); }
.resize.n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.resize.s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.resize.e  { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.resize.w  { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }
.resize.ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize.nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize.se { bottom: -5px; right: -5px; cursor: se-resize; }
.resize.sw { bottom: -5px; left: -5px; cursor: sw-resize; }

/* --------- Properties Panel --------- */
.props-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.props-tabs button {
  flex: 1;
  padding: 10px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.props-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(56,189,248,.05);
}
.props-body { padding: 14px 16px 40px; }
.prop-group {
  margin-bottom: 20px;
}
.prop-group h4 {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prop-group h4::before {
  content: "";
  width: 3px; height: 12px;
  background: var(--accent);
  border-radius: 2px;
}
.prop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}
.prop-row label {
  color: var(--ink-2);
  font-size: 12px;
}
.prop-row .val {
  color: var(--ink-1);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}
.prop-input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-1);
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 12px;
  width: 100%;
}
.prop-input:focus { outline: none; border-color: var(--accent); }
.prop-select { padding-right: 20px; }
.mini-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.mini-row label {
  color: var(--ink-2);
  font-size: 12px;
}
.mini-row .color-swatch {
  justify-self: start;
}
.color-swatch {
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 2px solid var(--line);
  cursor: pointer;
  position: relative;
}
.color-swatch input {
  opacity: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  position: absolute; inset: 0;
}
.team-picker {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 12px;
}
.team-picker-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.team-picker-head .badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  border: 2px solid;
}
.team-picker-head input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink-1);
  font-weight: 700;
  padding: 4px;
  border-radius: 4px;
}
.team-picker-head input:hover { background: rgba(255,255,255,.03); }
.team-picker-head input:focus { outline: none; background: rgba(255,255,255,.06); }
.color-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.color-row .sw {
  aspect-ratio: 1;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s;
}
.color-row .sw:hover { transform: scale(1.1); }
.color-row .sw.selected { border-color: white; }

.toggle {
  position: relative;
  width: 34px; height: 18px;
  background: var(--bg-3);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform .15s;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(16px); }

.empty-props {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
}
.empty-props .em-ico {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  opacity: 0.4;
}

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip.a { background: var(--team-a-dim); color: var(--team-a); border-color: var(--team-a); }
.chip.b { background: var(--team-b-dim); color: var(--team-b); border-color: var(--team-b); }

/* ============================================================
   WIDGET-SPECIFIC STYLES
   ============================================================ */

/* --- Match Header ---
   Container-query sized: everything inside the header keys off .w-matchheader's
   own inline size, so the widget stays legible from width-1 (≈204px) to width-5
   (≈1084px). Below ~460px we drop the min-widths and shrink typography; below
   ~300px we stack the team + score rows so a full width-1 widget still reads.
*/
.w-matchheader {
  container-type: inline-size;
  container-name: matchheader;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 clamp(8px, 3cqi, 32px);
  gap: clamp(6px, 2cqi, 24px);
  background:
    radial-gradient(ellipse at center, rgba(56,189,248,.08) 0%, transparent 70%),
    linear-gradient(180deg, #0e2551 0%, #071734 100%);
  overflow: hidden;
}
/* Each team pinned to its outer edge — left team hugs the left, right team
   hugs the right — filling the whole widget width symmetrically. */
.w-matchheader .team {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2cqi, 20px);
  min-width: 0;
  justify-content: flex-start;
}
/* row-reverse puts the crest on the visual RIGHT (outer side). In a
   reversed row `flex-start` also aligns to the visual RIGHT, so the
   right team's contents sit flush against the right edge — mirroring
   the left team's flush-left placement. */
.w-matchheader .team.right {
  justify-content: flex-start;
  flex-direction: row-reverse;
}
.w-matchheader .team .badge-lg {
  width: clamp(44px, 14cqi, 120px);
  height: clamp(44px, 14cqi, 120px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: clamp(16px, 5cqi, 44px);
  border: 3px solid;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.w-matchheader .team .info { line-height: 1.2; min-width: 0; overflow: hidden; }
.w-matchheader .team.right .info { text-align: right; }
.w-matchheader .team .name {
  font-size: clamp(13px, 3.4cqi, 28px);
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-matchheader .team .sub {
  font-size: clamp(9px, 1.6cqi, 12px);
  color: var(--ink-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-matchheader .center {
  text-align: center;
  padding: 0 clamp(6px, 3cqi, 36px);
  min-width: 0;
  white-space: nowrap;
}
.w-matchheader .status-pill {
  display: inline-block;
  padding: 3px clamp(6px, 1.4cqi, 12px);
  border-radius: 10px;
  background: rgba(34, 197, 94, .15);
  color: var(--success);
  border: 1px solid var(--success);
  font-size: clamp(8px, 1.4cqi, 11px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.w-matchheader .score-big {
  font-size: clamp(22px, 7.5cqi, 64px);
  font-weight: 900;
  letter-spacing: clamp(1px, 0.4cqi, 3px);
  line-height: 1;
  white-space: nowrap;
}
.w-matchheader .score-big .dash {
  color: var(--ink-3);
  margin: 0 clamp(4px, 1.4cqi, 12px);
  font-weight: 300;
}
.w-matchheader .date {
  font-size: clamp(9px, 1.6cqi, 12px);
  color: var(--ink-3);
  margin-top: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-team score number sits under each crest. Hidden by default (the
   centred score-big does the job at width 2+); shown by the narrow rule
   below so the tiny widget still communicates the scoreline. */
.w-matchheader .team .score-solo { display: none; }

/* Narrow widgets (width 1 ≈204px): drop the crowded central column entirely
   and stack each side's score under its own crest. The pill/date/meta rows
   are the first things to go — at this size, the essentials are the two
   crests, the team names, and the score. Sizes are absolute (not cqi) so
   the crests fill the available column instead of scaling down toward
   nothing at this end of the range. */
@container matchheader (max-width: 320px) {
  .w-matchheader {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    padding: 10px 8px;
    gap: 6px;
    align-items: center;
    justify-items: center;
  }
  .w-matchheader .team,
  .w-matchheader .team.right {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    width: 100%;
  }
  .w-matchheader .team .info,
  .w-matchheader .team.right .info {
    text-align: center;
    width: 100%;
  }
  .w-matchheader .team .badge-lg {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }
  .w-matchheader .team .name {
    font-size: 15px;
  }
  .w-matchheader .team .sub { display: none; }
  .w-matchheader .center { display: none; }
  .w-matchheader .team .score-solo {
    display: block;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    margin-top: 4px;
  }
}

/* --- Team header / Player header ---
   Single-subject variants of the match header. Share the badge + info
   layout on the left; no centred score column because there's only one
   entity to describe. */
.w-teamheader,
.w-playerheader {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 0 28px;
  background:
    radial-gradient(ellipse at left center, rgba(56,189,248,.08) 0%, transparent 70%),
    linear-gradient(180deg, #0e2551 0%, #071734 100%);
}
.w-teamheader .badge-lg,
.w-playerheader .badge-lg {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 24px;
  border: 3px solid;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
  flex-shrink: 0;
}
/* Uploaded club badge. Sits inside the same circular .badge-lg frame as the
   letter fallback, so a wide or tall crest is contained rather than cropped. */
.w-teamheader .badge-lg img,
.w-playerheader .badge-lg img,
.w-matchheader .team .badge-lg img,
.w-teambadge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
/* Player headshots are the exception: they're portrait crops of a face, so
   `contain` would letterbox them inside the circle. Cover + top-biased
   focal point keeps the head in frame. */
.w-playerheader .badge-lg.has-photo img {
  object-fit: cover;
  object-position: center top;
}
.w-teamheader .info,
.w-playerheader .info {
  line-height: 1.25;
  min-width: 0;
}
.w-teamheader .name,
.w-playerheader .name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w-teamheader .sub,
.w-playerheader .sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Stat tile --- */
.w-stattile {
  height: 100%;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.w-stattile .stattile-title {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: center;
  width: 100%;
  line-height: 1.2;
}
.w-stattile .stattile-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 1;
  justify-content: center;
}
.w-stattile .stattile-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.w-stattile .stattile-team-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.w-stattile .stattile-team-value {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* --- Stat Tile builder editor (compact modal editor) --- */
.sb-stat-tile-editor .sb-stat-search {
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--surface-1, rgba(255,255,255,.04));
  color: var(--ink-1, #e2e8f0);
  border: 1px solid var(--border-1, rgba(255,255,255,.1));
  border-radius: 6px;
  font-size: 13px;
}
.sb-stat-tile-editor .sb-stat-search:focus {
  outline: none;
  border-color: var(--accent, #38bdf8);
}
.sb-stat-tile-editor .sb-stat-category {
  margin-top: 12px;
}
.sb-stat-tile-editor .sb-stat-category-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.sb-stat-tile-editor .sb-filter-group {
  margin-top: 10px;
}
.sb-stat-tile-editor .sb-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* --- Comparison / Head-to-head bar --- */
.w-headtohead { height: 100%; padding: 12px 4px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.h2h-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.h2h-row .lab {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 2px;
}
.h2h-row .va, .h2h-row .vb {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.h2h-row .va { color: var(--team-a); text-align: right; }
.h2h-row .vb { color: var(--team-b); text-align: left; }
.h2h-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-3);
  display: flex;
  overflow: hidden;
}
.h2h-bar .a { background: linear-gradient(90deg, var(--team-a) 0%, #67e8f9 100%); }
.h2h-bar .b { background: linear-gradient(90deg, #f0abfc 0%, var(--team-b) 100%); }

/* --- PassNetwork widget ---
   Flex column so the pitch cell can flex to whatever height the widget-body
   leaves after the title. The pitch cell reserves ~80% of the widget's inner
   box and the SVG scales inside it with `preserveAspectRatio="xMidYMid meet"`
   so the pitch stays undistorted no matter how the user resizes the widget. */
.pn-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.pn-title {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-1);
  text-align: center;
  padding: 0 0 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.pn-title-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
}
.pn-pitch-wrap {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Small uniform breathing room so the pitch nearly fills the widget body.
     Combined with the WidgetDefinition.AspectRatio hint (which scales the
     widget's row-count when width changes) this keeps the pitch at roughly
     80% of the widget box at every width. */
  padding: 6px 8px;
  box-sizing: border-box;
}
.pn-pitch-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* --- Statistics Builder — PassNetwork editor ---
   The compact form uses a single-column body (editor only) instead of the
   three-column tree/editor/preview layout of the standard wizard. */
.sb-body-compact { grid-template-columns: 1fr !important; }
.sb-editor-wide { padding: 20px 24px; }

.pn-editor { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; }
.pn-editor-section { display: flex; flex-direction: column; gap: 6px; }
.pn-editor-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.pn-editor-hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.pn-editor-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pn-chip {
  background: var(--bg-1);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pn-chip:hover {
  background: var(--bg-2);
  color: var(--ink-1);
}
.pn-chip.on {
  background: color-mix(in oklab, var(--accent) 20%, transparent);
  border-color: var(--accent);
  color: var(--ink-1);
}
.pn-chip.small { padding: 4px 10px; font-size: 11px; }

/* Custom minute-range inputs shown under the Time period chip row when the
   author picks "Minute range". Two labelled number inputs sit inline with the
   same visual weight as the pn-editor-hint text above them. */
.pn-editor-range {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.pn-editor-range label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.pn-editor-range input[type="number"] {
  width: 72px;
  padding: 6px 8px;
  background: var(--bg-1);
  color: var(--ink-1);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 12px;
}
.pn-editor-range span { color: var(--ink-3); }

/* Appearance controls — two-column grid of colour swatches + sliders. */
.app-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px;
  margin-top: 8px;
}
.app-editor-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.app-editor-cell span { font-weight: 600; }
.app-editor-cell input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.app-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-color-row input[type="color"] {
  width: 48px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-1);
  padding: 2px;
  cursor: pointer;
}

/* --- Chart / general --- */
.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  text-align: center;
  padding: 4px 0 8px;
}
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 0;
  font-size: 11px;
  color: var(--ink-2);
}
.chart-legend .item {
  display: inline-flex; align-items: center; gap: 5px;
}
.chart-legend .dot {
  width: 8px; height: 8px; border-radius: 50%;
}

/* --- Line-up --- */
.w-lineup { height: 100%; display: flex; flex-direction: column; }
.w-lineup .team-tag {
  font-weight: 700; font-size: 12px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 4px;
}

/* --- Event feed --- */
.w-eventfeed { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.w-eventfeed table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.w-eventfeed th, .w-eventfeed td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.w-eventfeed th {
  color: var(--ink-4);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  position: sticky; top: 0;
  background: var(--bg-2);
}
.w-eventfeed tr.hl { background: rgba(56,189,248,.08); border-left: 3px solid var(--accent); }
.w-eventfeed td .ev { font-weight: 700; }
.w-eventfeed td .ev.g { color: var(--success); }
.w-eventfeed td .ev.f { color: var(--warn); }
.w-eventfeed td .ev.c { color: var(--accent); }
.w-eventfeed .body-scroll { overflow-y: auto; flex: 1; }

/* --- Top performers --- */
.w-topplayers { height: 100%; overflow-y: auto; }
.w-topplayers .row {
  display: grid;
  grid-template-columns: 26px 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 12px;
}
.w-topplayers .rank {
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 700;
}
.w-topplayers .av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #334155, #1e293b);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2);
  border: 2px solid;
}
.w-topplayers .name { font-weight: 600; color: var(--ink-1); }
.w-topplayers .val {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

/* --- Text/Title block (used as section headers/descriptions) --- */
.w-textblock {
  height: 100%;
  padding: 14px 20px;
  background:
    linear-gradient(90deg, rgba(56,189,248,.10) 0%, transparent 60%),
    linear-gradient(180deg, #10294f 0%, #0c1f3c 100%);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.w-textblock h1 {
  color: var(--ink-1);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.w-textblock h1::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
}
.w-textblock p {
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 6px;
  max-width: 900px;
}
/* When a text block widget is not selected we skip the standard head so it reads as a section header */
.widget.textblock-mode .widget-head { display: none; }
.widget.textblock-mode .widget-body { padding: 0; }

/* --- Modal --- */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 500;
  display: none;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-back.open { display: flex; }
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 460px;
  max-width: 90vw;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 {
  font-size: 14px;
  font-weight: 700;
}
.modal-body { padding: 20px; }
.modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* --- Notification toast --- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-3);
  border: 1px solid var(--accent);
  color: var(--ink-1);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .3s ease-out;
  z-index: 1000;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { transform: translateX(-50%) translateY(0); }

.tm-group + .tm-group { margin-top: 18px; }
.tm-group-hd {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  margin-bottom: 8px;
  padding-left: 2px;
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 8px;
}
.template-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.template-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: all .15s;
}
.template-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.template-card .tc-preview {
  height: 100px;
  border-radius: 4px;
  background: var(--bg-1);
  margin-bottom: 8px;
  padding: 6px;
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
}
.template-card .tp {
  background: linear-gradient(135deg, #22467e, #16305a);
  border-radius: 2px;
}
.template-card h5 { font-size: 12px; font-weight: 700; }
.template-card p { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.data-source-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(56,189,248,.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgba(56,189,248,.3);
}

.preview-mode .canvas {
  border-color: transparent;
  background: transparent;
  background-image: none !important;
}
.preview-mode .widget-head { border-bottom-color: rgba(255,255,255,.03); }

/* ============================================================
   REPORT SCOPE BAR
   ============================================================ */
.report-scope-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.scope-title {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-right: 8px;
  border-right: 1px solid var(--line);
  margin-right: 4px;
}
.scope-title svg { color: var(--accent); }
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  background: linear-gradient(180deg, #15355e 0%, #0e2244 100%);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: all .15s;
  min-width: 0;
}
.scope-chip:hover {
  background: linear-gradient(180deg, #1a3f6e 0%, #112b52 100%);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(56,189,248,.2);
  transform: translateY(-1px);
}
.scope-chip .chip-ico {
  width: 16px; height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.scope-chip .chip-content {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.scope-chip .chip-count {
  color: var(--ink-1);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.scope-chip .chip-lbl {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.scope-chip .chip-detail {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  border-left: 1px solid var(--line);
  padding-left: 6px;
  margin-left: 2px;
}
.scope-chip .chip-caret {
  width: 10px; height: 10px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.scope-chip.override-inherit .chip-count { color: var(--ink-3); font-weight: 600; font-size: 12px; }

/* ============================================================
   SCOPE PICKER MODAL
   ============================================================ */
#scopePickerModal { z-index: 700; }
.modal.scope-picker-modal {
  width: 680px;
  max-width: 92vw;
  height: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0e2551 0%, #0a1a33 100%);
}

/* -------- New template wizard (NewTemplateModal.razor) -------- */
.modal.new-template-modal {
  width: 720px;
  max-width: 92vw;
  height: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0e2551 0%, #0a1a33 100%);
}
.nt-step-chip {
  color: var(--accent);
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: auto;
}
.nt-subject-grid {
  flex: 1;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  overflow-y: auto;
}
.nt-subject-card {
  background: rgba(0,0,0,.2);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 22px 16px 18px;
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.nt-subject-card:hover {
  border-color: var(--line-strong);
  background: rgba(56,189,248,.05);
}
.nt-subject-card.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(56,189,248,.15), rgba(56,189,248,.03));
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}
.nt-subject-icon {
  width: 56px;
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  border: 1.5px solid currentColor;
}
/* Competition-step crest — same footprint as .nt-subject-icon but sized for
   a bitmap tournament logo, and slightly larger since it's the whole card's
   focal point. */
.nt-comp-crest {
  width: 64px;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid var(--line);
  overflow: hidden;
  color: var(--ink-2);
  font-weight: 800;
  font-size: 20px;
}
.nt-comp-crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nt-subject-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: .3px;
}
.nt-subject-desc {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.nt-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
}
/* Name step — a single labelled text input with a small hint beneath. Sits
   in the same flex column as the earlier steps so the summary bar stays
   pinned to the bottom of the modal. */
.nt-name-step {
  flex: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nt-name-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.nt-name-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--ink-1);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.nt-name-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.nt-name-hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
/* Radio-style single-select row (reuses .sp-item layout otherwise). */
.sp-item.nt-radio-item {
  grid-template-columns: 22px 32px 1fr auto;
}
.nt-radio {
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-1);
  transition: all .12s;
  position: relative;
}
.nt-radio.on {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-0);
}
.sp-search-bar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.15);
  display: flex; gap: 10px; align-items: center;
}
.sp-search {
  flex: 1;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px 7px 30px;
  color: var(--ink-1);
  font-size: 12.5px;
  position: relative;
}
.sp-search-wrap {
  position: relative;
  flex: 1;
}
.sp-search-wrap::before {
  content: "";
  position: absolute;
  left: 10px; top: 10px;
  width: 12px; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237e93b5' stroke-width='2.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  pointer-events: none;
  z-index: 2;
}
.sp-search-wrap input { width: 100%; }
.sp-actions { display: flex; gap: 6px; }
.sp-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sp-list::-webkit-scrollbar { width: 8px; }
.sp-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.sp-group-hd {
  padding: 12px 20px 6px;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  background: rgba(0,0,0,.15);
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.sp-group-hd .count-tag {
  color: var(--accent);
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.3);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}
.sp-item {
  padding: 10px 20px;
  display: grid;
  grid-template-columns: 24px 36px 1fr auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .12s;
}
.sp-item:hover { background: rgba(56,189,248,.06); }
.sp-item.selected { background: linear-gradient(90deg, rgba(56,189,248,.14), rgba(56,189,248,.02)); }
.sp-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  background: var(--bg-1);
  transition: all .12s;
}
.sp-item.selected .sp-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-0);
}
.sp-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 11px;
  border: 2px solid;
}
.sp-body { min-width: 0; }
.sp-name {
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-sub {
  color: var(--ink-3);
  font-size: 11px;
  margin-top: 2px;
}
.sp-meta {
  color: var(--ink-3);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sp-meta .pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 10px;
  margin-left: 4px;
}
.sp-summary-bar {
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: rgba(56,189,248,.05);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: var(--ink-2);
}
.sp-summary-bar strong { color: var(--ink-1); font-weight: 700; }

/* Player groups by team */
.sp-team-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: rgba(0,0,0,.25);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sp-team-header .tsel-btn {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
}
.sp-team-header .tsel-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   WIDGET HEAD DATA CHIP
   ============================================================ */
.widget-head {
  gap: 8px;
  min-height: 32px;
}
.wh-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.wh-name {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.wh-data-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  background: linear-gradient(90deg, rgba(56,189,248,.15), rgba(56,189,248,.06));
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 12px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  max-width: 100%;
  overflow: hidden;
}
.wh-data-chip:hover {
  background: linear-gradient(90deg, rgba(56,189,248,.25), rgba(56,189,248,.12));
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56,189,248,.25);
}
.wh-data-chip .chip-ico {
  width: 12px; height: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.wh-data-chip .chip-body {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wh-data-chip .chip-body strong {
  color: var(--ink-1);
  font-weight: 700;
}
.wh-data-chip .chip-body .sep {
  color: var(--ink-4);
  margin: 0 4px;
  font-weight: 300;
}

/* ============================================================
   STATISTICS BUILDER MODAL
   ============================================================ */
.modal.stat-builder-modal {
  width: 1160px;
  max-width: 95vw;
  height: 760px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0e2551 0%, #0a1a33 100%);
}
.sb-meta {
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(56, 189, 248, .05);
}
.sb-meta strong { color: var(--ink-1); font-weight: 600; margin-left: 4px; }
.sb-meta .badge-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(56, 189, 248, .1);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, .3);
  font-weight: 600;
  font-size: 11px;
}

.sb-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  overflow: hidden;
  min-height: 0;
}
.sb-tree, .sb-editor, .sb-preview {
  overflow-y: auto;
  padding: 18px 20px;
}
.sb-tree {
  background: rgba(0,0,0,.15);
  border-right: 1px solid var(--line);
}
.sb-preview {
  background: rgba(0,0,0,.15);
  border-left: 1px solid var(--line);
}
.sb-panel-title {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.sb-panel-title::before {
  content: "";
  width: 4px; height: 12px;
  background: var(--accent);
  border-radius: 2px;
}

/* Composition tree nodes */
.sb-node {
  position: relative;
  padding: 12px 12px 12px 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .15s;
}
.sb-node::before {
  content: attr(data-step);
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background: var(--bg-1);
  border: 2px solid var(--line);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  z-index: 2;
}
.sb-node.done::before {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-0);
}
.sb-node.active {
  background: linear-gradient(135deg, rgba(56,189,248,.2), rgba(56,189,248,.05));
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}
.sb-node.active::before {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-0);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,.6); }
  50% { box-shadow: 0 0 0 6px rgba(56,189,248,0); }
}
.sb-node:not(.active):hover {
  border-color: var(--line-strong);
  background: var(--bg-3);
}
/* Connector line between nodes */
.sb-node::after {
  content: "";
  position: absolute;
  left: 1px; top: 100%;
  width: 2px; height: 12px;
  background: var(--line);
  z-index: 1;
}
.sb-node:last-of-type::after { display: none; }

.sb-node .step-label {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
.sb-node .step-value {
  color: var(--ink-1);
  font-size: 13px;
  font-weight: 700;
  margin-top: 3px;
}
.sb-node .step-value .value-sub {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
}
.sb-node.empty .step-value {
  color: var(--ink-4);
  font-weight: 500;
  font-style: italic;
}
.sb-node .step-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.sb-node .step-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  background: rgba(56,189,248,.12);
  color: var(--accent);
  border: 1px solid rgba(56,189,248,.3);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

/* Add-composition button at end of tree */
.sb-add-node {
  padding: 10px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.sb-add-node:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56,189,248,.05);
}

/* Middle editor */
.sb-editor-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.sb-editor-head h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: .2px;
}
.sb-editor-head .step-num {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.sb-editor-head p {
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 3px;
}

/* Option grid */
.sb-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.sb-opt {
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sb-opt::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background .15s;
}
.sb-opt:hover {
  border-color: var(--line-strong);
  background: var(--bg-3);
  transform: translateY(-2px);
}
.sb-opt.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(56,189,248,.15) 0%, rgba(56,189,248,.03) 100%);
}
.sb-opt.selected::before { background: var(--accent); }
.sb-opt .opt-icon {
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: rgba(56,189,248,.1);
  border-radius: 8px;
}
.sb-opt.selected .opt-icon {
  background: var(--accent);
  color: var(--bg-0);
}
.sb-opt .opt-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}
.sb-opt .opt-desc {
  color: var(--ink-3);
  font-size: 10.5px;
  margin-top: 3px;
  line-height: 1.3;
}
.sb-opt .opt-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  color: var(--bg-0);
}
.sb-opt.selected .opt-check { display: flex; }

/* Parameter row (e.g. number input for Top N) */
.sb-param-row {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
.sb-param-row label {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
  min-width: 100px;
}
.sb-param-row input[type=number], .sb-param-row input[type=text] {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--ink-1);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 13px;
  width: 100px;
  font-weight: 600;
}
.sb-param-row input:focus { outline: none; border-color: var(--accent); }
.sb-param-row .hint { color: var(--ink-3); font-size: 11px; flex: 1; }

/* Conditions section */
.sb-cond-group {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.sb-cond-group h4 {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-cond-group h4::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.sb-cond-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.sb-cond-chip {
  padding: 5px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.sb-cond-chip:hover { border-color: var(--line-strong); color: var(--ink-1); }
.sb-cond-chip.selected {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
}

/* Time slider */
.sb-time-slider {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}
.sb-time-slider .track {
  position: relative;
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  margin: 20px 0 24px;
}
.sb-time-slider .fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #06b6d4);
  border-radius: 3px;
}
.sb-time-slider .handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: white;
  border: 3px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.sb-time-slider .marks {
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 4px;
}
.sb-time-slider .toggles {
  display: flex; gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.sb-time-slider .toggles > div {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

/* Preview panel */
.sb-preview-widget {
  background: linear-gradient(180deg, #14315c 0%, #0f2447 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 200px;
}
.sb-preview-widget .pv-title {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 10px;
}
.sb-preview-widget .pv-count {
  color: var(--accent);
  font-weight: 800;
}
.pv-item {
  display: grid;
  grid-template-columns: 22px 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 11.5px;
}
.pv-item .r { color: var(--ink-4); font-size: 10px; font-weight: 700; }
.pv-item .a {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #334155, #1e293b);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  color: var(--ink-2);
  border: 1.5px solid var(--accent);
}
.pv-item .n { color: var(--ink-1); font-weight: 600; }
.pv-item .v { color: var(--accent); font-weight: 800; font-size: 13px; }

.sb-preview-formula {
  margin-top: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.55;
  font-family: "SF Mono", ui-monospace, "Consolas", monospace;
}
.sb-preview-formula .k { color: var(--accent); font-weight: 700; }
.sb-preview-formula .v { color: #facc15; font-weight: 600; }

.sb-preview-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(34, 197, 94, .08);
  border-left: 3px solid var(--success);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Foot */
.sb-foot {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-foot .foot-l, .sb-foot .foot-r {
  display: flex; gap: 8px;
}

/* helpers — scoped to the report builder: this sheet loads globally, and an unscoped
   `.hidden { … !important }` beats Tailwind variants like `group-hover:block` (e.g. the NavMenu user dropdown). */
.rb-shell .hidden { display: none !important; }

/* Template-preview banner shown at the top of the designer canvas.
   Reinforces that scope picks below are preview-only and not persisted. */
.rb-preview-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  margin: 8px 8px 0;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: var(--radius-sm, 8px);
  color: var(--ink-2, #cbd5e1);
  font-size: 12px;
  line-height: 1.45;
}
.rb-preview-banner-icon {
  flex: 0 0 auto;
  color: rgb(251, 191, 36);
  margin-top: 1px;
}
.rb-preview-banner-body {
  flex: 1 1 auto;
}
.rb-preview-banner-body strong {
  color: rgb(251, 191, 36);
  margin-right: 4px;
}
.rb-preview-banner-body em {
  font-style: italic;
  color: var(--ink-1, #f1f5f9);
}
.rb-preview-banner-hint {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.12);
  border-left: 3px solid rgb(239, 68, 68);
  border-radius: 4px;
  color: var(--ink-1, #f1f5f9);
  font-weight: 500;
}
.preview-mode .rb-preview-banner,
.app.preview-mode .rb-preview-banner { display: none; }
@media print {
  .rb-preview-banner { display: none !important; }
}

.sp-preview-note {
  padding: 8px 14px;
  margin: 0 14px 8px;
  background: rgba(251, 191, 36, 0.10);
  border-left: 3px solid rgb(251, 191, 36);
  border-radius: 4px;
  color: var(--ink-2, #cbd5e1);
  font-size: 11px;
  line-height: 1.4;
}

/* Width picker overlay for selected widgets — sits above the top-right
   corner so it doesn't fight the drag header for clicks. Only visible when
   the widget is selected; the resize handles it accompanies are already
   scoped to .widget.selected in the block above. */
.width-picker {
  position: absolute;
  top: -28px;
  /* Left-aligned so it never sits over the widget's action buttons, which are
     top-right both in .widget-head and in the floating bar below. */
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  background: rgba(15, 36, 71, 0.95);
  border: 1px solid var(--accent);
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.width-picker .wp-label {
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 3px 0 1px;
}
.width-picker .wp-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-2, #cbd5e1);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.width-picker .wp-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  color: var(--ink-1, #f1f5f9);
}
.width-picker .wp-btn.active {
  background: var(--accent);
  color: #0f2447;
  border-color: var(--accent);
}
.preview-mode .width-picker { display: none !important; }

/* Floating duplicate/delete for chrome-less widgets (headers, text blocks).
   Those hide .widget-head, so without this they have no delete affordance at
   all — the only way to remove one was the properties panel. Mirrors the width
   picker: picker left, actions right, same 28px lane above the widget. */
.widget-float-actions {
  position: absolute;
  top: -28px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  background: rgba(15, 36, 71, 0.95);
  border: 1px solid var(--accent);
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.widget-float-actions button {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.widget-float-actions button:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink-1); }
.widget-float-actions button.danger:hover { background: rgba(239, 68, 68, .2); color: var(--danger); }
.preview-mode .widget-float-actions { display: none !important; }
@media print {
  .width-picker { display: none !important; }
}