body {
            font-family: 'Inter', sans-serif;
            background-color: #333333;
            color: #000000;
        }
        .container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            background-color: #000000;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .form-group label {
            font-weight: 600;
            margin-bottom: 8px;
            display: block;
        }
        .form-group select {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 15px;
            box-sizing: border-box;
        }
        .message {
            padding: 12px 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            font-weight: 500;
        }
        .message.info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .bracket-grid {
            display: grid;
            /* Columns: Div A R1, Div A Semis, Div A Finals, League Finals, Div B Finals, Div B Semis, Div B R1 */
            grid-template-columns: repeat(3, 1fr) 0.5fr repeat(3, 1fr);
            gap: 10px;
            padding: 20px;
            background-color: #333333;
            border-radius: 12px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
            position: relative; /* For absolute positioning of lines if needed later */
        }

        .round-column {
            display: flex;
            flex-direction: column;
            justify-content: space-around; /* Distribute matches vertically */
            gap: 10px;
            padding: 10px;
            /*  border-right: 2px solid #cbd5e0; Visual separator between rounds */
        }
        .round-column:last-child {
            border-right: none;
        }

        /* Specific column styling for visual balance */
        .round-column:nth-child(1), /* Div A R1 */
        .round-column:nth-child(7) { /* Div B R1 */
            padding-top: 20px; /* Adjust vertical alignment for R1 */
            padding-bottom: 20px;
        }
        .round-column:nth-child(2), /* Div A Semis */
        .round-column:nth-child(6) { /* Div B Semis */
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .round-column:nth-child(3), /* Div A Finals */
        .round-column:nth-child(5) { /* Div B Finals */
            padding-top: 80px;
            padding-bottom: 80px;
        }
        .round-column.league-finals-column {
            border: none; /* No border for the center column */
            display: flex;
            background-color:#000000;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .match-box {
            /* background-color: #999999; */
            /* border: 1px solid #a0aec0; */
            /* border-radius: 8px; */
            padding: 10px 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            text-align: center;
            min-height: 80px; /* Ensure consistent height for visual alignment */
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }
        .match-box.final-match {
            /* background-color: #fbd38d;  Highlight for final */
            border-color: #dd6b20;
        }

        .team-line {
            border: 1px solid #ffffff;
            background-color: #ffffff;
            border-radius: 5px;
            padding: 5px 5px;
            font-weight: 600;
            margin: 2px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .team-name {
            flex-grow: 1;
            text-align: left;
            padding-right: 5px;
        }
        .score {
            font-weight: bold;
            color: #2d3748;
            min-width: 30px;
            text-align: right;
        }
        .placeholder-team {
            font-style: italic;
            color: #740202;
        }

        .round-title {
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            color: #ffffff;
            grid-column: span 1; /* Each title spans its own column */
        }
        .division-title {
            font-size: 1.8rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            color: #fab534;
            grid-column: span 3; /* Spans across 3 columns for division */
        }
        .league-finals-title {
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            color: #ffffff;
            grid-column: span 1; /* Spans only its column */
        }

        /* Specific grid-row positioning for matches to create the bracket shape */
        /* Division A Round 1 */
        .match-a-r1-1 { grid-row: 1; }
        .match-a-r1-2 { grid-row: 3; }
        .match-a-r1-3 { grid-row: 5; }

        /* Division A Semifinals */
        .match-a-s1 { grid-row: 2 / span 2; } /* Spans two rows to align with R1 winners */
        .match-a-s2 { grid-row: 4 / span 2; }

        /* Division A Finals */
        .match-a-f { grid-row: 3 / span 4; } /* Spans four rows */

        /* League Finals */
        .match-lf { grid-row: 4 / span 6; } /* Spans six rows */

        /* Division B Finals */
        .match-b-f { grid-row: 3 / span 4; }

        /* Division B Semifinals */
        .match-b-s1 { grid-row: 2 / span 2; }
        .match-b-s2 { grid-row: 4 / span 2; }

        /* Division B Round 1 */
        .match-b-r1-1 { grid-row: 1; }
        .match-b-r1-2 { grid-row: 3; }
        .match-b-r1-3 { grid-row: 5; }

        /* General vertical alignment within columns */
        .round-column > .match-box {
            align-self: center; /* Center boxes within their grid cell */
        }

        *,
::before,
::after {
 --tw-border-spacing-x:0;
 --tw-border-spacing-y:0;
 --tw-translate-x:0;
 --tw-translate-y:0;
 --tw-rotate:0;
 --tw-skew-x:0;
 --tw-skew-y:0;
 --tw-scale-x:1;
 --tw-scale-y:1;
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-scroll-snap-strictness:proximity;
 --tw-gradient-from-position: ;
 --tw-gradient-via-position: ;
 --tw-gradient-to-position: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-ring-offset-width:0px;
 --tw-ring-offset-color:#fff;
 --tw-ring-color:rgb(59 130 246 / 0.5);
 --tw-ring-offset-shadow:0 0 #0000;
 --tw-ring-shadow:0 0 #0000;
 --tw-shadow:0 0 #0000;
 --tw-shadow-colored:0 0 #0000;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: ;
 --tw-contain-size: ;
 --tw-contain-layout: ;
 --tw-contain-paint: ;
 --tw-contain-style: 
}
::backdrop {
 --tw-border-spacing-x:0;
 --tw-border-spacing-y:0;
 --tw-translate-x:0;
 --tw-translate-y:0;
 --tw-rotate:0;
 --tw-skew-x:0;
 --tw-skew-y:0;
 --tw-scale-x:1;
 --tw-scale-y:1;
 --tw-pan-x: ;
 --tw-pan-y: ;
 --tw-pinch-zoom: ;
 --tw-scroll-snap-strictness:proximity;
 --tw-gradient-from-position: ;
 --tw-gradient-via-position: ;
 --tw-gradient-to-position: ;
 --tw-ordinal: ;
 --tw-slashed-zero: ;
 --tw-numeric-figure: ;
 --tw-numeric-spacing: ;
 --tw-numeric-fraction: ;
 --tw-ring-inset: ;
 --tw-ring-offset-width:0px;
 --tw-ring-offset-color:#fff;
 --tw-ring-color:rgb(59 130 246 / 0.5);
 --tw-ring-offset-shadow:0 0 #0000;
 --tw-ring-shadow:0 0 #0000;
 --tw-shadow:0 0 #0000;
 --tw-shadow-colored:0 0 #0000;
 --tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;
 --tw-backdrop-blur: ;
 --tw-backdrop-brightness: ;
 --tw-backdrop-contrast: ;
 --tw-backdrop-grayscale: ;
 --tw-backdrop-hue-rotate: ;
 --tw-backdrop-invert: ;
 --tw-backdrop-opacity: ;
 --tw-backdrop-saturate: ;
 --tw-backdrop-sepia: ;
 --tw-contain-size: ;
 --tw-contain-layout: ;
 --tw-contain-paint: ;
 --tw-contain-style: 
}
/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,
::after,
::before {
 box-sizing:border-box;
 border-width:0;
 border-style:solid;
 border-color:#e5e7eb
}
::after,
::before {
 --tw-content:''
}
:host,
html {
 line-height:1.5;
 -webkit-text-size-adjust:100%;
 -moz-tab-size:4;
 tab-size:4;
 font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 font-feature-settings:normal;
 font-variation-settings:normal;
 -webkit-tap-highlight-color:transparent
}
body {
 margin:0;
 line-height:inherit
}
hr {
 height:0;
 color:inherit;
 border-top-width:1px
}
abbr:where([title]) {
 -webkit-text-decoration:underline dotted;
 text-decoration:underline dotted
}
h1,
h2,
h3,
h4,
h5,
h6 {
 font-size:inherit;
 font-weight:inherit
}
a {
 color:inherit;
 text-decoration:inherit
}
b,
strong {
 font-weight:bolder
}
code,
kbd,
pre,
samp {
 font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 font-feature-settings:normal;
 font-variation-settings:normal;
 font-size:1em
}
small {
 font-size:80%
}
sub,
sup {
 font-size:75%;
 line-height:0;
 position:relative;
 vertical-align:baseline
}
sub {
 bottom:-.25em
}
sup {
 top:-.5em
}
table {
 text-indent:0;
 border-color:inherit;
 border-collapse:collapse
}
button,
input,
optgroup,
select,
textarea {
 font-family:inherit;
 font-feature-settings:inherit;
 font-variation-settings:inherit;
 font-size:100%;
 font-weight:inherit;
 line-height:inherit;
 letter-spacing:inherit;
 color:inherit;
 margin:0;
 padding:0
}
button,
select {
 text-transform:none
}
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
 background-color:transparent;
 background-image:none
}
:-moz-focusring {
 outline:auto
}
:-moz-ui-invalid {
 box-shadow:none
}
progress {
 vertical-align:baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
 height:auto
}
[type=search] {
 outline-offset:-2px
}
::-webkit-search-decoration {
 -webkit-appearance:none
}
::-webkit-file-upload-button {
 -webkit-appearance:button;
 font:inherit
}
summary {
 display:list-item
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
 margin:0
}
fieldset {
 margin:0;
 padding:0
}
legend {
 padding:0
}
menu,
ol,
ul {
 list-style:none;
 margin:0;
 padding:0
}
dialog {
 padding:0
}
textarea {
 resize:vertical
}
input::placeholder,
textarea::placeholder {
 opacity:1;
 color:#9ca3af
}
[role=button],
button {
 cursor:pointer
}
:disabled {
 cursor:default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
 display:block;
}
img,
video {
 max-width:100%;
 height:auto
}
[hidden]:where(:not([hidden=until-found])) {
 display:none
}
.container {
 width:100%
}
@media (min-width: 640px) {
 .container {
  max-width:640px
 }
}
@media (min-width: 768px) {
 .container {
  max-width:768px
 }
}
@media (min-width: 1024px) {
 .container {
  max-width:1024px
 }
}
@media (min-width: 1280px) {
 .container {
  max-width:1280px
 }
}
@media (min-width: 1536px) {
 .container {
  max-width:1536px
 }
}
.mb-4 {
 margin-bottom:1rem
}
.mb-6 {
 margin-bottom:1.5rem
}
.mt-1 {
 margin-top:0.25rem
}
.block {
 display:block
}
.w-full {
 width:100%
}
.rounded-md {
 border-radius:0.375rem
}
.border-gray-300 {
 --tw-border-opacity:1;
 border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))
}
.p-4 {
 padding:1rem
}
.text-center {
 text-align:center
}
.text-3xl {
 font-size:1.875rem;
 line-height:2.25rem
}
.font-bold {
 font-weight:700
}
.text-gray-700 {
 --tw-text-opacity:1;
 color:rgb(250 181 52 / var(--tw-text-opacity, 1))
}
.text-gray-800 {
 --tw-text-opacity:1;
 color:rgb(250 181 52 / var(--tw-text-opacity, 1))
}
.shadow-sm {
 --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);
 --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
 box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.focus\:border-indigo-300:focus {
 --tw-border-opacity:1;
 border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))
}
.focus\:ring:focus {
 --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
 box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.focus\:ring-indigo-200:focus {
 --tw-ring-opacity:1;
 --tw-ring-color:rgb(199 210 254 / var(--tw-ring-opacity, 1))
}
.focus\:ring-opacity-50:focus {
 --tw-ring-opacity:0.5
}