@charset "ISO-8859-1";

/* Base Global Styles & Modern Typography */
html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
  color: var(--text-color, #495057);
  background-color: var(--surface-ground, #f8f9fa);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* nova-light used to reset text-decoration on every anchor; saga-blue has no
   such rule, so link-styled buttons ("Generate Bracket", "Get Started Free")
   picked up the browser's default underline. */
body a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

/* Prime faces CSS */

.ui-datatable-odd {
  background: #ffffff;
}

.ui-datatable-even {
  background: #f2f5f9;
}

.ui-inputfield,
.ui-widget-content .ui-inputfield,
.ui-widget-header .ui-inputfield {
  box-shadow: none !important;
}

body .ui-button.btn-warning {
  color: #ffffff;
  background-color: #dd5600;
  background-image: linear-gradient(#dd5600 0%, #a03e00 100%);
  background-repeat: repeat-x;
  border-color: #963a00;
  text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
}

body .ui-button.btn-warning:hover,
body .ui-button.btn-warning:focus {
  color: #ffffff;
  background-color: #a03e00;
  background-image: none;
  background-position: 0px -15px;
  border-color: #963a00;
}

body .ui-button.btn-warning:active,
body .ui-button.btn-warning.active {
  color: #ffffff;
  background-color: #a03e00;
  background-image: none;
  border-color: #963a00;
}

body .ui-button.btn-default {
  color: #555555;
  background-color: #ffffff;
  background-image: linear-gradient(#ffffff 0%, #f2f2f2 100%);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 #ffffff;
}

body .ui-button.btn-default:hover,
body .ui-button.btn-default:focus {
  color: #555555;
  background-color: #e6e6e6;
  background-image: none;
  background-position: 0px -15px;
  border-color: rgba(0, 0, 0, 0.1);
}

body .ui-button.btn-default:active,
body .ui-button.btn-default.active {
  color: #555555;
  background-color: #e6e6e6;
  background-image: none;
  border-color: rgba(0, 0, 0, 0.1);
}

/* Navbar button consistency & animation removal */
.navbar .btn,
.navbar .navbar-btn,
body .navbar .ui-button.navbar-btn {
  height: 38px !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-family: inherit !important;
  font-weight: normal !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.075) !important;
  text-shadow: 0 1px 0 #ffffff !important;
}

.navbar .btn-default,
body .navbar .ui-button.btn-default {
  color: #555555 !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(#ffffff 0%, #f2f2f2 100%) !important;
  background-repeat: repeat-x !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.navbar .btn-default:hover,
.navbar .btn-default:focus,
body .navbar .ui-button.btn-default:hover,
body .navbar .ui-button.btn-default:focus {
  color: #555555 !important;
  background-color: #e6e6e6 !important;
  background-image: none !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
}

.navbar .btn-default:active,
.navbar .btn-default.active,
body .navbar .ui-button.btn-default:active,
body .navbar .ui-button.btn-default.active {
  color: #555555 !important;
  background-color: #e6e6e6 !important;
  background-image: none !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

body .navbar .ui-button.navbar-btn .ui-button-text {
  padding: 0 !important;
  line-height: inherit !important;
  display: inline !important;
  font-size: 14px !important;
  color: inherit !important;
}

body .navbar .ui-button.navbar-btn .ui-icon,
body .navbar .ui-button.navbar-btn .ui-button-icon-left {
  position: static !important;
  display: inline-block !important;
  margin-top: 0 !important;
  margin-right: 5px !important;
  vertical-align: baseline !important;
  font-size: 14px !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
}

/* End Rich and prime faces CSS */

/* Components CSS   */

.redcolor {
  color: red;
}

.bluecolor {
  color: blue;
}

.greycolor {
  color: #848484;
}

.greencolor {
  color: green;
}

.rf_align_left {
  /*float: left;*/
  margin-left: 10px;
}

.rf_font_bold {
  font-weight: bold;
}

.eb_link {
  text-decoration: none;
  color: white;
}

.eb_fld_label {
  font-weight: bold;
  font-family: Arial;
  font-size: 11px;
  color: black;
}

.zo_fld_label_highlight {
  font-weight: bold;
  font-size: 14px;
}

.eb_textbox {
  color: black;
}

.zo_textarea {
  padding: 1px;
  width: 300px;
  height: 100px;
  color: black;
}

.zo_textare_div {
  width: 330px;
  word-wrap: break-word;
}

.allignTop {
  vertical-align: top;
}

.zo_tooltip {
  font-family: Arial;
  font-size: 10px;
}

.zo_textarea_participants {
  padding: 1px;
  height: 400px;
}

table {
  border-collapse: separate !important;
  border-spacing: 20px !important;
} /* cellspacing="25" */

.ui-growl {
  z-index: 99999999999 !important;
}

.selectMany {
  padding: 1px;
  color: black;
  font-size: 14px;
  width: 200px;
  height: 300px;
}

.event-grades-menu {
  width: 200px;
}

.ui-datepicker .ui-datepicker-title select {
  color: black !important;
}

/* -------------------------------------------------------------
   List datatables
   The 80em width is font-relative. Nova-Light hard-coded its
   widget font to 14px so the table measured 1120px; saga-blue's
   `body .ui-widget { font-size: 1rem }` resolves to this app's
   html font-size of 15px, which grew every one of these tables by
   exactly 80px (1200px) - more than the content column has on
   ~1200-1466px desktop viewports. Cap it at the column and let
   the table scroll itself (this class already has overflow:auto
   and white-space:nowrap).
   ------------------------------------------------------------- */
.eb_datatable {
  float: left;
  width: 80em;
  max-width: 100%;
  height: 30em;
  overflow: auto;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   PrimeFaces-native table layout (prototype: ContestBracketList).
   The modifier opts one page out of the fixed 80em x 30em scroll
   box above and hands the layout to the component instead:
   full-width table-layout:fixed, a CSS sticky header, and
   per-column responsivePriority (ui-column-p-*) for small screens.
   Nothing here is page-specific, so other list pages can adopt it
   by adding eb-dt-native; dropping the class reverts a page.
   ------------------------------------------------------------- */
.eb_datatable.eb-dt-native {
  clear: both;
  float: none;
  width: 100%;
  height: auto;
  overflow: visible;
  white-space: normal;
}

.eb_datatable.eb-dt-native .ui-datatable {
  width: 100%;
}

.eb_datatable.eb-dt-native .ui-datatable-tablewrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.eb_datatable.eb-dt-native .ui-datatable-tablewrapper::-webkit-scrollbar {
  height: 8px;
}

.eb_datatable.eb-dt-native .ui-datatable-tablewrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.eb_datatable.eb-dt-native .ui-datatable-tablewrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.eb_datatable.eb-dt-native .ui-datatable-tablewrapper::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* The global `table { border-spacing: 20px !important }` above is what the
   per-view tableStyle="...border-spacing:0px!important" inline hack used to
   cancel; do it here instead so p:column width= means the real cell width. */
.eb_datatable.eb-dt-native .ui-datatable table {
  border-spacing: 0 !important;
  min-width: max-content;
}

.eb_datatable.eb-dt-native .ui-datatable th,
.eb_datatable.eb-dt-native .ui-datatable td {
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Single-line content: an id, or the Open/Copy link pair. With saga's 15px
   per-side cell padding the old 70px Id column left 40px for a 57px value and
   the 120px Public URL column left 90px for 128px of links, so both wrapped
   onto two lines. The column widths are now sized to the content and nowrap
   keeps them on one line; the padding absorbs a rare overshoot (6-digit id). */
.eb_datatable.eb-dt-native .ui-datatable td.eb-nowrap,
.eb_datatable.eb-dt-native .ui-datatable th.eb-nowrap {
  white-space: nowrap;
}

.eb_datatable.eb-dt-native .ui-datatable thead th {
  background-color: #f8f9fa;
  white-space: nowrap;
}

.eb_datatable.eb-dt-native .ui-datatable thead th:not(.ui-selection-column) {
  min-width: 80px;
}

.eb_datatable.eb-dt-native .ui-datatable thead th:has(.ui-column-filter) {
  min-width: 140px;
}

.eb_datatable.eb-dt-native .ui-datatable .ui-column-filter {
  width: 100%;
  box-sizing: border-box;
  max-width: 320px;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 767px) {
  .eb_datatable.eb-dt-native {
    max-height: none !important;
    box-shadow: none !important;
  }
}

/* Reflow turns every cell into a full-width block, so the selection column's
   inline text-align:center (meant for the narrow desktop column) centres the
   checkbox in the middle of the card. !important beats that inline style.
   The reflow label span is empty for this column but still reserves the label
   gutter, which parks the checkbox a third of the way in - drop it. */
@media (max-width: 640px) {
  .eb_datatable.eb-dt-native .ui-datatable td.ui-selection-column {
    text-align: left !important;
  }
  .eb_datatable.eb-dt-native .ui-datatable td.ui-selection-column .ui-column-title {
    display: none;
  }
}

/* -------------------------------------------------------------
   DataTable Row Actions (Reusable across List Pages)
   ------------------------------------------------------------- */
.eb-row-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------
   PrimeFaces Confirm Dialog Severity Icons
   ------------------------------------------------------------- */
.ui-confirm-dialog .ui-confirm-dialog-severity {
  font-size: 1.5rem;
  margin-right: 0.75rem;
  vertical-align: middle;
  float: left;
}

/* Confirm dialog severity icon (PrimeIcons warning triangle) */
.ui-confirm-dialog .ui-confirm-dialog-severity.pi-exclamation-triangle {
  color: #e28743;
  font-size: 1.5rem;
}

/* -------------------------------------------------------------
   Layout & Grid System (Bootstrap/PrimeFaces Compatible)
   ------------------------------------------------------------- */

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
  flex-wrap: wrap;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

@media (min-width: 768px) {
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
}

@media (min-width: 992px) {
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
}

/* Jumbotron */
.jumbotron {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eeeeee;
  border-radius: 6px;
}

.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
  font-size: 36px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.jumbotron p {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.4;
}

/* Navigation Bar */
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

.navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 1030;
  border-width: 0 0 1px;
}

/* Cerulean / RichFaces Theme Navbar */
.navbar-inverse {
  background-color: #033c73;
  background-image: linear-gradient(to bottom, #033c73 0%, #022a51 100%);
  background-repeat: repeat-x;
  border-color: #022242;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  float: left;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  float: left;
  height: 50px;
  padding: 13px 15px;
  font-size: 19px;
  line-height: 20px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  letter-spacing: 0.2px;
}

.navbar-brand .eb-brand-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: #d1e5f8 !important;
}

.navbar-nav {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  float: left;
  align-items: center;
}

.navbar-nav > li {
  position: relative;
  display: block;
}

.navbar-nav > li > a {
  padding: 15px 15px;
  line-height: 20px;
  color: #e6f0fa;
  text-decoration: none;
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
  color: #ffffff !important;
  background-color: #022a51 !important;
  background-image: linear-gradient(
    to bottom,
    #022a51 0%,
    #011d38 100%
  ) !important;
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #011d38;
}

.navbar-left {
  float: left !important;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

.navbar-right {
  float: right !important;
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
}

.navbar-toggle {
  display: none;
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: #022a51;
  background-image: none;
  border: 1px solid #022242;
  border-radius: 4px;
  cursor: pointer;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: #011d38;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
  margin-top: 4px;
}

.navbar-toggle .icon-bar:first-child {
  margin-top: 0;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  display: none;
  min-width: 200px;
  padding: 6px 0;
  margin: 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #c2d5e8;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 50, 100, 0.18);
}

.dropdown.open > .dropdown-menu,
.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu > li > a {
  display: block;
  padding: 8px 20px;
  clear: both;
  font-weight: 500;
  line-height: 1.42857143;
  color: #2c3e50;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #ffffff;
  text-decoration: none;
  background-color: #033c73;
  background-image: linear-gradient(to right, #033c73 0%, #024a8e 100%);
}

.dropdown-header {
  display: block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777777;
  white-space: nowrap;
  font-weight: bold;
  text-transform: uppercase;
}

.divider {
  height: 1px;
  margin: 6px 0;
  overflow: hidden;
  background-color: #e2e8f0;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .collapse.navbar-collapse {
    display: none;
    width: 100%;
    clear: both;
  }
  .collapse.navbar-collapse.in {
    display: block;
  }
  .navbar-nav {
    float: none !important;
    display: block !important;
    margin: 7.5px -15px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
    display: block !important;
    margin: 10px 0 !important;
  }
  .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: #022a51;
    border: 0;
    box-shadow: none;
  }
  .dropdown-menu > li > a {
    color: #e6f0fa;
    padding: 8px 25px;
  }
  .dropdown-menu > li > a:hover {
    color: #fff;
    background-color: #011d38;
  }
}

/* Authenticated Page Layout (.sidebar, .main, mobile menu toggle) */
.navbar-fixed-top {
  border: 0 none;
}

@media (max-width: 767px) {
  .sidebar {
    display: none !important;
  }

  /* Opened from the navbar "Menu" button (.eb-menu-toggle). Shown inline
     above the page content instead of as an overlay, so it needs no
     backdrop or scroll-lock JS. */
  .sidebar.eb-sidebar-open {
    display: block !important;
    background-color: var(--surface-b, #f8f9fa);
    border: 1px solid var(--surface-border, #dee2e6);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
  }
}

/* Mobile-only button that reveals the left menu. */
.eb-navbar-toggles {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.eb-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 10px;
  background-color: #022a51;
  background-image: none;
  border: 1px solid #022242;
  border-radius: 4px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
}

.eb-menu-toggle:hover,
.eb-menu-toggle:focus {
  background-color: #011d38;
}

.eb-menu-toggle.is-open {
  background-color: #0a6ebd;
  border-color: #095a9b;
}

@media (max-width: 991px) {
  .eb-navbar-toggles {
    display: flex;
  }

  .navbar-toggle {
    margin: 0 !important;
    float: none !important;
  }
}

/* Keep the navbar on a single line on the narrowest phones: the brand is
   ~250px, so below 360px the label is dropped and only the icon shows. */
@media (max-width: 360px) {
  .eb-menu-toggle-text {
    display: none;
  }
}

.sidebar.active {
  margin-left: -250px;
}

@media (min-width: 768px) {
  .container-fluid > .row {
    flex-wrap: nowrap;
  }

  .container-fluid > .row > .main {
    min-width: 0;
  }

  .sidebar {
    background-color: var(--surface-b, #f8f9fa);
    border-right: 1px solid var(--surface-border, #dee2e6);
    bottom: 0;
    display: block;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    position: fixed;
    top: 51px;
    width: 25%;
    z-index: 1000;
  }
}

@media (min-width: 992px) {
  .sidebar {
    width: 16.66666667%;
  }
}

.main {
  padding: 0px;
}

@media (min-width: 768px) {
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Panels */
.panel {
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-primary {
  border-color: #337ab7;
}

.panel-primary > .panel-heading,
body .panel-primary.ui-panel .ui-panel-titlebar,
body .ui-panel.panel-primary .ui-panel-titlebar {
  color: #ffffff !important;
  background-color: #337ab7 !important;
  background-image: linear-gradient(
    to bottom,
    #337ab7 0%,
    #2e6da4 100%
  ) !important;
  border-color: #337ab7 !important;
  padding: 10px 15px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 16px;
  font-weight: bold;
}

body .panel-primary.ui-panel .ui-panel-titlebar a,
body .ui-panel.panel-primary .ui-panel-titlebar a {
  color: #ffffff !important;
}

body .panel-primary.ui-panel .ui-panel-content,
body .ui-panel.panel-primary .ui-panel-content {
  padding: 15px;
}

/* The authenticated page panel supplies the heading only.  Its content is
   the page itself, so do not add a second blank-looking strip below the
   heading. */
body .ui-panel.eb-auth-panel .ui-panel-content {
  padding: 0;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

.panel-body {
  padding: 15px;
}

/* Badges and Tags */
.badge,
.label {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.badge-info,
.label-info {
  color: #fff;
  background-color: #5bc0de;
}

.badge-primary,
.label-primary {
  color: #fff;
  background-color: #337ab7;
}

.badge-success,
.label-success {
  color: #fff;
  background-color: #5cb85c;
}

/* Buttons */
.btn-primary,
body .ui-button.btn-primary {
  color: #ffffff !important;
  background-color: #337ab7 !important;
  background-image: linear-gradient(
    to bottom,
    #337ab7 0%,
    #265a88 100%
  ) !important;
  border-color: #245580 !important;
  cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
body .ui-button.btn-primary:hover,
body .ui-button.btn-primary:focus,
body .ui-button.btn-primary.ui-state-hover,
body .ui-button.btn-primary.ui-state-focus {
  color: #ffffff !important;
  background-color: #265a88 !important;
  background-image: none !important;
  border-color: #1d4568 !important;
}

.btn-primary:active,
.btn-primary.active,
body .ui-button.btn-primary:active,
body .ui-button.btn-primary.ui-state-active {
  color: #ffffff !important;
  background-color: #1d4568 !important;
  background-image: none !important;
  border-color: #163652 !important;
}

.btn-success,
body .ui-button.btn-success,
body .ui-button.ui-button-success {
  color: #ffffff !important;
  background-color: #5cb85c !important;
  background-image: linear-gradient(
    to bottom,
    #5cb85c 0%,
    #419641 100%
  ) !important;
  border-color: #3e8f3e !important;
  cursor: pointer;
}

.btn-success:hover,
.btn-success:focus,
body .ui-button.btn-success:hover,
body .ui-button.btn-success:focus,
body .ui-button.btn-success.ui-state-hover,
body .ui-button.btn-success.ui-state-focus,
body .ui-button.ui-button-success:hover,
body .ui-button.ui-button-success:focus,
body .ui-button.ui-button-success.ui-state-hover,
body .ui-button.ui-button-success.ui-state-focus {
  color: #ffffff !important;
  background-color: #419641 !important;
  background-image: none !important;
  border-color: #398439 !important;
}

.btn-info,
body .ui-button.btn-info {
  color: #ffffff !important;
  background-color: #5bc0de !important;
  background-image: linear-gradient(
    to bottom,
    #5bc0de 0%,
    #2aabd2 100%
  ) !important;
  border-color: #28a4c9 !important;
  cursor: pointer;
}

.btn-info:hover,
.btn-info:focus,
body .ui-button.btn-info:hover,
body .ui-button.btn-info:focus,
body .ui-button.btn-info.ui-state-hover,
body .ui-button.btn-info.ui-state-focus {
  color: #ffffff !important;
  background-color: #2aabd2 !important;
  background-image: none !important;
  border-color: #1f7e9a !important;
}

.btn-danger,
body .ui-button.btn-danger,
body .ui-button.ui-button-danger {
  color: #ffffff !important;
  background-color: #d9534f !important;
  background-image: linear-gradient(
    to bottom,
    #d9534f 0%,
    #c12e2a 100%
  ) !important;
  border-color: #b92c28 !important;
  cursor: pointer;
}

.btn-danger:hover,
.btn-danger:focus,
body .ui-button.btn-danger:hover,
body .ui-button.btn-danger:focus,
body .ui-button.btn-danger.ui-state-hover,
body .ui-button.btn-danger.ui-state-focus,
body .ui-button.ui-button-danger:hover,
body .ui-button.ui-button-danger:focus,
body .ui-button.ui-button-danger.ui-state-hover,
body .ui-button.ui-button-danger.ui-state-focus {
  color: #ffffff !important;
  background-color: #c12e2a !important;
  background-image: none !important;
  border-color: #962421 !important;
}

.btn-lg,
body .ui-button.btn-lg {
  padding: 10px 16px !important;
  font-size: 18px !important;
  line-height: 1.3333333 !important;
  border-radius: 6px !important;
}

/* Social Share Widget */
.eb-social-share {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.eb-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff !important;
  border-radius: 18px;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
  white-space: nowrap;
}

.eb-share-btn i {
  font-size: 13.5px;
}

.eb-share-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
  color: #ffffff !important;
}

.eb-share-twitter {
  background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}

.eb-share-linkedin {
  background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}

.eb-share-facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
}

/* Footer Section */
.footer-wrapper {
  margin-top: 60px;
  padding: 48px 0 24px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  color: #475569;
}

.footer-content {
  display: flex;
  flex-direction: column;
}

/* Multi-Column Modern Footer */
.eb-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 1.2fr;
  gap: 36px;
  margin-bottom: 36px;
  text-align: left;
}

.eb-footer-brand-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.eb-footer-brand-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 320px;
}

.eb-footer-col-title {
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0f172a;
  margin: 0 0 16px;
}

.eb-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eb-footer-list li a {
  color: #64748b;
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eb-footer-list li a:hover {
  color: #0284c7;
  text-decoration: none;
  transform: translateX(3px);
}

.eb-footer-bottom-bar {
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #94a3b8;
}

/* Auth Pages & Centered Containers */
.auth-container,
.register-container {
  max-width: 580px;
  margin: 30px auto;
  padding: 0 15px;
}

.auth-card {
  background: #ffffff;
  border: 1px solid #d0dbe5;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(3, 60, 115, 0.08);
  overflow: hidden;
  margin-bottom: 25px;
}

.auth-card .panel-heading {
  background: linear-gradient(to right, #033c73 0%, #024a8e 100%);
  color: #ffffff;
  border-bottom: 1px solid #022a51;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.auth-card .panel-heading .panel-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.auth-card .panel-body {
  padding: 25px 25px 20px;
}

.auth-form-row {
  margin-bottom: 18px;
}

.auth-form-row label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #334155;
  font-size: 14px;
}

.auth-legal-text {
  font-size: 13px;
  color: #64748b;
  text-align: center;
  margin-top: 15px;
  line-height: 1.5;
}

.auth-legal-text a {
  color: #033c73;
  font-weight: 500;
}

/* Credential-autofill wash: Chrome tints autofilled inputs pale blue, which on a
   white auth card reads as a disabled field. Re-paint autofilled login/register
   inputs to the standard white so filled and empty states look identical. */
.auth-container input:-webkit-autofill,
.auth-container input:-webkit-autofill:hover,
.auth-container input:-webkit-autofill:focus,
.register-container input:-webkit-autofill,
.register-container input:-webkit-autofill:hover,
.register-container input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #334155;
  caret-color: #334155;
}

/* Unify the leading icon cell with the field so the pair reads as one control
   instead of a gray box bolted onto the input. */
.auth-container .input-group-addon {
  background-color: #ffffff;
  color: #64748b;
}

/* Empty password fields do not need a reveal control. A placeholder (including
   a single space for float-label fields) lets CSS track typed/autofilled values. */
.ui-password > input:placeholder-shown + .ui-password-icon {
  visibility: hidden;
  pointer-events: none;
}

/* Keep PrimeFaces' password toggle above the input in the login icon group. */
.auth-container .input-group > .ui-password {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}

.auth-container .input-group > .ui-password > .form-control {
  float: none;
  z-index: auto;
  padding-right: 2.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.eb-form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.eb-form-col-label {
  width: 32%;
  text-align: right;
  padding-right: 12px;
  vertical-align: middle;
  font-weight: 600;
  color: #334155;
  font-size: 14px;
}

.eb-form-col-input {
  width: 48%;
  vertical-align: middle;
}

.eb-form-col-input .form-control,
.eb-form-col-input .ui-inputtext,
.eb-form-col-input .ui-password {
  width: 100% !important;
}

.eb-form-col-msg {
  width: 20%;
  vertical-align: middle;
  padding-left: 8px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .eb-form-table {
    display: block;
  }
  .eb-form-table tbody,
  .eb-form-table tr,
  .eb-form-table td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 2px 0;
  }
  .eb-form-col-label {
    margin-top: 8px;
  }
}

/* Forms and Inputs */
.form-group {
  margin-bottom: 15px;
}

.form-control,
body .ui-inputtext.form-control,
body .ui-password.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition:
    border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s;
  box-sizing: border-box;
}

.form-control:focus,
body .ui-inputtext.form-control:focus,
body .ui-password.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table-cell;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-radius: 4px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

.input-group .input-group-addon:first-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group .form-control:not(:first-child):not(:last-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Tables */
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

/* =============================================================
   Modern Landing Page Styles
   ============================================================= */

.eb-landing-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Hero Section */
.eb-hero {
  position: relative;
  background: radial-gradient(120% 120% at 50% 10%, #0d5ca8 0%, #033c73 45%, #021a32 100%);
  color: #ffffff;
  padding: 56px 30px 48px;
  border-radius: 16px;
  margin-top: 15px;
  margin-bottom: 45px;
  box-shadow: 0 20px 45px -10px rgba(3, 60, 115, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
  text-align: center;
}

.eb-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 180%;
  background: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.15) 0%, rgba(3, 60, 115, 0) 65%);
  pointer-events: none;
}

.eb-hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.08) 0%, rgba(2, 26, 50, 0) 70%);
  pointer-events: none;
}

.eb-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}

.eb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e0f2fe;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.eb-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: ebPulse 2s infinite;
}

@keyframes ebPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

.eb-hero-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 18px;
  letter-spacing: -0.6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.eb-hero-highlight-text {
  background: linear-gradient(90deg, #38bdf8 0%, #a7f3d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.eb-hero-lead {
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #e2e8f0;
  margin: 0 auto 28px;
  max-width: 720px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.eb-hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.eb-btn-hero-primary,
body .ui-button.eb-btn-hero-primary {
  background: #16a34a !important;
  background-image: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.eb-btn-hero-primary:hover,
body .ui-button.eb-btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.52) !important;
  background-position: 0 -5px !important;
}

.eb-btn-icon-right {
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.eb-btn-hero-primary:hover .eb-btn-icon-right {
  transform: translateX(3px);
}

.eb-btn-hero-secondary,
.eb-btn-hero-tertiary,
body .ui-button.eb-btn-hero-secondary,
body .ui-button.eb-btn-hero-tertiary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px 22px !important;
  border-radius: 8px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.15s ease !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.eb-btn-hero-secondary:hover,
.eb-btn-hero-tertiary:hover,
body .ui-button.eb-btn-hero-secondary:hover,
body .ui-button.eb-btn-hero-tertiary:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.eb-hero-subtext {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #bae6fd;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.eb-hero-subtext i {
  color: #38bdf8;
  margin-right: 4px;
}

.eb-dot-separator {
  color: rgba(255, 255, 255, 0.35);
}

.eb-hero-highlights {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  flex-wrap: wrap;
}

.eb-highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 16px;
  border-radius: 50px;
  color: #f1f5f9;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease;
}

.eb-highlight-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.eb-highlight-item i {
  color: #38bdf8;
  font-size: 15px;
}

/* 2-Column Hero & Animated Bracket Simulation Stage */
.eb-hero-2col {
  text-align: left;
  padding: 50px 30px 46px;
}

.eb-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.eb-hero-2col .eb-hero-left {
  text-align: left;
}

.eb-hero-2col .eb-hero-badge {
  margin-bottom: 16px;
  padding: 5px 16px;
  font-size: 12.5px;
}

.eb-hero-2col .eb-hero-title {
  font-size: 40px;
  line-height: 1.18;
  margin: 0 0 16px;
}

.eb-hero-2col .eb-hero-lead {
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 540px;
}

.eb-hero-2col .eb-hero-actions {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.eb-hero-2col .eb-hero-subtext {
  justify-content: flex-start;
  margin-bottom: 0;
  gap: 12px;
}

.eb-hero-2col .eb-hero-subtext i {
  color: #4ade80;
}

/* Hero Right Visual & Stage */
.eb-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.eb-hero-stage {
  position: relative;
  width: 100%;
  max-width: 490px;
}

/* Floating Real-Time Status Chips */
.eb-stage-chip {
  position: absolute;
  z-index: 5;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  padding: 6px 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 15px rgba(56, 189, 248, 0.15);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  pointer-events: none;
}

.eb-stage-chip-top {
  top: -14px;
  right: -8px;
  animation: ebFloatTop 4.2s infinite ease-in-out;
}

.eb-stage-chip-bottom {
  bottom: -14px;
  left: -8px;
  animation: ebFloatBottom 4.8s infinite ease-in-out 0.6s;
}

.eb-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(245, 158, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 11px;
}

.eb-chip-icon-globe {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.eb-chip-text {
  display: flex;
  flex-direction: column;
}

.eb-chip-title {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.eb-chip-sub {
  font-size: 9.5px;
  color: #94a3b8;
  line-height: 1.2;
}

/* Glassmorphic Bracket Card */
.eb-live-card {
  background: linear-gradient(150deg, rgba(13, 37, 68, 0.88) 0%, rgba(5, 18, 36, 0.94) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eb-live-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(56, 189, 248, 0.25);
}

.eb-live-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-25deg);
  animation: ebCardShimmer 7s infinite ease-in-out;
  pointer-events: none;
}

/* Card Header */
.eb-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.eb-window-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.eb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.eb-dot-red { background: #ef4444; }
.eb-dot-yellow { background: #eab308; }
.eb-dot-green { background: #22c55e; }

.eb-card-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.2px;
}

.eb-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.eb-live-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  animation: ebPulse 1.5s infinite;
}

.eb-header-name {
  color: #e2e8f0;
  font-weight: 600;
}

.eb-badge-format {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
}

/* Bracket Simulation Diagram */
.eb-bracket-sim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 0;
}

.eb-sim-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.eb-sim-round-label {
  font-size: 8.5px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
  text-align: center;
  text-transform: uppercase;
}

.eb-label-gold {
  color: #fbbf24;
}

.eb-sim-match {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 3px;
  margin: 4px 0;
  width: 124px;
}

.eb-match-final {
  width: 126px;
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(251, 191, 36, 0.3);
}

.eb-sim-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: #cbd5e1;
  transition: all 0.2s ease;
  margin: 1px 0;
}

.eb-team-seed {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 13px;
}

.eb-team-name {
  font-weight: 600;
  color: #cbd5e1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.eb-team-score {
  font-weight: 800;
  color: #64748b;
  font-size: 10.5px;
  min-width: 10px;
  text-align: right;
}

.eb-sim-slot.eb-winner {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.22) 0%, rgba(15, 23, 42, 0.4) 100%);
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.eb-sim-slot.eb-winner .eb-team-name {
  color: #ffffff;
}

.eb-sim-slot.eb-winner .eb-team-score {
  color: #4ade80;
}

.eb-win-check {
  color: #4ade80;
  font-size: 9px;
}

.eb-sim-slot.eb-champion-slot {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.25) 0%, rgba(15, 23, 42, 0.6) 100%);
  border: 1px solid rgba(251, 191, 36, 0.55);
  animation: ebActiveMatch 2s infinite ease-in-out;
}

.eb-score-active {
  color: #fbbf24 !important;
}

.eb-win-trophy {
  color: #fbbf24;
  font-size: 10px;
}

/* SVG Flow Connectors */
.eb-sim-connectors {
  width: 26px;
  height: 125px;
  display: flex;
  align-items: center;
}

.eb-connect-final {
  width: 20px;
  height: 65px;
}

.eb-connector-svg {
  width: 100%;
  height: 100%;
}

.eb-path-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.eb-path-flow {
  stroke: url(#ebLineGrad1);
  stroke-dasharray: 6 3;
  animation: ebFlowAnim 2s linear infinite;
}

.eb-path-gold {
  stroke: url(#ebLineGradGold);
  stroke-dasharray: 5 2;
  animation: ebFlowAnim 1.4s linear infinite;
}

/* Champion Spotlight */
.eb-sim-champion {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4px;
  text-align: center;
}

.eb-trophy-glow-halo {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, transparent 70%);
  animation: ebTrophyHalo 2.4s infinite ease-in-out;
  pointer-events: none;
}

.eb-trophy-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(217, 119, 6, 0.25));
  border: 1px solid rgba(251, 191, 36, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
  animation: ebTrophyBounce 3s infinite ease-in-out;
}

.eb-trophy-icon {
  color: #fcd34d;
  font-size: 19px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
}

.eb-champion-label {
  font-size: 8.5px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.eb-champion-name {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  margin-top: 1px;
}

.eb-champion-confetti {
  position: absolute;
  top: -4px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}

.eb-sparkle {
  font-size: 10px;
  color: #fde047;
}

.eb-sp-1 { animation: ebSparkle 1.8s infinite ease-in-out; }
.eb-sp-2 { animation: ebSparkle 2.3s infinite 0.6s ease-in-out; color: #38bdf8; }
.eb-sp-3 { animation: ebSparkle 2s infinite 1.1s ease-in-out; color: #4ade80; }

/* Card Footer */
.eb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  color: #94a3b8;
}

.eb-footer-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #cbd5e1;
}

.eb-footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
  padding: 2px 7px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 9.5px;
}

/* Keyframe Animations */
@keyframes ebFlowAnim {
  0% { stroke-dashoffset: 18; }
  100% { stroke-dashoffset: 0; }
}

@keyframes ebCardShimmer {
  0% { left: -150%; }
  35%, 100% { left: 200%; }
}

@keyframes ebFloatTop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes ebFloatBottom {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes ebTrophyHalo {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.9); }
  50% { opacity: 0.95; transform: translateX(-50%) scale(1.2); }
}

@keyframes ebTrophyBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes ebSparkle {
  0%, 100% { opacity: 0.2; transform: translateY(0) scale(0.8); }
  50% { opacity: 1; transform: translateY(-4px) scale(1.2); }
}

@keyframes ebActiveMatch {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.45); }
}

/* Interactive Showcase Box */
.eb-showcase-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px 32px;
  margin-bottom: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.eb-showcase-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.eb-showcase-info {
  flex: 1 1 380px;
}

.eb-showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  color: #033c73;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
  border: 1px solid #bfdbfe;
}

.eb-showcase-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  line-height: 1.3;
}

.eb-showcase-desc {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 18px;
}

.eb-showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.eb-showcase-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.eb-showcase-tag i {
  color: #16a34a;
  font-size: 12px;
}

.eb-showcase-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.eb-btn-showcase {
  background: #0284c7 !important;
  background-image: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.eb-btn-showcase:hover {
  background-position: 0 -5px !important;
  color: #ffffff !important;
}

.eb-btn-showcase-sec {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
}

.eb-btn-showcase-sec:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.eb-showcase-media {
  flex: 1 1 500px;
  max-width: 560px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.eb-bracket-switcher-frame {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: block;
  width: 100%;
}

.eb-imageswitch {
  width: 100% !important;
  max-width: 100% !important;
  height: 280px !important;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.eb-bracket-img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Section Header */
.eb-section-header {
  text-align: center;
  margin-bottom: 35px;
}

.eb-section-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}

.eb-section-subtitle {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* How It Works - 3 Step Workflow */
.eb-steps-section {
  margin-bottom: 50px;
}

.eb-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eb-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.eb-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(3, 60, 115, 0.08);
  border-color: #cbd5e1;
}

.eb-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);
}

.eb-step-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}

.eb-step-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Features Grid */
.eb-features-section {
  margin-bottom: 50px;
}

/* 3 columns so the 6 feature cards form two even rows (a 4-col grid left the
   second row half empty). */
.eb-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width: 100%;
}

.eb-feature-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
}

.eb-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(3, 60, 115, 0.09);
  border-color: #cbd5e1;
}

.eb-feature-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.eb-icon-blue { background: #e0f2fe; color: #0284c7; }
.eb-icon-green { background: #dcfce7; color: #16a34a; }
.eb-icon-purple { background: #f3e8ff; color: #9333ea; }
.eb-icon-amber { background: #fef3c7; color: #d97706; }
.eb-icon-teal { background: #ccfbf1; color: #0d9488; }
.eb-icon-indigo { background: #e0e7ff; color: #4f46e5; }
.eb-icon-rose { background: #ffe4e6; color: #e11d48; }
.eb-icon-emerald { background: #d1fae5; color: #059669; }

.eb-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
}

.eb-card-text {
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

.eb-card-link {
  color: #0284c7;
  font-weight: 600;
  text-decoration: underline;
}

.eb-card-link:hover {
  color: #0369a1;
}

/* Pre-Footer CTA Banner */
.eb-cta-banner-section {
  margin-bottom: 45px;
}

.eb-cta-banner {
  background: linear-gradient(135deg, #033c73 0%, #022547 100%);
  border-radius: 16px;
  padding: 44px 36px;
  box-shadow: 0 10px 30px rgba(3, 60, 115, 0.2);
  color: #ffffff;
}

.eb-cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.eb-cta-text-group {
  flex: 1 1 400px;
}

.eb-cta-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.eb-cta-lead {
  font-size: 15px;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}

.eb-cta-action-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eb-cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.eb-cta-subtext {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #bae6fd;
  font-size: 12.5px;
  font-weight: 500;
  flex-wrap: wrap;
}

.eb-cta-subtext i {
  color: #38bdf8;
  margin-right: 3px;
}

.eb-btn-cta-primary,
body .ui-button.eb-btn-cta-primary {
  background: #22c55e !important;
  background-image: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.38) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.eb-btn-cta-primary:hover,
body .ui-button.eb-btn-cta-primary:hover {
  background-position: 0 -5px !important;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.48) !important;
}

.eb-btn-cta-secondary,
body .ui-button.eb-btn-cta-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}

.eb-btn-cta-secondary:hover,
body .ui-button.eb-btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Responsive Breakpoints */
@media (max-width: 1199px) {
  .eb-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .eb-footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 991px) {
  .eb-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .eb-hero-2col {
    text-align: center;
  }
  .eb-hero-2col .eb-hero-left {
    text-align: center;
  }
  .eb-hero-2col .eb-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .eb-hero-2col .eb-hero-actions,
  .eb-hero-2col .eb-hero-subtext,
  .eb-hero-2col .eb-hero-highlights {
    justify-content: center;
  }
  .eb-hero-stage {
    margin: 0 auto;
  }
  .eb-steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .eb-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .eb-hero {
    padding: 24px 12px 20px;
    margin-top: 8px;
    margin-bottom: 22px;
    border-radius: 12px;
  }

  .eb-hero-grid {
    gap: 20px;
    width: 100%;
  }

  .eb-hero-stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .eb-hero-badge {
    margin: 0 auto 12px;
  }

  .eb-hero-title {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .eb-hero-lead {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .eb-hero-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
  }

  .eb-hero-actions .ui-button,
  .eb-hero-actions .btn {
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }

  .eb-hero-subtext {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    font-size: 11.5px;
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .eb-dot-separator {
    display: inline-block;
    opacity: 0.4;
    font-size: 9px;
  }

  .eb-stage-chip {
    display: none;
  }

  .eb-live-card {
    padding: 10px 8px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
  }

  .eb-card-header {
    padding-bottom: 7px;
    margin-bottom: 7px;
    gap: 4px;
  }

  .eb-window-dots {
    gap: 3px;
  }

  .eb-dot {
    width: 6px;
    height: 6px;
  }

  .eb-card-header-title {
    font-size: 9.5px;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .eb-header-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 120px;
  }

  .eb-live-indicator {
    font-size: 8px;
    padding: 1px 4px;
    gap: 3px;
  }

  .eb-badge-format {
    font-size: 8px;
    padding: 1px 5px;
    white-space: nowrap;
  }

  .eb-bracket-sim {
    gap: 0;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .eb-sim-round-label {
    font-size: 7px;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
  }

  .eb-sim-match {
    width: 78px;
    padding: 2px;
    margin: 2px 0;
    border-radius: 4px;
  }

  .eb-match-final {
    width: 80px;
  }

  .eb-sim-slot {
    font-size: 8px;
    padding: 1.5px 2.5px;
    gap: 2px;
    margin: 1px 0;
  }

  .eb-team-seed {
    font-size: 6.5px;
    padding: 0 2px;
    line-height: 9px;
    border-radius: 2px;
  }

  .eb-team-name {
    font-size: 8px;
    max-width: 42px;
  }

  .eb-team-score {
    font-size: 8px;
  }

  .eb-win-check,
  .eb-win-trophy {
    font-size: 7.5px;
  }

  .eb-sim-connectors {
    width: 12px;
    height: 96px;
  }

  .eb-connect-final {
    width: 8px;
    height: 48px;
  }

  .eb-sim-champion {
    width: 60px;
    padding: 1px;
  }

  .eb-trophy-glow-halo {
    width: 32px;
    height: 32px;
    top: 4px;
  }

  .eb-trophy-box {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    margin-bottom: 2px;
  }

  .eb-trophy-icon {
    font-size: 13px;
  }

  .eb-champion-label {
    font-size: 6.5px;
    letter-spacing: 0.4px;
  }

  .eb-champion-name {
    font-size: 8px;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .eb-sparkle {
    font-size: 7px;
  }

  .eb-card-footer {
    padding-top: 6px;
    margin-top: 6px;
    font-size: 8.5px;
  }

  .eb-footer-stat {
    font-size: 8px;
    gap: 3px;
  }

  .eb-footer-pill {
    font-size: 7.5px;
    padding: 1px 4px;
  }

  .eb-showcase-box {
    padding: 24px 18px;
    margin-bottom: 35px;
  }

  .eb-showcase-grid {
    flex-direction: column;
    gap: 24px;
  }

  .eb-showcase-info {
    text-align: center;
    flex: 1 1 auto;
  }

  .eb-showcase-title {
    font-size: 20px;
  }

  .eb-showcase-tags {
    justify-content: center;
  }

  .eb-showcase-actions {
    justify-content: center;
  }

  .eb-showcase-actions .btn {
    width: 100%;
  }

  .eb-showcase-media {
    max-width: 100%;
    /* The parent becomes a column flex container here, so the desktop
       `flex: 1 1 500px` basis would resolve to a 500px HEIGHT and leave
       ~280px of blank white space under the image. Reset it. */
    flex: 1 1 auto;
  }

  .eb-imageswitch {
    height: 220px !important;
  }

  .eb-section-title {
    font-size: 22px;
  }

  .eb-steps-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .eb-step-card {
    padding: 20px 18px;
  }

  .eb-features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .eb-feature-card {
    padding: 20px 18px;
  }

  .eb-cta-banner {
    padding: 28px 20px;
    text-align: center;
  }

  .eb-cta-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  /* Same flex-basis trap as .eb-showcase-media: `flex: 1 1 400px` becomes a
     400px-tall text block in column direction, pushing the buttons away. */
  .eb-cta-text-group {
    flex: 1 1 auto;
  }

  .eb-cta-action-group {
    width: 100%;
  }

  .eb-cta-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .eb-cta-subtext {
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  .eb-btn-cta-primary,
  .eb-btn-cta-secondary,
  body .ui-button.eb-btn-cta-primary,
  body .ui-button.eb-btn-cta-secondary {
    width: 100% !important;
  }

  .eb-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .eb-footer-brand-title {
    justify-content: center;
  }

  .eb-footer-brand-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .eb-social-share {
    justify-content: center;
    gap: 8px;
  }

  .eb-share-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  .eb-footer-list li a {
    justify-content: center;
  }

  .eb-footer-bottom-bar {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .eb-social-share {
    gap: 12px;
  }

  .eb-share-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .eb-share-btn .eb-share-label {
    display: none;
  }

  .eb-share-btn i {
    font-size: 16px;
    margin: 0;
  }
}

/* -------------------------------------------------------------
   Responsive List Screens (e.g. ContestBracketList)
   ------------------------------------------------------------- */

.eb-list-wrapper {
  float: left;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 14px 16px 4px 16px;
}

/*
 * An eb_list sits in a p:panel under .ui-panel-content. Since saga-blue the
 * font-relative 80em datatable is 80px wider (see .eb_datatable above), so the
 * wrapper's float is neutralised and the wrapping panelGrid clamped at every
 * width to keep the document from overflowing. flow-root is required, not
 * cosmetic: the toolbar and datatable inside are themselves floats, and
 * without a BFC the in-flow wrapper would only contribute its own padding to
 * the panel body - an ~18px empty bordered strip under the header (the
 * auth-page-shell e2e guard rejects exactly that height band).
 */
.ui-panel-content .eb-list-wrapper {
  display: flow-root;
  float: none;
  width: 100%;
  max-width: 1280px;
  box-sizing: border-box;
}

/* -------------------------------------------------------------
   Column-count width tiers:
   Balances table proportion based on the number of columns,
   preventing narrower tables (e.g. TournamentList with 3 data cols)
   from stretching excessively on wide screens.
   ------------------------------------------------------------- */
.eb-list-wrapper.eb-list-cols-3,
.ui-panel-content .eb-list-wrapper.eb-list-cols-3 {
  max-width: 720px;
}

.eb-list-wrapper.eb-list-cols-4,
.ui-panel-content .eb-list-wrapper.eb-list-cols-4 {
  max-width: 800px;
}

.eb-list-wrapper.eb-list-cols-5,
.ui-panel-content .eb-list-wrapper.eb-list-cols-5 {
  max-width: 960px;
}

.eb-list-wrapper.eb-list-cols-6,
.ui-panel-content .eb-list-wrapper.eb-list-cols-6 {
  max-width: 1100px;
}

.eb-list-wrapper .ui-panel-content > table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.eb-list-toolbar {
  float: left;
  margin-bottom: 12px;
}

.eb-list-toolbar > .rf_align_left,
.eb-list-actions.rf_align_left {
  margin-left: 0 !important;
}

.eb-list-info {
  clear: both;
  float: left;
  margin-left: 10px;
}

/* .eb-list-info is a float, so the panel body needs a BFC too: without it the
   body's white background stops at the in-flow wrapper and the page's grey
   background shows through below the table. */
.main .ui-panel .ui-panel-content {
  display: flow-root;
}

@media (max-width: 1199px) {
  .eb-list-wrapper {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-list-toolbar {
    float: none !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .eb-list-toolbar > .rf_align_left {
    float: none !important;
  }

  .eb-list-info {
    float: none !important;
    margin-left: 0 !important;
    margin-top: 15px !important;
    width: 100% !important;
    padding: 12px 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .eb-list-info br {
    display: none !important;
  }

  .eb_datatable {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 991px) {
  .eb-list-actions,
  .eb-list-actions tbody,
  .eb-list-actions tr {
    display: block !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
  }

  .eb-list-actions tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .eb-list-actions td {
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .eb-list-actions .ui-button {
    margin: 0 !important;
  }
}

@media (max-width: 767px) {
  .eb-list-wrapper {
    padding: 6px 2px 2px 2px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .eb-list-toolbar {
    overflow: hidden !important;
    margin: 0 0 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-list-actions,
  .eb-list-actions tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  .eb-list-actions tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-list-actions td {
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    box-sizing: border-box !important;
  }

  .eb-list-actions td:not(:has(.ui-button-icon-only)) {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 3px) !important;
  }

  .eb-list-actions td:not(:has(.ui-button-icon-only)) .ui-button {
    width: 100% !important;
  }

  .eb-list-actions td:has(.eb-btn-new),
  .eb-list-actions td:has(.eb-btn-view-edit) {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .eb-list-actions .eb-btn-new,
  .eb-list-actions .eb-btn-view-edit {
    width: 100% !important;
    justify-content: center !important;
  }

  .eb-list-actions td:has(.eb-btn-delete-selected),
  .eb-list-actions td:has(.eb-btn-delete-all),
  .eb-list-actions td:has(.eb-btn-switch-super),
  .eb-list-actions td:has(.eb-btn-switch-user) {
    flex: 1 1 calc(50% - 3px) !important;
    max-width: calc(50% - 3px) !important;
  }

  .eb-list-actions .eb-btn-delete-selected,
  .eb-list-actions .eb-btn-delete-all,
  .eb-list-actions .eb-btn-switch-super,
  .eb-list-actions .eb-btn-switch-user {
    width: 100% !important;
    justify-content: center !important;
  }

  .eb-list-actions td:has(.eb-btn-export) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .eb-list-actions .ui-button {
    box-sizing: border-box !important;
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
  }

  .eb-list-actions .ui-button.ui-button-icon-only {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
  }

  .eb_datatable {
    height: auto !important;
    max-height: 70vh !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  /* Table styling enhancements on mobile */
  .eb_datatable .ui-datatable thead th,
  .eb_datatable .ui-datatable tbody td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .eb_datatable .ui-datatable thead th .ui-column-filter {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    padding: 3px 6px !important;
  }

  /* Horizontal scroll hint */
  .eb_datatable::-webkit-scrollbar {
    height: 6px !important;
    width: 6px !important;
  }

  .eb_datatable::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 3px !important;
  }

  .eb_datatable::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
  }

  .eb_datatable::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
  }

  /* Responsive Paginator */
  .eb_datatable .ui-paginator {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
  }

  .eb_datatable .ui-paginator .ui-paginator-current {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
  }

  .eb_datatable .ui-paginator .ui-paginator-page,
  .eb_datatable .ui-paginator .ui-paginator-first,
  .eb_datatable .ui-paginator .ui-paginator-prev,
  .eb_datatable .ui-paginator .ui-paginator-next,
  .eb_datatable .ui-paginator .ui-paginator-last {
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
  }

  /* Main container mobile spacing */
  .main {
    padding: 8px 10px !important;
  }
}

/* -------------------------------------------------------------
   Responsive CRUD Screens (e.g. ContestBracketCRUD)
   ------------------------------------------------------------- */

.eb-crud-wrapper {
  float: left;
  max-width: 100%;
}

/*
 * Desktop form fields: the p:inputText fields would otherwise size themselves
 * from their markup `size` attribute (~242px) and leave the rest of their grid
 * cell empty. Let the field (and its inplace/autocomplete wrappers) fill the
 * cell instead. The 767px media block at the bottom of this file re-applies
 * the same widths on top of the stacked mobile layout.
 *
 * `.zo_textare_div` is deliberately not in this list: it is a fixed-width
 * wrapper rendered OUTSIDE the collapsed p:inplace, so stretching it would
 * change the table's shrink-to-fit width while the field is still unopened.
 */
.eb-crud-form-grid .ui-inplace,
.eb-crud-form-grid .ui-inplace-content:not(.ui-helper-hidden),
.eb-crud-form-grid .ui-autocomplete {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

.eb-crud-form-grid input.rf_textbox,
.eb-crud-form-grid input.eb_textbox,
.eb-crud-form-grid input.ui-inputtext,
.eb-crud-form-grid .ui-autocomplete-input,
.eb-crud-form-grid .ui-inputfield,
.eb-crud-form-grid .zo_textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep the datepicker trigger on the same row as its now full-width input. */
.eb-crud-form-grid .ui-calendar {
  display: flex;
  width: 100% !important;
  max-width: 100% !important;
}

.eb-crud-form-grid .ui-calendar input {
  flex: 1 !important;
}

/*
 * Floating-label rows (ContestBracketCRUD validation, PF float-label
 * pattern): their caption lives inside the field, so the first grid column
 * (the label slot) is empty in these rows. Pull each field across that
 * column so it starts at the form's left edge, and keep vertical clearance
 * so a floated caption never touches the field above.
 * -150px = pinned 130px label column + 20px cellspacing of the panelGrid.
 */
@media (min-width: 768px) {
  .eb-crud-form-grid tr:has(> td > .ui-float-label) > td:first-child {
    width: 130px;
    box-sizing: border-box;
  }

  .eb-crud-form-grid td > .ui-float-label {
    margin: 4px 0 8px -150px;
  }

  .eb-crud-form-grid td > .ui-float-label.eb-crud-comments-float-label {
    margin-top: 14px;
  }
}

/*
 * Read-only field in a float-label row (Tournament Id on ContestBracketCRUD):
 * styled like the editable fields but locked. Its value is always present, so
 * the caption float is enforced through the field's own class instead of the
 * widget-skinning script, and the box is tinted to signal "read only".
 */
.eb-crud-form-grid .ui-float-label > input.eb-readonly-field {
  background-color: #eef1f4;
  color: #495057;
}

.eb-crud-form-grid .ui-float-label > input.eb-readonly-field ~ label {
  top: -0.75em;
  font-size: 12px;
}

/*
 * Date picker "Done" button (injected by eventbracket.js into every
 * p:datePicker that renders a button bar). PF15's touch (mobile) panel has no
 * close control of its own - the only exits are tapping the dimmed mask around
 * the panel (invisible) or "Clear", which also empties the value. The
 * saga-blue theme styles the button through its existing
 * `ui-datepicker-buttonbar button` rules.
 */
.eb-datepicker-done-wrap {
  padding: 0 0.5rem 0.5rem;
}

.eb-datepicker-done {
  width: 100%;
}

@media (max-width: 767px) {
  /*
   * The touch panel is a fixed-position modal (min-width: 80vw / width: auto),
   * but the app-wide `table { border-spacing: 20px !important }` inflates its
   * content past the viewport (453px measured on a 390px screen, clipping
   * both edges). Reset the spacing inside the panel so it shrinks to fit;
   * the desktop popup keeps its current sizing.
   */
  .ui-datepicker-touch-ui.ui-datepicker {
    max-width: calc(100vw - 12px);
  }

  .ui-datepicker-touch-ui table {
    border-spacing: 0 !important;
  }
}

/* Right-hand column: ad slot or photo/logo upload block */
.eb-crud-ad,
.eb-crud-aside {
  float: right;
}

/*
 * Server-side form error shown next to the control that produced it (e.g. the
 * renewal plan radio rejecting an option that exceeds max_subscription_days).
 */
.eb-form-alert {
  max-width: 640px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 4px;
  color: #b91c1c;
  font-weight: 600;
  box-sizing: border-box;
}

.eb-crud-section-title {
  margin-left: 10px;
  font-size: 15px;
  font-family: inherit;
  font-weight: bold;
  color: #0f172a;
  display: block;
  margin-top: 15px;
  margin-bottom: 8px;
}

.eb-participants-textarea {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 13.5px;
}

/*
 * PrimeFaces 15 renders p:selectOneRadio through the leftover PrimeFlex v2
 * grid classes (ui-grid / ui-g / ui-g-12). The stub grid rules still shipped
 * in components.css add .5em padding to every option cell, while the
 * `::before/::after { content: ""; display: table }` clearfix pseudos add a
 * ~40px blank block above and below the group plus one extra flex line per
 * option. Together they doubled the height of the radio list. The options
 * space themselves through their labels, so the stub padding is zeroed and
 * the clearfix pseudos removed.
 */
.ui-selectoneradio.ui-grid::before,
.ui-selectoneradio.ui-grid::after,
.ui-selectoneradio .ui-g::before,
.ui-selectoneradio .ui-g::after {
  display: none;
}

.ui-selectoneradio .ui-g > div {
  padding: 0;
}

@media (max-width: 1199px) {
  .eb-crud-wrapper {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-crud-ad,
  .eb-crud-aside {
    float: none !important;
    clear: both !important;
    margin: 20px auto !important;
    text-align: center !important;
    width: auto !important;
  }

  /* Keep the photo/logo table centred under the form on tablets and phones */
  .eb-crud-aside .ui-panelgrid,
  .eb-crud-ad .ui-panelgrid {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 991px) {
  .eb-crud-actions,
  .eb-crud-actions tbody,
  .eb-crud-actions tr {
    display: block !important;
    width: 100% !important;
  }

  .eb-crud-actions tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .eb-crud-actions td {
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .eb-crud-actions .ui-button {
    margin: 0 !important;
    min-height: 40px !important;
  }
}

@media (max-width: 767px) {
  /* Form table stacks into single column for easy mobile inputs */
  .eb-crud-form-grid,
  .eb-crud-form-grid tbody,
  .eb-crud-participants-grid,
  .eb-crud-participants-grid tbody,
  .eb-crud-conf-grid,
  .eb-crud-conf-grid tbody {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .eb-crud-form-grid tr,
  .eb-crud-participants-grid tr,
  .eb-crud-conf-grid tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .eb-crud-form-grid td,
  .eb-crud-participants-grid td,
  .eb-crud-conf-grid td {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Labels */
  .eb-crud-form-grid td:first-child,
  .eb-crud-participants-grid td:first-child,
  .eb-crud-conf-grid td:first-child {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding-bottom: 2px !important;
  }

  /* Make form inputs and inplace elements fill available mobile width */
  .eb-crud-form-grid .ui-inplace {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  .eb-crud-form-grid .ui-inplace-display {
    display: inline-block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 4px !important;
    min-height: 38px !important;
    line-height: 20px !important;
  }

  .eb-crud-form-grid .ui-inplace-content:not(.ui-helper-hidden) {
    display: block;
    width: 100% !important;
  }

  .eb-crud-form-grid .ui-inplace-display.ui-helper-hidden,
  .eb-crud-form-grid .ui-inplace-content.ui-helper-hidden,
  .eb-crud-form-grid .ui-inplace-display[style*="display: none"],
  .eb-crud-form-grid .ui-inplace-content[style*="display: none"] {
    display: none !important;
  }

  .eb-crud-form-grid .ui-autocomplete,
  .eb-crud-form-grid .ui-autocomplete-input,
  .eb-crud-form-grid input.rf_textbox,
  .eb-crud-form-grid input.eb_textbox,
  .eb-crud-form-grid input.ui-inputtext,
  .eb-crud-form-grid .ui-inputfield,
  .eb-crud-form-grid .zo_textare_div,
  .eb-crud-form-grid .zo_textarea,
  .eb-participants-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-crud-form-grid input.rf_textbox,
  .eb-crud-form-grid input.eb_textbox,
  .eb-crud-form-grid input.ui-inputtext,
  .eb-crud-form-grid .ui-autocomplete-input {
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
  }

  .eb-crud-form-grid .ui-calendar {
    display: flex !important;
    width: 100% !important;
  }

  .eb-crud-form-grid .ui-calendar input {
    flex: 1 !important;
    width: 100% !important;
    min-height: 38px !important;
  }

  .eb-crud-form-grid .ui-calendar .ui-datepicker-trigger {
    height: 38px !important;
  }

  /* Dropdowns, radio groups and multi-selects fill the row */
  .eb-crud-form-grid select,
  .eb-crud-form-grid .ui-selectonemenu,
  .eb-crud-form-grid .ui-selectcheckboxmenu,
  .eb-crud-form-grid .ui-selectoneradio,
  .eb-crud-form-grid .ui-selectmanycheckbox,
  .eb-crud-form-grid .ui-selectbooleancheckbox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-crud-form-grid select {
    min-height: 38px !important;
    font-size: 14px !important;
  }

  .eb-crud-form-grid .ui-selectonemenu,
  .eb-crud-form-grid .ui-selectcheckboxmenu {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
  }

  .eb-crud-form-grid .ui-selectonemenu .ui-selectonemenu-label,
  .eb-crud-form-grid .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label {
    flex: 1 !important;
    width: auto !important;
    box-sizing: border-box !important;
    line-height: 26px !important;
  }

  .eb-crud-form-grid table td,
  .eb-crud-conf-grid table td {
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
  }

  .eb-crud-form-grid table td label,
  .eb-crud-conf-grid table td label {
    margin-left: 8px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer !important;
  }

  /* Criteria grids wrapping */
  .eb-crud-criteria-grid,
  .eb-crud-criteria-grid tbody {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .eb-crud-criteria-grid tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .eb-crud-criteria-grid td {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .eb-crud-criteria-grid td label {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }

  /* Action buttons stack / wrap on mobile */
  .eb-crud-actions,
  .eb-crud-actions tbody {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .eb-crud-actions tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .eb-crud-actions td {
    display: inline-flex !important;
    padding: 0 !important;
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 120px !important;
  }

  /* A lone button (e.g. Update / Back) spans the full row */
  .eb-crud-actions td:only-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .eb-crud-actions td .ui-button,
  .eb-crud-actions td .ui-button.btn,
  .eb-crud-criteria-grid td .ui-button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  /* Remove empty spacer table cells (h:outputLabel value="" placeholders) */
  .eb-crud-actions td:empty,
  .eb-crud-form-grid td:empty,
  .eb-crud-participants-grid td:empty,
  .eb-crud-conf-grid td:empty,
  .eb-crud-actions td:has(> label:empty),
  .eb-crud-form-grid td:has(> label:empty),
  .eb-crud-participants-grid td:has(> label:empty),
  .eb-crud-conf-grid td:has(> label:empty) {
    display: none !important;
  }

  /* Multi-select listboxes stay touch friendly */
  .eb-crud-form-grid select[multiple] {
    min-height: 120px !important;
  }

  .eb-crud-form-grid .ui-inputtextarea,
  .eb-crud-form-grid textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .eb-crud-section-title {
    margin-left: 0 !important;
  }
}

/* -------------------------------------------------------------
   Public bracket generator criteria blocks
   The criteria render as two sibling panelGrid tables (Skip
   Consolation Round; then Skip Grand Final Comeback and Skip
   Secondary Final). The global `table { border-spacing: 20px }`
   adds that spacing around each table's outer edge too, so the join
   between the two tables would show 40px while rows inside a table
   show 20px. Pull the second block up by the doubled edge. Below
   768px the criteria grids switch to display:block (border-spacing
   no longer applies), so the pull-up is desktop only.
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  .eb-criteria-block + .eb-criteria-block {
    margin-top: -20px;
  }
}

/* -------------------------------------------------------------
   Responsive Bracket Screens (Bracket, CBracket, RoundRobin, etc.)
   ------------------------------------------------------------- */

/* Reset rf_align_left margin-left on toolbar action buttons only */
.eb-bracket-toolbar > .rf_align_left,
.eb-bracket-actions.rf_align_left {
  margin-left: 0 !important;
}

/* Desktop Defaults (min-width: 768px) */
.eb-bracket-toolbar {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 20px 4px 20px !important;
  margin: 0 !important;
}

.eb-bracket-actions,
.eb-bracket-actions tbody {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

.eb-bracket-actions tr {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eb-bracket-actions td {
  display: inline-flex !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.eb-bracket-actions td .ui-button,
.eb-bracket-actions td .btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

/* Bracket Hint / Info Note Banner (Desktop - Compact width) */
.eb-bracket-info-grid,
.eb-bracket-info-grid.rf_align_left {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 6px 0 10px 0 !important;
  box-sizing: border-box !important;
}

.eb-bracket-info-grid tbody {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.eb-bracket-info-grid tr {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.eb-bracket-info-grid td {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: #0369a1 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Navigation loading overlay (shared p:blockUI "ebNavBusy").
   The blocker covers the whole document (block="@(body)") and PF sets an
   inline z-index starting at ~1000 - below the Bootstrap navbar (1030) - so
   raise it here. PF also centres the content inside the blocker (the
   document), which can sit off-screen on a scrolled page; pin it to the
   viewport centre instead and drop the default widget chrome, as with the
   ajax indicator only the loading bar should be visible.

   PF sizes the blocker to the BODY box and positions it at the body's offset.
   The layout puts 60px of top padding on h:body (Bootstrap fixed navbar), and
   that padding is part of the body's box while an absolutely positioned child
   anchors to the padding box - so the mask started 60px down the page and its
   bottom hung past the document end. The undimmed navbar strip above a dimmed
   page reads as a broken/offset layout. Pin the blocker to the viewport
   instead (inline left/top/width/height from the widget lose to !important), so
   the mask always covers exactly what the user can see. */
.eb-nav-busy {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 10050 !important;
}

.eb-nav-busy .ui-blockui-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
}

/* Public bracket page loading overlay (TournamentBracket.xhtml).
   The public bracket page is a standalone document with no PrimeFaces, so it
   cannot reuse the ebNavBusy p:blockUI. This plain, dependency-free overlay
   (pure CSS spinner - no image request, so it paints even on a cold cache when
   the URL is fired directly) is rendered with the body and hidden by the
   bracket includes (PBracket / PBracketRoundRobin) once the synchronous
   client-side bracket build finishes. It covers the render phase only; the
   server-side generation that runs before the document reaches the browser is
   covered by the browser's own tab spinner. */
.eb-bracket-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.eb-bracket-loader .eb-bracket-loader-ring {
  width: 46px;
  height: 46px;
  border: 4px solid rgba(37, 99, 235, 0.2);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: ebBracketSpin 0.8s linear infinite;
}

.eb-bracket-loader .eb-bracket-loader-text {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #475569;
}

@keyframes ebBracketSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Keep the ring as a static indicator for users who ask their OS for reduced
   motion - an endless spin is exactly what that preference is meant to stop. */
@media (prefers-reduced-motion: reduce) {
  .eb-bracket-loader .eb-bracket-loader-ring {
    animation: none;
  }
}

/* Tournament & Event Metadata Grid (Desktop - Compact card width, aligned at 20px) */
.eb-bracket-meta-grid,
.eb-bracket-meta-grid.rf_align_left {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: calc(100% - 40px) !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin: 6px 20px 14px 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.eb-bracket-meta-grid tbody {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  /* The rows are inline-flex items of the tbody. With no gap here a panelGrid
     that overflows `columns` (e.g. Tournament + Event + Event Start Time = 6
     cells) put the second row's label straight against the first row's last
     value — "dfgdsgfEvent Start Time:". Match the tr gap. */
  gap: 6px 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

.eb-bracket-meta-grid tr {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
}

.eb-bracket-meta-grid td {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  font-size: 13.5px !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
}

/* Bracket Scroll Container */
.bracketSroll,
#bracketDiv,
#bracketDivRound {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  box-sizing: border-box !important;
  padding: 0 20px 20px 20px !important;
}

/* Scrollbar styling for bracket */
.bracketSroll::-webkit-scrollbar,
#bracketDiv::-webkit-scrollbar {
  height: 8px;
}

.bracketSroll::-webkit-scrollbar-track,
#bracketDiv::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.bracketSroll::-webkit-scrollbar-thumb,
#bracketDiv::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.bracketSroll::-webkit-scrollbar-thumb:hover,
#bracketDiv::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* =============================================================
   Mobile View Overrides (<= 767px)
   ============================================================= */
@media (max-width: 767px) {
  /* Minimize horizontal padding around main content area */
  .container-fluid {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Bootstrap's `.row` carries -15px side margins that pair with a 15px
     container padding. With the 4px padding above, the -15px margins made the
     row 22px wider than the shell: the authenticated panel hung 7px off the
     LEFT edge and 7px past the RIGHT edge, so every logged-in page panned
     sideways (documentElement.scrollWidth 397 vs clientWidth 390). Keep the
     negative margin equal to the padding instead. Scoped to `.container-fluid`
     so pages using `.container > .row` keep Bootstrap's 15px gutter. */
  .container-fluid > .row {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }

  .main {
    padding: 0 !important;
  }

  .eb-auth-panel.ui-panel {
    border-radius: 6px !important;
    margin: 0 0 12px 0 !important;
    border: 1px solid #e2e8f0 !important;
  }

  .eb-auth-panel .ui-panel-titlebar {
    padding: 8px 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .eb-auth-panel .ui-panel-content {
    padding: 8px 4px !important;
  }

  /* Compact Horizontal 3-Button Toolbar on Mobile */
  .eb-bracket-toolbar {
    padding: 6px 6px 2px 6px !important;
    margin: 0 !important;
  }

  .eb-bracket-actions,
  .eb-bracket-actions tbody {
    display: flex !important;
    width: 100% !important;
  }

  .eb-bracket-actions tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .eb-bracket-actions td {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .eb-bracket-actions td:nth-child(2) {
    flex: 1.35 1 0 !important;
  }

  .eb-bracket-actions td .ui-button,
  .eb-bracket-actions td .btn {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
    letter-spacing: -0.1px !important;
  }

  .eb-bracket-actions td .ui-button .ui-button-text {
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .eb-bracket-actions td .ui-button .ui-icon,
  .eb-bracket-actions td .ui-button .ui-button-icon-left {
    margin-right: 4px !important;
    font-size: 11px !important;
    position: static !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Disable redundant floating scrollbar on mobile touch screens (native touch swipe active) */
  .fl-scrolls {
    display: none !important;
  }

  /* Info Note Banner on Mobile */
  .eb-bracket-info-grid,
  .eb-bracket-info-grid tbody {
    margin: 6px 6px 10px 6px !important;
  }

  .eb-bracket-info-grid td {
    padding: 8px 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Tournament & Event Metadata Grid on Mobile */
  .eb-bracket-meta-grid,
  .eb-bracket-meta-grid.rf_align_left {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    margin: 6px 6px 10px 6px !important;
    border-radius: 6px !important;
    gap: 4px !important;
    width: calc(100% - 12px) !important;
    box-sizing: border-box !important;
  }

  .eb-bracket-meta-grid tbody {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .eb-bracket-meta-grid tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  .eb-bracket-meta-grid td {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    padding: 2px 0 !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  /* Round Robin Standings & Matches on Mobile */
  .jqgroup.rr-bracket-container {
    padding: 0 2px !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .jqgroup .standings.rr-card {
    border-radius: 6px !important;
  }

  .jqgroup .standings-header {
    padding: 10px 12px !important;
  }

  .jqgroup .standings-header h3 {
    font-size: 14px !important;
  }

  .jqgroup .standings-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .jqgroup .rr-table {
    display: table !important;
    width: 100% !important;
    min-width: 460px !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
  }

  .jqgroup .rr-table thead {
    display: table-header-group !important;
  }

  .jqgroup .rr-table thead tr {
    display: table-row !important;
  }

  .jqgroup .rr-table thead th {
    display: table-cell !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .jqgroup .rr-table tbody {
    display: table-row-group !important;
  }

  .jqgroup .rr-table tbody tr {
    display: table-row !important;
  }

  .jqgroup .rr-table tbody td {
    display: table-cell !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  .jqgroup .rr-table td.team-name-cell {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  .jqgroup .rr-rounds-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .jqgroup .round.rr-round-card {
    border-radius: 6px !important;
  }

  .jqgroup .match.rr-match-card {
    padding: 8px 10px !important;
  }

  .bracketSroll,
  #bracketDiv,
  #bracketDivRound {
    padding: 0 4px 12px 4px !important;
    margin-top: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(:has(.navbar-fixed-top)) {
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  body:has(.navbar-fixed-top) {
    padding-top: 55px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }

  #powered_by {
    text-align: center !important;
    margin: 16px auto 8px !important;
    font-size: 12px !important;
    color: #64748b !important;
  }
}

/* Logged-in App Footer */
.eb-app-footer {
  clear: both;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 4px 24px 4px;
  margin-top: 20px;
  border-top: 1px solid var(--surface-border, #dee2e6);
  font-size: 13px;
  color: var(--text-color-secondary, #6c757d);
}

.eb-app-footer a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.eb-app-footer a:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

.eb-app-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eb-footer-dot {
  color: #cbd5e1;
  user-select: none;
}

@media (max-width: 767px) {
  .eb-app-footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 12px 4px 20px 4px;
    margin-top: 12px;
    font-size: 12px;
    gap: 6px;
  }
}

/* =============================================================
   Modern Product Info Page (TournamentAndBracketManager.xhtml)
   ============================================================= */

.eb-product-page-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px 40px;
}

/* Technical Overview Hero Section */
.eb-tech-hero {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-top: 4px solid #0284c7;
  border-radius: 14px;
  padding: 34px 30px;
  margin-top: 15px;
  margin-bottom: 45px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  color: #0f172a;
  overflow: hidden;
}

.eb-tech-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 12px;
}

.eb-tech-breadcrumbs i {
  font-size: 13px;
  color: #0284c7;
}

.eb-tech-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.eb-tech-title {
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.eb-tech-version-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-size: 12px;
  font-family: monospace;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.eb-tech-lead {
  font-size: 15px;
  font-weight: 400;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 900px;
}

.eb-tech-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.eb-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.eb-tech-chip:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #e0f2fe;
}

.eb-tech-chip i {
  color: #0284c7;
  font-size: 12px;
}

.eb-tech-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.eb-tech-spec-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.eb-tech-spec-card:hover {
  border-color: #93c5fd;
  background: #f8fafc;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.1);
  transform: translateY(-2px);
}

.eb-tech-spec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0369a1;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.eb-tech-spec-header i {
  font-size: 14px;
  color: #0284c7;
  flex-shrink: 0;
}

.eb-tech-spec-body {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.eb-tech-spec-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  font-family: monospace;
}

.eb-tech-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.eb-btn-tech,
body .ui-button.eb-btn-tech {
  background: #0284c7 !important;
  background-image: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.eb-btn-tech:hover,
body .ui-button.eb-btn-tech:hover {
  background-position: 0 -5px !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.eb-btn-tech-outline,
body .ui-button.eb-btn-tech-outline {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.eb-btn-tech-outline:hover,
body .ui-button.eb-btn-tech-outline:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

/* Feature Showcase Rows */
.eb-product-showcase-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 50px;
}

.eb-product-showcase-row {
  display: flex;
  align-items: center;
  gap: 36px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eb-product-showcase-row:hover {
  box-shadow: 0 8px 30px rgba(3, 60, 115, 0.08);
}

.eb-product-showcase-row.eb-row-reverse {
  flex-direction: row-reverse;
}

.eb-product-feature-media {
  flex: 1 1 50%;
  max-width: 50%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  background: #f8fafc;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
  text-align: center;
}

.eb-product-feature-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: #ffffff;
}

.eb-product-feature-text {
  flex: 1 1 50%;
  max-width: 50%;
}

.eb-product-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.eb-product-feature-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  line-height: 1.3;
}

.eb-product-feature-lead {
  font-size: 15px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 18px;
}

.eb-feature-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eb-feature-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}

.eb-feature-bullet-list li i {
  color: #16a34a;
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Tournament Format Cards */
.eb-format-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 50px;
}

.eb-format-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eb-format-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(3, 60, 115, 0.08);
}

.eb-format-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.eb-format-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.eb-format-card-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .eb-tech-specs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .eb-product-showcase-row,
  .eb-product-showcase-row.eb-row-reverse {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }

  .eb-product-feature-media,
  .eb-product-feature-text {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  .eb-format-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .eb-product-page-container {
    padding: 0 10px 30px;
  }

  .eb-tech-hero {
    padding: 22px 16px;
    margin-top: 10px;
    margin-bottom: 25px;
    border-radius: 10px;
  }

  .eb-tech-title {
    font-size: 22px;
  }

  .eb-tech-lead {
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  .eb-tech-specs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .eb-tech-actions {
    flex-direction: column;
    gap: 10px;
  }

  .eb-tech-actions .btn,
  body .ui-button.eb-btn-tech,
  body .ui-button.eb-btn-tech-outline {
    width: 100% !important;
    justify-content: center !important;
  }

  .eb-product-showcase-list {
    gap: 20px;
  }

  .eb-product-showcase-row {
    padding: 18px 14px;
    border-radius: 12px;
  }

  .eb-product-feature-title {
    font-size: 19px;
  }

  .eb-product-feature-lead {
    font-size: 14px;
  }

  .eb-feature-bullet-list li {
    font-size: 13px;
  }
}

/* ==========================================================================
   Pricing, About Us, and Contact Us Modern Styles
   ========================================================================== */

/* Pricing Layout */
.eb-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0 40px;
  align-items: stretch;
}

.eb-pricing-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eb-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(3, 60, 115, 0.1);
  border-color: #cbd5e1;
}

.eb-pricing-card.featured {
  border: 2px solid #0284c7;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.15);
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

.eb-pricing-badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #0284c7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}

.eb-pricing-plan-name {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.eb-pricing-plan-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 18px;
  line-height: 1.45;
  min-height: 38px;
}

.eb-pricing-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.eb-pricing-amount {
  font-size: 34px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.eb-pricing-period {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.eb-pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.eb-pricing-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.45;
}

.eb-pricing-features-list li i {
  color: #16a34a;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.eb-pricing-btn-primary {
  width: 100%;
  background: #0284c7 !important;
  background-image: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #0369a1 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.eb-pricing-btn-primary:hover {
  background-position: 0 -5px !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.eb-pricing-btn-outline {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.eb-pricing-btn-outline:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0284c7 !important;
  text-decoration: none !important;
}

.eb-pricing-guarantee-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.eb-pricing-guarantee-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eb-pricing-guarantee-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.eb-pricing-guarantee-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.eb-pricing-guarantee-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* About Us Layout */
.eb-about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 32px 0 40px;
}

.eb-about-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.eb-about-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
}

.eb-about-card-title i {
  color: #0284c7;
  font-size: 20px;
}

.eb-about-card-text {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 16px;
}

.eb-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.eb-stats-card {
  background: linear-gradient(135deg, #033c73 0%, #0a4f96 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(3, 60, 115, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eb-stats-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(3, 60, 115, 0.25);
}

.eb-stats-icon {
  font-size: 22px;
  color: #38bdf8;
  margin-bottom: 8px;
  opacity: 0.95;
}

.eb-stats-num {
  font-size: 32px;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1;
  margin-bottom: 6px;
}

.eb-stats-label {
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Contact Us Layout */
.eb-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0 40px;
}

.eb-contact-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  align-items: center;
}

.eb-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(3, 60, 115, 0.08);
  border-color: #cbd5e1;
}

.eb-contact-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f9ff;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.eb-contact-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

.eb-contact-card-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 18px;
  flex-grow: 1;
}

.eb-contact-value {
  font-size: 15px;
  font-weight: 700;
  color: #0284c7;
  text-decoration: none;
  word-break: break-all;
}

.eb-contact-value:hover {
  text-decoration: underline;
  color: #0369a1;
}

.eb-social-channels {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.eb-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-size: 18px;
  transition: all 0.15s ease;
  text-decoration: none !important;
}

.eb-social-btn:hover {
  background: #0284c7;
  color: #ffffff;
  transform: translateY(-2px);
}

/* FAQ Grid */
.eb-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 20px 0 40px;
}

.eb-faq-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.eb-faq-question {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eb-faq-question i {
  color: #0284c7;
  font-size: 14px;
}

.eb-faq-answer {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Responsive adjustments for new pages */
@media (max-width: 991px) {
  .eb-pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eb-pricing-guarantee-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .eb-about-story-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eb-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .eb-contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .eb-faq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .eb-pricing-guarantee-bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .eb-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 28px !important;
  }

  .eb-stats-card {
    padding: 14px 10px;
  }

  .eb-stats-num {
    font-size: 24px;
  }

  .eb-stats-icon {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .eb-stats-label {
    font-size: 11px;
  }
}

/* End Components CSS   */