/* ============ Match Fixer — scoped to .mf-tool-root ============ */
/* CSS variables scoped so they don't override client-layout.css globals */
.mf-tool-root {
  --mf-bg:#ffffff;
  --mf-ink:#15171c;
  --mf-ink-2:#3d424b;
  --mf-muted:#868d99;
  --mf-faint:#aab0bb;
  --mf-line:#e4e7ec;
  --mf-line-2:#eef0f3;
  --mf-conn:#b9c0ca;
  --mf-panel:#f7f8fa;
  --mf-panel-2:#f1f3f6;
  --mf-accent:oklch(0.56 0.19 256);
  --mf-accent-press:oklch(0.48 0.19 256);
  --mf-accent-tint:oklch(0.96 0.03 256);
  --mf-accent-soft:oklch(0.92 0.06 256);
  --mf-win:oklch(0.6 0.15 152);
  --mf-win-tint:oklch(0.95 0.05 152);
  --mf-radius:10px;
  --mf-radius-sm:7px;
  --mf-shadow:0 1px 2px rgba(20,23,28,.05), 0 6px 22px rgba(20,23,28,.05);
  --mf-shadow-sm:0 1px 2px rgba(20,23,28,.06);
  --mf-font-head:'Archivo', system-ui, sans-serif;
  --mf-font-body:'Hanken Grotesk', system-ui, sans-serif;
  /* Re-expose under original names for internal component styles */
  --bg:var(--mf-bg);
  --ink:var(--mf-ink);
  --ink-2:var(--mf-ink-2);
  --muted:var(--mf-muted);
  --faint:var(--mf-faint);
  --line:var(--mf-line);
  --line-2:var(--mf-line-2);
  --conn:var(--mf-conn);
  --panel:var(--mf-panel);
  --panel-2:var(--mf-panel-2);
  --accent:var(--mf-accent);
  --accent-press:var(--mf-accent-press);
  --accent-tint:var(--mf-accent-tint);
  --accent-soft:var(--mf-accent-soft);
  --win:var(--mf-win);
  --win-tint:var(--mf-win-tint);
  --radius:var(--mf-radius);
  --radius-sm:var(--mf-radius-sm);
  --shadow:var(--mf-shadow);
  --shadow-sm:var(--mf-shadow-sm);
  --font-head:var(--mf-font-head);
  --font-body:var(--mf-font-body);
  /* Base styles */
  font-family:var(--mf-font-body);
  color:var(--mf-ink);
  background:var(--mf-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mf-tool-root *{box-sizing:border-box;}
.mf-tool-root input,.mf-tool-root select,.mf-tool-root button,.mf-tool-root textarea{font-family:inherit;color:inherit;}
.mf-tool-root ::selection{background:var(--mf-accent-soft);}

/* ---------- layout ---------- */
.mf-tool-root .app{max-width:1240px;margin:0 auto;padding:0 28px 96px;}

.mf-tool-root .topbar{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--mf-line);
}
.mf-tool-root .topbar-inner{
  max-width:1240px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:16px;
}
.mf-tool-root .brand{display:flex;align-items:center;gap:11px;}
.mf-tool-root .brand-mark{width:34px;height:34px;flex:none;}
.mf-tool-root .brand-name{
  font-family:var(--mf-font-head);font-weight:800;letter-spacing:-.02em;
  font-size:18px;text-transform:uppercase;
}
.mf-tool-root .brand-name b{color:var(--mf-accent);}
.mf-tool-root .brand-tag{font-size:12.5px;color:var(--mf-muted);margin-left:2px;}
.mf-tool-root .topbar-spacer{flex:1;}
.mf-tool-root .topbar-actions{display:flex;align-items:center;gap:8px;}

/* ---------- generic ---------- */
.mf-tool-root .section{margin-top:34px;}
.mf-tool-root .section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.mf-tool-root .section-title{
  font-family:var(--mf-font-head);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--mf-ink);
}
.mf-tool-root .section-step{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--mf-ink);color:#fff;font-family:var(--mf-font-head);font-weight:700;
  font-size:12px;display:grid;place-items:center;
}
.mf-tool-root .section-hint{font-size:13px;color:var(--mf-muted);}

.mf-tool-root .card{
  background:#fff;border:1px solid var(--mf-line);border-radius:var(--mf-radius);
}
.mf-tool-root .pad{padding:22px 24px;}

/* ---------- buttons ---------- */
.mf-tool-root .btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--mf-line);background:#fff;color:var(--mf-ink);
  font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:var(--mf-radius-sm);
  transition:background .15s, border-color .15s, transform .04s;
  white-space:nowrap;
}
.mf-tool-root .btn:hover{background:var(--mf-panel);border-color:#d8dce2;}
.mf-tool-root .btn:active{transform:translateY(1px);}
.mf-tool-root .btn svg{width:16px;height:16px;}
.mf-tool-root .btn.primary{background:var(--mf-accent);border-color:var(--mf-accent);color:#fff;}
.mf-tool-root .btn.primary:hover{background:var(--mf-accent-press);border-color:var(--mf-accent-press);}
.mf-tool-root .btn.ghost{border-color:transparent;background:transparent;color:var(--mf-ink-2);}
.mf-tool-root .btn.ghost:hover{background:var(--mf-panel);}
.mf-tool-root .btn.danger:hover{color:#c0392b;border-color:#eccac4;background:#fdf3f1;}
.mf-tool-root .btn.sm{padding:6px 11px;font-size:12.5px;}
.mf-tool-root .btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- form fields ---------- */
.mf-tool-root .field{display:flex;flex-direction:column;gap:7px;}
.mf-tool-root .field label{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mf-muted);
}
.mf-tool-root .input, .mf-tool-root .select{
  border:1px solid var(--mf-line);background:#fff;border-radius:var(--mf-radius-sm);
  padding:10px 12px;font-size:14px;width:100%;transition:border-color .15s, box-shadow .15s;
}
.mf-tool-root .input:focus, .mf-tool-root .select:focus{
  outline:none;border-color:var(--mf-accent);box-shadow:0 0 0 3px var(--mf-accent-tint);
}
.mf-tool-root .input::placeholder{color:var(--mf-faint);}
/* range slider */
.mf-tool-root .range{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;
  background:var(--mf-panel-2);outline:none;margin:8px 0;cursor:pointer;
}
.mf-tool-root .range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--mf-accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(20,23,28,.25);cursor:grab;
}
.mf-tool-root .range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--mf-accent);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(20,23,28,.25);cursor:grab;
}
.mf-tool-root .select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23868d99' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;cursor:pointer;
}
.mf-tool-root .setup-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px 20px;
}
.mf-tool-root .setup-grid .span-name{grid-column:1 / 2;}
@media (max-width:840px){ .mf-tool-root .setup-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .mf-tool-root .setup-grid{grid-template-columns:1fr;} }

/* segmented control */
.mf-tool-root .seg{display:inline-flex;background:var(--mf-panel-2);border-radius:var(--mf-radius-sm);padding:3px;gap:2px;}
.mf-tool-root .seg button{
  border:none;background:transparent;cursor:pointer;font-weight:600;font-size:13px;
  padding:7px 13px;border-radius:5px;color:var(--mf-ink-2);transition:.12s;white-space:nowrap;
}
.mf-tool-root .seg button:hover{color:var(--mf-ink);}
.mf-tool-root .seg button.on{background:#fff;color:var(--mf-ink);box-shadow:var(--mf-shadow-sm);}

/* toggle */
.mf-tool-root .toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.mf-tool-root .toggle .track{
  width:38px;height:22px;border-radius:11px;background:#d4d8de;position:relative;transition:.18s;flex:none;
}
.mf-tool-root .toggle .knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.18s;
}
.mf-tool-root .toggle.on .track{background:var(--mf-accent);}
.mf-tool-root .toggle.on .knob{transform:translateX(16px);}
.mf-tool-root .toggle .lbl{font-size:13.5px;font-weight:600;white-space:nowrap;}

/* ---------- team editor ---------- */
.mf-tool-root .team-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.mf-tool-root .drag-hint{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--mf-faint);
}
.mf-tool-root .drag-hint svg{width:14px;height:14px;}
.mf-tool-root .team-count{
  font-family:var(--mf-font-head);font-weight:700;font-size:13px;color:var(--mf-ink-2);
  background:var(--mf-panel);border:1px solid var(--mf-line);border-radius:20px;padding:6px 13px;
}
.mf-tool-root .team-count b{color:var(--mf-accent);}
.mf-tool-root .team-bar .spacer{flex:1;}

.mf-tool-root .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:720px){ .mf-tool-root .team-grid{grid-template-columns:1fr;} }
.mf-tool-root .team-row{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--mf-line);
  border-radius:var(--mf-radius-sm);padding:7px 8px 7px 4px;transition:border-color .15s, box-shadow .15s, opacity .15s, transform .12s;
}
.mf-tool-root .team-row:focus-within{border-color:var(--mf-accent);box-shadow:0 0 0 3px var(--mf-accent-tint);}
.mf-tool-root .drag-grip{
  flex:none;width:20px;display:grid;place-items:center;color:var(--mf-faint);cursor:grab;
  align-self:stretch;border-radius:5px;transition:color .12s, background .12s;
}
.mf-tool-root .drag-grip:hover{color:var(--mf-muted);background:var(--mf-panel);}
.mf-tool-root .drag-grip:active{cursor:grabbing;}
.mf-tool-root .drag-grip svg{width:16px;height:16px;}
.mf-tool-root .team-row.dragging{opacity:.4;border-color:var(--mf-accent);border-style:dashed;}
.mf-tool-root .team-row.drop-target{
  border-color:var(--mf-accent);box-shadow:0 0 0 3px var(--mf-accent-tint);transform:translateY(-1px);
}
.mf-tool-root .team-row.drop-target .seed-badge{background:var(--mf-accent);}
.mf-tool-root .seed-badge{
  width:26px;height:26px;flex:none;border-radius:6px;background:var(--mf-ink);color:#fff;
  font-family:var(--mf-font-head);font-weight:700;font-size:12.5px;display:grid;place-items:center;
}
.mf-tool-root .team-inputs{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.mf-tool-root .team-inputs .amp{color:var(--mf-faint);font-weight:700;font-size:13px;}
.mf-tool-root .team-input{
  border:none;background:transparent;padding:6px 6px;font-size:14px;font-weight:500;width:100%;min-width:0;
}
.mf-tool-root .team-input:focus{outline:none;}
.mf-tool-root .row-del{
  width:28px;height:28px;flex:none;border:none;background:transparent;border-radius:6px;cursor:pointer;
  color:var(--mf-faint);display:grid;place-items:center;transition:.12s;
}
.mf-tool-root .row-del:hover{background:#fdecea;color:#c0392b;}
.mf-tool-root .row-del svg{width:15px;height:15px;}

.mf-tool-root .add-row{
  display:flex;align-items:center;gap:8px;border:1px dashed var(--mf-line);background:var(--mf-panel);
  border-radius:var(--mf-radius-sm);padding:11px 14px;cursor:pointer;color:var(--mf-accent);font-weight:600;
  font-size:13.5px;width:100%;margin-top:10px;transition:.15s;justify-content:center;
}
.mf-tool-root .add-row:hover{background:var(--mf-accent-tint);border-color:var(--mf-accent-soft);}

.mf-tool-root .bulk{margin-top:14px;border-top:1px solid var(--mf-line-2);padding-top:14px;}
.mf-tool-root .bulk textarea{
  width:100%;border:1px solid var(--mf-line);border-radius:var(--mf-radius-sm);padding:11px 12px;
  font-size:13.5px;resize:vertical;min-height:74px;line-height:1.5;
}
.mf-tool-root .bulk textarea:focus{outline:none;border-color:var(--mf-accent);box-shadow:0 0 0 3px var(--mf-accent-tint);}
.mf-tool-root .bulk-row{display:flex;align-items:center;gap:10px;margin-top:9px;}
.mf-tool-root .bulk-hint{font-size:12.5px;color:var(--mf-muted);}

/* ---------- output ---------- */
.mf-tool-root .output-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.mf-tool-root .meta-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mf-tool-root .chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--mf-ink-2);
  background:var(--mf-panel);border:1px solid var(--mf-line);border-radius:20px;padding:6px 12px;
}
.mf-tool-root .chip svg{width:14px;height:14px;color:var(--mf-muted);}
.mf-tool-root .chip.accent{background:var(--mf-accent-tint);border-color:var(--mf-accent-soft);color:var(--mf-accent-press);}
.mf-tool-root .chip.accent svg{color:var(--mf-accent);}

.mf-tool-root .empty{
  border:1px dashed var(--mf-line);border-radius:var(--mf-radius);background:var(--mf-panel);
  padding:60px 24px;text-align:center;color:var(--mf-muted);
}
.mf-tool-root .empty .ico{width:46px;height:46px;margin:0 auto 14px;color:var(--mf-faint);}
.mf-tool-root .empty h3{font-family:var(--mf-font-head);font-weight:700;font-size:16px;color:var(--mf-ink-2);margin:0 0 6px;}
.mf-tool-root .empty p{margin:0;font-size:13.5px;}

/* ============ BRACKET ============ */
.mf-tool-root .bracket-wrap{
  overflow-x:auto;border:1px solid var(--mf-line);border-radius:var(--mf-radius);background:#fff;
  padding:10px 6px 18px;
}
.mf-tool-root .bracket{display:flex;width:max-content;min-width:100%;padding:0 8px;}
.mf-tool-root .round{display:flex;flex-direction:column;flex:1 0 244px;min-width:244px;}
.mf-tool-root .round + .round{margin-left:72px;}
.mf-tool-root .round-head{
  height:40px;display:flex;align-items:center;gap:9px;padding:0 4px 0 2px;margin-bottom:6px;
}
.mf-tool-root .round-head .rname{
  font-family:var(--mf-font-head);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--mf-ink);
}
.mf-tool-root .round-head .rno{font-size:11.5px;color:var(--mf-faint);font-weight:600;}
.mf-tool-root .round-body{flex:1;display:flex;flex-direction:column;}

/* computed-layout canvas (bye matches collapsed) */
.mf-tool-root .bracket-canvas{position:relative;margin:0 8px;}
.mf-tool-root .bracket-conns{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;}
.mf-tool-root .bracket-conns path{fill:none;stroke:var(--mf-conn);stroke-width:2;stroke-linejoin:round;}
.mf-tool-root .round-head.abs{position:absolute;top:0;height:40px;margin:0;}
.mf-tool-root .match.abs{position:absolute;}

.mf-tool-root .match{flex:1 1 0;display:flex;align-items:center;position:relative;}
.mf-tool-root .match-card{
  position:relative;width:100%;border:1px solid var(--mf-line);border-radius:8px;background:#fff;
  box-shadow:var(--mf-shadow-sm);overflow:visible;
}
/* match number badge */
.mf-tool-root .m-no{
  position:absolute;top:-9px;left:9px;z-index:2;
  font-family:var(--mf-font-head);font-weight:700;font-size:10px;letter-spacing:.03em;
  color:var(--mf-accent-press);background:var(--mf-accent-tint);border:1px solid var(--mf-accent-soft);
  border-radius:5px;padding:1px 6px;line-height:1.5;
}
.mf-tool-root .match-card{border-radius:8px;}
.mf-tool-root .match-card > .slot:first-of-type{border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;}
.mf-tool-root .match-card > .slot:last-of-type{border-bottom-left-radius:8px;border-bottom-right-radius:8px;overflow:hidden;}
/* wrap mode: full names on up to 2 lines */
.mf-tool-root .match-card.wrap .slot{height:50px;align-items:stretch;}
.mf-tool-root .match-card.wrap .s-name{
  white-space:normal;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;align-self:center;
}
.mf-tool-root .match-card.wrap .s-seed{align-items:center;}
.mf-tool-root .conn{
  position:absolute;left:-72px;top:25%;width:36px;height:50%;
  border:0 solid var(--mf-conn);
  border-right-width:2px;border-top-width:2px;border-bottom-width:2px;
  border-top-right-radius:4px;border-bottom-right-radius:4px;
  pointer-events:none;
}
.mf-tool-root .conn::after{
  content:"";position:absolute;left:100%;top:50%;width:36px;height:2px;
  background:var(--mf-conn);transform:translateY(-1px);
}

.mf-tool-root .slot{
  display:flex;align-items:center;gap:0;height:38px;cursor:default;position:relative;
  transition:background .12s;
}
.mf-tool-root .slot + .slot{border-top:1px solid var(--mf-line-2);}
.mf-tool-root .slot.pickable{cursor:pointer;}
.mf-tool-root .slot.pickable:hover{background:var(--mf-accent-tint);}
.mf-tool-root .slot .s-seed{
  width:30px;flex:none;align-self:stretch;display:grid;place-items:center;
  font-family:var(--mf-font-head);font-weight:700;font-size:11.5px;color:var(--mf-muted);
  background:var(--mf-panel);border-right:1px solid var(--mf-line-2);
}
.mf-tool-root .slot .s-flag{
  flex:none;width:28px;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--mf-line-2);font-size:15px;line-height:1;
}
.mf-tool-root .slot .s-flag img.emoji{width:18px;height:18px;display:block;}
.mf-tool-root .slot .s-name{
  flex:1;min-width:0;padding:0 10px;font-size:13.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mf-ink);
}
.mf-tool-root img.emoji{height:1em;width:1em;vertical-align:-0.1em;display:inline;}
.mf-tool-root .slot .s-score{
  width:30px;flex:none;text-align:center;font-family:var(--mf-font-head);font-weight:700;
  font-size:13px;color:var(--mf-faint);
}
.mf-tool-root .slot .s-score-inp{
  width:26px;padding:2px 0;text-align:center;border:1px solid var(--mf-line,#d1d5db);
  border-radius:5px;font:inherit;font-size:12px;font-weight:700;background:#fff;color:var(--mf-ink);
  -moz-appearance:textfield;appearance:textfield;
}
.mf-tool-root .slot .s-score-inp::-webkit-outer-spin-button,
.mf-tool-root .slot .s-score-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mf-tool-root .slot.tbd .s-name, .mf-tool-root .slot.bye .s-name{color:var(--mf-faint);font-weight:500;font-style:italic;}
.mf-tool-root .slot.tbd .s-seed, .mf-tool-root .slot.bye .s-seed{color:var(--mf-faint);}
.mf-tool-root .slot.won{background:var(--mf-win-tint);}
.mf-tool-root .slot.won .s-name{color:var(--mf-ink);}
.mf-tool-root .slot.won .s-seed{background:var(--mf-win);color:#fff;}
.mf-tool-root .slot.won .s-score{color:var(--mf-win);}
.mf-tool-root .slot.won::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mf-win);
}
/* draggable first-round seeds */
.mf-tool-root .slot.swappable{cursor:grab;}
.mf-tool-root .slot.swappable:active{cursor:grabbing;}
.mf-tool-root .slot.swappable .s-score{color:var(--mf-faint);opacity:0;transition:opacity .12s;}
.mf-tool-root .slot.swappable:hover .s-score{opacity:.7;}
.mf-tool-root .slot.swappable .s-score svg{width:13px;height:13px;}
.mf-tool-root .slot.swappable.won .s-score{opacity:1;}
.mf-tool-root .slot.swap-over{background:var(--mf-accent-tint);box-shadow:inset 0 0 0 2px var(--mf-accent);}
.mf-tool-root .slot.swap-over .s-name{color:var(--mf-accent-press);}

.mf-tool-root .tv-strip{
  display:flex;align-items:center;gap:6px;border-top:1px solid var(--mf-line-2);
  background:var(--mf-panel);padding:6px 8px;
}
.mf-tool-root .tv-field{display:flex;align-items:center;gap:5px;flex:1;min-width:0;}
.mf-tool-root .tv-field svg{width:13px;height:13px;color:var(--mf-muted);flex:none;}
.mf-tool-root .tv-input{
  border:1px solid transparent;background:transparent;border-radius:5px;padding:3px 5px;
  font-size:11.5px;font-weight:500;width:100%;min-width:0;color:var(--mf-ink-2);
}
.mf-tool-root .tv-input::placeholder{color:var(--mf-faint);}
.mf-tool-root .tv-input:hover{background:#fff;border-color:var(--mf-line);}
.mf-tool-root .tv-input:focus{outline:none;background:#fff;border-color:var(--mf-accent);box-shadow:0 0 0 2px var(--mf-accent-tint);}
.mf-tool-root .tv-input[type=datetime-local]{font-family:var(--mf-font-body);}

/* ============ FIXTURE LIST ============ */
.mf-tool-root .fx-round{margin-bottom:22px;}
.mf-tool-root .fx-round-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.mf-tool-root .fx-round-head .rname{
  font-family:var(--mf-font-head);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;
}
.mf-tool-root .fx-round-head .rcount{font-size:12px;color:var(--mf-muted);font-weight:600;}
.mf-tool-root .fx-round-head .rline{flex:1;height:1px;background:var(--mf-line);}
.mf-tool-root .fx-list{display:flex;flex-direction:column;gap:8px;}
.mf-tool-root .fx-row{
  display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;
  border:1px solid var(--mf-line);border-radius:var(--mf-radius-sm);background:#fff;padding:12px 14px;
  box-shadow:var(--mf-shadow-sm);
}
.mf-tool-root .fx-no{
  font-family:var(--mf-font-head);font-weight:700;font-size:12px;color:var(--mf-accent-press);
  background:var(--mf-accent-tint);border-radius:6px;padding:5px 0;text-align:center;
}
.mf-tool-root .fx-teams{display:flex;align-items:center;gap:12px;min-width:0;}
.mf-tool-root .fx-team{
  display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:6px 9px;border-radius:6px;
  transition:background .12s;
}
.mf-tool-root .fx-team.pickable{cursor:pointer;}
.mf-tool-root .fx-team.pickable:hover{background:var(--mf-accent-tint);}
.mf-tool-root .fx-team .fseed{
  width:22px;height:22px;flex:none;border-radius:5px;background:var(--mf-panel-2);color:var(--mf-muted);
  font-family:var(--mf-font-head);font-weight:700;font-size:11px;display:grid;place-items:center;
}
.mf-tool-root .fx-team .fname{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mf-tool-root .fx-team.wrap .fname{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;}
.mf-tool-root .fx-team.tbd .fname, .mf-tool-root .fx-team.bye .fname{color:var(--mf-faint);font-weight:500;font-style:italic;}
.mf-tool-root .fx-team.won{background:var(--mf-win-tint);}
.mf-tool-root .fx-team.won .fseed{background:var(--mf-win);color:#fff;}
.mf-tool-root .fx-team.won .fname{color:var(--mf-ink);}
.mf-tool-root .fx-vs{
  font-family:var(--mf-font-head);font-weight:700;font-size:11px;color:var(--mf-faint);
  text-transform:uppercase;letter-spacing:.04em;flex:none;
}
.mf-tool-root .fx-tv{display:flex;align-items:center;gap:8px;flex:none;}
@media (max-width:720px){
  .mf-tool-root .fx-row{grid-template-columns:38px 1fr;}
  .mf-tool-root .fx-teams{flex-direction:column;align-items:stretch;gap:6px;}
  .mf-tool-root .fx-vs{align-self:center;}
  .mf-tool-root .fx-tv{grid-column:1 / -1;}
}
.mf-tool-root .fx-tv .tv-field{
  border:1px solid var(--mf-line);border-radius:6px;padding:3px 8px;background:var(--mf-panel);
}
.mf-tool-root .fx-tv .tv-input{font-size:12.5px;}
.mf-tool-root .fx-tv .tv-input:hover{background:#fff;}

/* ---------- print ---------- */
@page{ size:A4 landscape; margin:10mm; }
@media print{
  .no-print{display:none !important;}
  nav, footer, .pwa-banner, #pwa-install-banner, #pwa-update-banner{display:none !important;}
  .mf-tool-root .topbar{position:static;border:none;}
  .mf-tool-root .app{padding:0;max-width:none;}
  .mf-tool-root .shell{display:block;}
  .mf-tool-root .content,.mf-tool-root .content-inner{padding:0 !important;max-width:none;}
  .mf-tool-root .info-strip{margin-bottom:12px;box-shadow:none;}
  .mf-tool-root .page-head{margin-bottom:10px;}
  .mf-tool-root .bracket-wrap{border:none;overflow:visible !important;padding:0;}
  .mf-tool-root .bracket-canvas{ zoom:var(--print-scale,1); margin:0; }
  .mf-tool-root .match-card,.mf-tool-root .fx-row,.mf-tool-root .standings,.mf-tool-root .info-strip{box-shadow:none;}
  .mf-tool-root .tv-input{border-color:var(--mf-line) !important;}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* fade-in */
@keyframes rise{from{transform:translateY(7px);}to{transform:none;}}
.mf-tool-root .rise{animation:rise .32s ease both;}
@media (prefers-reduced-motion:reduce){ .mf-tool-root .rise{animation:none;} }

/* ============================================================= */
/*  ADMIN PANEL SHELL                                             */
/* ============================================================= */
.mf-tool-root .shell{display:flex;min-height:calc(100vh - 68px);}

/* ---------- sidebar ---------- */
.mf-tool-root .sidebar{
  width:236px;flex:none;border-right:1px solid var(--mf-line);background:#fff;
  display:flex;flex-direction:column;position:sticky;
  /* Offset for the site's sticky navbar (~68px) */
  top:68px;height:calc(100vh - 68px);
  overflow-y:auto;
}
.mf-tool-root .sidebar.collapsed{width:64px;}
.mf-tool-root .side-top{
  display:flex;align-items:center;justify-content:flex-end;
  padding:10px 12px;border-bottom:1px solid var(--mf-line-2);flex:none;
}
.mf-tool-root .sidebar.collapsed .side-top{justify-content:center;}

.mf-tool-root .side-collapse{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--mf-line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--mf-muted);flex:none;transition:.15s;
}
.mf-tool-root .side-collapse:hover{background:var(--mf-panel);color:var(--mf-ink);}
.mf-tool-root .side-collapse svg{width:14px;height:14px;transition:transform .2s;}
.mf-tool-root .sidebar.collapsed .side-collapse svg{transform:rotate(180deg);}

/* nav — no flex:1 so items stay compact at top, space falls below */
.mf-tool-root .side-nav{padding:10px 10px;display:flex;flex-direction:column;gap:2px;}
.mf-tool-root .side-group-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mf-faint);
  padding:12px 10px 4px;
}
.mf-tool-root .sidebar.collapsed .side-group-label{display:none;}
.mf-tool-root .nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--mf-radius-sm);cursor:pointer;
  color:var(--mf-ink-2);font-weight:600;font-size:14px;border:none;background:transparent;width:100%;text-align:left;
  transition:background .14s, color .14s;white-space:nowrap;
}
.mf-tool-root .nav-item svg{width:18px;height:18px;flex:none;color:var(--mf-muted);transition:color .14s;}
.mf-tool-root .nav-item:hover{background:var(--mf-panel);color:var(--mf-ink);}
.mf-tool-root .nav-item:hover svg{color:var(--mf-ink-2);}
.mf-tool-root .nav-item.on{background:var(--mf-accent-tint);color:var(--mf-accent-press);}
.mf-tool-root .nav-item.on svg{color:var(--mf-accent);}
.mf-tool-root .nav-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--mf-faint);}
.mf-tool-root .nav-item.on .nav-count{color:var(--mf-accent);}
.mf-tool-root .sidebar.collapsed .nav-item{justify-content:center;padding:9px 0;}
.mf-tool-root .sidebar.collapsed .nav-label,.mf-tool-root .sidebar.collapsed .nav-count{display:none;}

/* ---------- main content ---------- */
.mf-tool-root .content{flex:1;min-width:0;display:flex;flex-direction:column;}
.mf-tool-root .content-inner{padding:24px 34px 90px;max-width:1180px;width:100%;}
@media (max-width:680px){ .mf-tool-root .content-inner{padding:20px 18px 80px;} }

/* page header */
.mf-tool-root .page-head{margin-bottom:22px;}
.mf-tool-root .page-title{
  font-family:var(--mf-font-head);font-weight:800;font-style:italic;letter-spacing:-.01em;
  font-size:clamp(24px,3.4vw,36px);line-height:1.08;margin:0;color:var(--mf-ink);text-wrap:balance;
}
.mf-tool-root .page-title .dim{color:var(--mf-faint);font-weight:700;}
.mf-tool-root .page-sub{display:flex;align-items:center;gap:12px;margin-top:14px;}
.mf-tool-root .title-accent{height:3px;width:46px;background:var(--mf-accent);border-radius:2px;margin-top:14px;}
.mf-tool-root .page-actions{display:flex;align-items:center;gap:8px;}

/* info strip */
.mf-tool-root .info-strip{
  display:flex;align-items:stretch;flex-wrap:wrap;gap:0;border:1px solid var(--mf-line);border-radius:var(--mf-radius);
  background:#fff;overflow:hidden;margin-bottom:26px;box-shadow:var(--mf-shadow-sm);
}
.mf-tool-root .info-item{display:flex;flex-direction:column;gap:3px;padding:15px 22px;border-right:1px solid var(--mf-line-2);white-space:nowrap;}
.mf-tool-root .info-item:last-child{border-right:none;}
.mf-tool-root .info-k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mf-muted);}
.mf-tool-root .info-v{font-size:15px;font-weight:700;color:var(--mf-ink);}
.mf-tool-root .info-v.accent{color:var(--mf-accent-press);}
.mf-tool-root .info-spacer{flex:1;border-right:none;}
.mf-tool-root .info-org{
  display:flex;align-items:center;gap:11px;padding:13px 20px;background:var(--mf-panel);
  border-left:1px solid var(--mf-line-2);
}
.mf-tool-root .info-org .av{
  width:38px;height:38px;border-radius:50%;background:var(--mf-ink);color:#fff;display:grid;place-items:center;
  font-family:var(--mf-font-head);font-weight:800;font-size:15px;flex:none;
}
.mf-tool-root .info-org .ol{display:flex;flex-direction:column;line-height:1.3;}
.mf-tool-root .info-org .ol small{font-size:11px;color:var(--mf-muted);font-weight:600;}
.mf-tool-root .info-org .ol b{font-size:13.5px;color:var(--mf-accent-press);font-weight:700;}

/* section heading inside content */
.mf-tool-root .content-sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.mf-tool-root .content-sec-head h2{
  font-family:var(--mf-font-head);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.05em;margin:0;
}
.mf-tool-root .content-sec-head .hint{font-size:13px;color:var(--mf-muted);}

/* ============================================================= */
/*  STANDINGS TABLE                                               */
/* ============================================================= */
.mf-tool-root .standings{
  border:1px solid var(--mf-line);border-radius:var(--mf-radius);overflow:hidden;background:#fff;box-shadow:var(--mf-shadow-sm);
}
.mf-tool-root .st-row{
  display:grid;grid-template-columns:90px 1fr 150px 160px;align-items:center;
}
.mf-tool-root .st-head{
  background:var(--mf-panel);border-bottom:1px solid var(--mf-line);
}
.mf-tool-root .st-head > div{
  padding:13px 18px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mf-muted);
}
.mf-tool-root .st-body .st-row{border-bottom:1px solid var(--mf-line-2);transition:background .12s;}
.mf-tool-root .st-body .st-row:last-child{border-bottom:none;}
.mf-tool-root .st-body .st-row:hover{background:var(--mf-panel);}
.mf-tool-root .st-body .st-row > div{padding:13px 18px;font-size:14px;}
.mf-tool-root .st-rank{display:flex;align-items:center;}
.mf-tool-root .st-rank .badge{
  min-width:30px;height:30px;padding:0 8px;border-radius:7px;background:var(--mf-panel-2);color:var(--mf-ink-2);
  font-family:var(--mf-font-head);font-weight:800;font-style:italic;font-size:14px;display:grid;place-items:center;
}
.mf-tool-root .st-row.gold .badge{background:#f5edd0;color:#a9842a;}
.mf-tool-root .st-row.silver .badge{background:#eceef1;color:#6c7480;}
.mf-tool-root .st-row.bronze .badge{background:#f0e2d6;color:#9a6b46;}
.mf-tool-root .st-name{font-weight:700;color:var(--mf-ink);}
.mf-tool-root .st-name .seedtag{
  font-family:var(--mf-font-head);font-weight:700;font-size:11px;color:var(--mf-faint);margin-right:9px;
}
.mf-tool-root .st-status{color:var(--mf-ink-2);}
.mf-tool-root .st-status .pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:20px;
  background:var(--mf-panel-2);color:var(--mf-ink-2);
}
.mf-tool-root .st-status .pill.champ{background:var(--mf-win-tint);color:oklch(0.42 0.13 152);}
.mf-tool-root .st-muted{color:var(--mf-faint);}
@media (max-width:680px){
  .mf-tool-root .st-row{grid-template-columns:64px 1fr 92px;}
  .mf-tool-root .st-col-history{display:none;}
}

/* responsive sidebar -> top on mobile */
@media (max-width:640px){
  .mf-tool-root .shell{flex-direction:column;}
  .mf-tool-root .sidebar{width:100% !important;height:auto;position:sticky;top:68px;z-index:40;flex-direction:column;}
  .mf-tool-root .side-nav{flex-direction:row;overflow-x:auto;padding:8px 10px;gap:4px;}
  .mf-tool-root .side-group-label{display:none;}
  .mf-tool-root .nav-item{width:auto;padding:8px 12px;}
  .mf-tool-root .nav-label{display:inline !important;}
}

/* ============================================================= */
/*  PROGRESS GUIDE (new-tournament stepper)                       */
/* ============================================================= */
.mf-guide{
  display:flex;align-items:center;gap:6px;margin-bottom:22px;
  background:var(--mf-panel);border:1px solid var(--mf-line);border-radius:100px;
  padding:8px 16px;width:fit-content;
}
.mf-guide-step{
  font-size:12.5px;font-weight:700;color:var(--mf-muted);background:none;border:none;cursor:pointer;
  padding:4px 10px;border-radius:100px;transition:background .14s,color .14s;
}
.mf-guide-step:hover{background:var(--mf-panel-2);color:var(--mf-ink-2);}
.mf-guide-step.active{background:var(--mf-accent);color:#fff;}
.mf-guide-step.done{color:var(--mf-win);cursor:pointer;}
.mf-guide-arrow{font-size:14px;color:var(--mf-faint);user-select:none;}

/* ============================================================= */
/*  PUBLIC VIEW (app-view.jsx)                                    */
/* ============================================================= */
.mf-tool-root .mf-view{display:flex;flex-direction:column;min-height:calc(100vh - 68px);}

/* header */
.mf-tool-root .mf-view-header{
  position:sticky;top:68px;z-index:40;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--mf-line);
}
.mf-tool-root .mf-view-hinner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 28px 10px;max-width:1300px;
}
.mf-tool-root .mf-view-name{
  font-family:var(--mf-font-head);font-weight:800;font-size:clamp(18px,2.4vw,26px);
  letter-spacing:-.02em;color:var(--mf-ink);
}
.mf-tool-root .mf-view-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.mf-tool-root .mf-view-chips .chip{
  display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  padding:4px 11px;border-radius:100px;background:var(--mf-panel);border:1px solid var(--mf-line);
  color:var(--mf-ink-2);
}
.mf-tool-root .mf-view-chips .chip.accent{background:var(--mf-accent-tint);border-color:var(--mf-accent-soft);color:var(--mf-accent-press);}

/* tab bar */
.mf-tool-root .mf-view-tabs{
  display:flex;gap:0;padding:0 28px;border-top:1px solid var(--mf-line-2);
}
.mf-tool-root .mf-view-tab{
  font-size:13.5px;font-weight:700;color:var(--mf-muted);
  background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;
  padding:10px 18px;margin-bottom:-1px;transition:color .14s,border-color .14s;
}
.mf-tool-root .mf-view-tab:hover{color:var(--mf-ink-2);}
.mf-tool-root .mf-view-tab.on{color:var(--mf-accent-press);border-bottom-color:var(--mf-accent);}

/* body */
.mf-tool-root .mf-view-body{flex:1;padding:24px 28px 80px;max-width:1300px;width:100%;box-sizing:border-box;}
@media (max-width:680px){.mf-tool-root .mf-view-body{padding:18px 14px 60px;}}
@media (max-width:680px){.mf-tool-root .mf-view-hinner,.mf-tool-root .mf-view-tabs{padding-left:14px;padding-right:14px;}}

/* view-only notice footer */
.mf-tool-root .mf-view-notice{
  text-align:center;padding:18px 28px;font-size:13px;color:var(--mf-muted);
  border-top:1px solid var(--mf-line-2);background:var(--mf-panel);
}
.mf-tool-root .mf-view-notice a{color:var(--mf-accent-press);font-weight:600;text-decoration:none;}
.mf-tool-root .mf-view-notice a:hover{text-decoration:underline;}

/* bracket always in DOM; hidden on screen only when another tab is active */
@media screen{
  .mf-tool-root .mf-tab-bracket.screen-only-hidden{display:none;}
}

/* print-only title block — invisible on screen */
.mf-print-head{display:none;}

/* ============================================================= */
/*  PRINT — single landscape page, title + game + bracket only   */
/* ============================================================= */
@media print{
  @page{size:landscape;margin:10mm;}

  /* strip everything from the page except the bracket root */
  body *{visibility:hidden;}
  .mf-tool-root,
  .mf-tool-root *{visibility:visible;}

  /* position the root at top-left so nothing shifts */
  .mf-tool-root{position:absolute;top:0;left:0;width:100%;}

  /* hide screen-only elements */
  .no-print,
  .mf-view-header,
  .mf-view-notice,
  .mf-view-body > .no-print{display:none !important;}

  /* always show the bracket panel */
  .mf-tab-bracket,
  .mf-tab-bracket.screen-only-hidden{display:block !important;}

  /* remove padding so bracket sits tight */
  .mf-view-body{padding:0 !important;margin:0 !important;}

  /* print-only title + game line */
  .mf-print-head{
    display:flex !important;
    align-items:baseline;
    gap:12px;
    padding-bottom:10px;
    margin-bottom:12px;
    border-bottom:1.5px solid #e4e7ec;
  }
  .mf-print-title{
    font-family:'Archivo',system-ui,sans-serif;
    font-weight:800;font-size:18px;letter-spacing:-.02em;color:#15171c;
  }
  .mf-print-game{
    font-size:13px;font-weight:600;color:#868d99;
  }

  /* scale bracket canvas to fit the page in one shot */
  .bracket-canvas{
    transform-origin:top left;
    transform:scale(var(--print-scale,1));
    /* prevent browser from paginating inside the canvas */
    break-inside:avoid;
    page-break-inside:avoid;
  }
}