:root {
  --xxgo-red: #e52b3d;
  --xxgo-red-hover: #ff4355;
  --xxgo-cyan: #25b8c8;
  --xxgo-yellow: #f0b429;
  --xxgo-green: #27b47e;
  --xxgo-bg: #0f1013;
  --xxgo-panel: #181a1f;
  --xxgo-panel-2: #20232a;
  --xxgo-border: #2b2e35;
  --xxgo-muted: #9ca2ad;
  --xxgo-text: #f5f6f7;
}

html { background: var(--xxgo-bg); }
html.xxgo-age-locked { overflow: hidden; }
body {
  --brand-color: var(--xxgo-red);
  --default-brand-color: var(--xxgo-red);
  --header-bg-color: #111216;
  --body-bg-color: var(--xxgo-bg);
  --body-text-color: var(--xxgo-text);
  --sidebar-bg-color: #14161a;
  --item-thumb-bg-color: #24272d;
  --media-list-row-border-color: var(--xxgo-border);
  --media-list-header-title-link-text-color: var(--xxgo-text);
  --item-meta-text-color: var(--xxgo-muted);
  --item-meta-link-text-color: #c8ccd2;
  --item-meta-link-hover-text-color: #fff;
  --default-item-width: 246px;
  --default-max-item-width: 246px;
  --default-item-margin-right-width: 14px;
  --default-item-margin-bottom-width: 22px;
  background: var(--xxgo-bg) !important;
  color: var(--xxgo-text);
  letter-spacing: 0;
}

a { color: var(--xxgo-cyan); }
a:hover, a:focus { color: #57d3df; }
button, input, select, textarea { letter-spacing: 0; }

.page-header {
  border-bottom: 1px solid #272a30;
  background: #111216 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}
.page-header::after { display: none; }
.page-header .logo { width: 132px; }
.page-header .logo img { width: 132px; max-height: 36px; }
.page-header .circle-icon-button:hover { background: #272a30; }
.button-link.sign-in { color: #e7e9ec !important; }
.button-link.register-link {
  margin-left: 4px;
  color: #fff !important;
  background: var(--xxgo-red);
  border-radius: 5px;
}
.button-link.register-link:hover { background: var(--xxgo-red-hover); }

.xxgo-time-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-width: 112px;
  height: 36px !important;
  margin-left: 4px;
  padding: 0 11px;
  color: #fff !important;
  background: #24272d;
  border: 1px solid #343840;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.xxgo-time-link:hover { border-color: var(--xxgo-cyan); background: #292d34; }
.xxgo-time-link .material-icons { color: var(--xxgo-yellow); font-size: 18px; }
.xxgo-time-link span { font-size: 12px; font-weight: 700; }

.page-sidebar { background: #14161a !important; border-right: 1px solid #272a30; }
.page-sidebar .nav-menu a { border-radius: 4px; }
.page-sidebar .nav-menu a:hover { background: #22252b; }
.page-sidebar .nav-menu li.active a { color: #fff; background: #2a1d21; }
.page-sidebar .nav-menu li.active .material-icons { color: var(--xxgo-red); }
.page-sidebar .sidebar-bottom-wrap { color: #747b86; }
.page-main { background: var(--xxgo-bg) !important; }
.page-main-inner { max-width: 1540px; margin: 0 auto; }

.xxgo-discovery-rail {
  position: relative;
  z-index: 2;
  padding: 14px 22px;
  background: #15171b;
  border-bottom: 1px solid var(--xxgo-border);
}
.xxgo-discovery-inner { display: flex; align-items: center; gap: 14px; max-width: 1540px; margin: 0 auto; }
.xxgo-discovery-label { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.xxgo-discovery-label .material-icons { color: var(--xxgo-red); font-size: 19px; }
.xxgo-category-chips { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.xxgo-category-chips::-webkit-scrollbar { display: none; }
.xxgo-category-chips a, .xxgo-legal-nav a {
  flex: 0 0 auto;
  padding: 7px 11px;
  color: #c7cbd1;
  background: #22252b;
  border: 1px solid #30343c;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
}
.xxgo-category-chips a:hover, .xxgo-legal-nav a:hover, .xxgo-legal-nav a.active { color: #fff; border-color: var(--xxgo-red); background: #2a1d21; }
.xxgo-all-categories { display: inline-flex; align-items: center; margin-left: auto; color: #b8bdc6; font-size: 12px; text-decoration: none; white-space: nowrap; }
.xxgo-all-categories .material-icons { font-size: 18px; }

.media-list-wrapper.items-list-ver { max-width: 1540px; }
.media-list-row + .media-list-row { border-color: var(--xxgo-border); }
.media-list-header { padding: 16px 0 10px; }
.media-list-header h2 { position: relative; padding-left: 12px; color: #f7f8f9; font-size: 18px; font-weight: 750; }
.media-list-header h2::before { position: absolute; top: 1px; bottom: 1px; left: 0; width: 3px; content: ''; background: var(--xxgo-red); }
.media-list-header h3 a { color: var(--xxgo-cyan) !important; }
.item { color: var(--xxgo-text); }
.item .item-content { transition: transform .16s ease; }
.item .item-content:hover { transform: translateY(-2px); }
.item-thumb, a.item-thumb { border-radius: 5px !important; background-color: #24272d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.item-thumb::after { position: absolute; inset: 0; content: ''; border: 1px solid rgba(255,255,255,.05); border-radius: 5px; pointer-events: none; }
.item-content:hover .item-thumb::after { border-color: rgba(229,43,61,.75); }
.item-main h3 { min-height: 38px; margin: 8px 0 4px !important; font-size: 14px; line-height: 19px; font-weight: 650; }
.item-main h3 a { color: #f2f3f5; }
.item-main h3 a:hover { color: #fff; }
.item-meta { color: var(--xxgo-muted); font-size: 12px; }
.item-duration > * { margin: 5px; padding: 3px 5px; background: rgba(8,9,11,.9); border-radius: 3px; opacity: 1; }
.empty-media { margin: 64px auto; padding: 38px 24px; background: var(--xxgo-panel); border: 1px dashed #393d46; border-radius: 6px; text-align: center; }
.empty-media .welcome-title { color: #fff; font-size: 21px; font-weight: 700; }
.empty-media .start-uploading { margin: 8px 0 20px; color: var(--xxgo-muted); }

.xxgo-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--xxgo-border); }
.xxgo-page-heading h1 { margin: 5px 0 7px; color: #fff; font-size: 30px; line-height: 1.2; }
.xxgo-page-heading p { margin: 0; color: var(--xxgo-muted); }
.xxgo-eyebrow { color: var(--xxgo-red); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.xxgo-member-page, .xxgo-legal-page, .xxgo-report-page { max-width: 1240px; margin: 0 auto; padding: 34px 24px 70px; }

.xxgo-primary-button, .xxgo-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.xxgo-primary-button { color: #fff !important; background: var(--xxgo-red); }
.xxgo-primary-button:hover { background: var(--xxgo-red-hover); }
.xxgo-secondary-button { color: #e6e8eb !important; background: #23262c; border-color: #363a43; }
.xxgo-secondary-button:hover { border-color: var(--xxgo-cyan); background: #292d34; }
.xxgo-primary-button .material-icons, .xxgo-secondary-button .material-icons { font-size: 19px; }
.xxgo-icon-button { display: inline-grid; width: 42px; height: 42px; place-items: center; color: #d9dce1; background: #25282f; border: 1px solid #363a43; border-radius: 5px; cursor: pointer; }
.xxgo-icon-button:hover, .xxgo-icon-button.is-copied { color: #fff; border-color: var(--xxgo-cyan); }

.xxgo-stat-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.xxgo-stat { min-height: 152px; padding: 20px; background: var(--xxgo-panel); border: 1px solid var(--xxgo-border); border-radius: 6px; }
.xxgo-stat-primary { border-top: 3px solid var(--xxgo-red); }
.xxgo-stat > span { color: var(--xxgo-muted); font-size: 12px; }
.xxgo-stat strong { display: block; margin: 15px 0 10px; color: #fff; font-size: 27px; line-height: 1.05; }
.xxgo-stat small { color: #858c97; line-height: 1.5; }
.xxgo-member-section { margin-bottom: 18px; padding: 22px; background: var(--xxgo-panel); border: 1px solid var(--xxgo-border); border-radius: 6px; }
.xxgo-member-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.xxgo-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.xxgo-section-heading h2 { margin: 0 0 5px; color: #fff; font-size: 18px; }
.xxgo-section-heading p { margin: 0; color: var(--xxgo-muted); font-size: 12px; }
.xxgo-progress-label { color: var(--xxgo-yellow); font-size: 15px; font-weight: 800; }
.xxgo-progress-track { height: 8px; overflow: hidden; background: #2b2e35; border-radius: 4px; }
.xxgo-progress-track span { display: block; height: 100%; background: var(--xxgo-green); border-radius: 4px; }
.xxgo-copy-row { margin-top: 20px; }
.xxgo-copy-row > label { display: block; margin-bottom: 8px; color: #c7cbd1; font-size: 12px; font-weight: 650; }
.xxgo-copy-row > div { display: grid; grid-template-columns: minmax(0, 1fr) 42px 42px; gap: 8px; }
.xxgo-copy-row input { width: 100%; height: 42px; padding: 0 12px; color: #e8eaed; background: #101216; border: 1px solid #353942; border-radius: 5px; }
.xxgo-copy-row small { display: block; margin-top: 9px; color: var(--xxgo-muted); }
.xxgo-copy-row small strong { color: var(--xxgo-cyan); }
.xxgo-table-wrap { overflow-x: auto; }
.xxgo-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.xxgo-table th { padding: 9px 10px; color: #7f8793; border-bottom: 1px solid #343840; text-align: left; font-weight: 650; white-space: nowrap; }
.xxgo-table td { padding: 12px 10px; color: #d5d8dd; border-bottom: 1px solid #292c33; }
.xxgo-table tr:last-child td { border-bottom: 0; }
.xxgo-empty-cell { padding: 26px 10px !important; color: #7f8793 !important; text-align: center; }
.xxgo-status { display: inline-block; padding: 3px 7px; border-radius: 4px; }
.xxgo-status-qualified { color: #7fe0ba; background: #17382e; }
.xxgo-status-pending { color: #f4c85f; background: #3b321b; }
.xxgo-status-void { color: #aeb3bb; background: #2b2e34; }
.xxgo-positive { color: #6ed5a9 !important; }
.xxgo-negative { color: #ff7582 !important; }

.xxgo-legal-nav { display: flex; gap: 8px; margin-bottom: 26px; overflow-x: auto; }
.xxgo-legal-content { max-width: 860px; }
.xxgo-legal-content h2 { margin: 30px 0 10px; color: #fff; font-size: 19px; }
.xxgo-legal-content h2:first-child { margin-top: 0; }
.xxgo-legal-content p { color: #b8bdc6; font-size: 14px; line-height: 1.9; }
.xxgo-report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; }
.xxgo-report-form { padding: 24px; background: var(--xxgo-panel); border: 1px solid var(--xxgo-border); border-radius: 6px; }
.xxgo-form-field { margin-bottom: 18px; }
.xxgo-form-field label { display: block; margin-bottom: 7px; color: #d8dbe0; font-size: 13px; font-weight: 650; }
.xxgo-form-field input, .xxgo-form-field select, .xxgo-form-field textarea {
  width: 100%;
  padding: 11px 12px;
  color: #fff;
  background: #101216;
  border: 1px solid #353942;
  border-radius: 5px;
}
.xxgo-form-field input:focus, .xxgo-form-field select:focus, .xxgo-form-field textarea:focus { border-color: var(--xxgo-cyan); outline: none; }
.xxgo-form-error { margin: 7px 0; color: #ff7582; font-size: 12px; }
.xxgo-confirm-row { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 18px; color: #aeb3bc; font-size: 12px; line-height: 1.5; }
.xxgo-confirm-row input { flex: 0 0 auto; width: 16px !important; height: 16px; margin-top: 2px; }
.xxgo-report-aside { padding: 4px 0; }
.xxgo-report-aside h2 { margin: 0 0 8px; color: #fff; font-size: 16px; }
.xxgo-report-aside h2:not(:first-child) { margin-top: 26px; }
.xxgo-report-aside p { color: var(--xxgo-muted); font-size: 13px; line-height: 1.7; }

.user-action-form-wrap { min-height: calc(100vh - 190px); display: grid; padding: 42px 20px; place-items: start center; }
.user-action-form-inner { width: min(100%, 460px); padding: 28px; background: var(--xxgo-panel); border: 1px solid var(--xxgo-border); border-radius: 6px; }
.user-action-form-inner h1 { margin: 6px 0 8px; color: #fff; font-size: 27px; }
.user-action-form-inner > p { margin: 0 0 22px; color: var(--xxgo-muted); }
.user-action-form-inner form > p { margin: 0 0 15px; }
.user-action-form-inner form > p label { display: block; margin-bottom: 6px; color: #cfd2d7; font-size: 12px; font-weight: 650; }
.user-action-form-inner form input:not([type="checkbox"]), .user-action-form-inner form select { width: 100%; height: 43px; padding: 0 11px; color: #fff; background: #101216; border: 1px solid #363a43; border-radius: 5px; }
.user-action-form-inner form input:focus { border-color: var(--xxgo-cyan); outline: none; }
.user-action-form-inner form button[type="submit"] { width: 100%; min-height: 44px; color: #fff; background: var(--xxgo-red); border: 0; border-radius: 5px; font-weight: 750; cursor: pointer; }
.user-action-form-inner .errorlist { margin: 5px 0; padding: 0; color: #ff7582; list-style: none; font-size: 12px; }
.user-action-form-inner .helptext { display: block; margin-top: 5px; color: #7f8793; font-size: 11px; }

.xxgo-age-gate[hidden] { display: none; }
.xxgo-age-gate { position: fixed; z-index: 20000; inset: 0; display: grid; padding: 20px; background: rgba(5,6,8,.96); place-items: center; }
.xxgo-age-panel { width: min(100%, 520px); padding: 34px; color: #fff; background: #17191e; border: 1px solid #383c45; border-top: 4px solid var(--xxgo-red); border-radius: 6px; text-align: center; }
.xxgo-age-mark { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; color: #fff; background: var(--xxgo-red); border-radius: 50%; place-items: center; font-size: 24px; font-weight: 850; }
.xxgo-age-panel h2 { margin: 0 0 12px; font-size: 26px; }
.xxgo-age-panel p { margin: 0; color: #b6bbc4; line-height: 1.75; }
.xxgo-age-actions { display: flex; justify-content: center; gap: 10px; margin: 24px 0 15px; }
.xxgo-age-panel small { color: #787f8a; }

.xxgo-legal-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 32px; color: #878e99; background: #111216; border-top: 1px solid #292c33; font-size: 11px; }
.xxgo-legal-footer > div { display: flex; align-items: center; gap: 10px; }
.xxgo-legal-footer strong { color: #fff; font-size: 15px; }
.xxgo-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
.xxgo-legal-footer a { color: #9da3ad; text-decoration: none; }
.xxgo-legal-footer a:hover { color: #fff; }
.xxgo-mobile-nav { display: none; }

@media screen and (min-width: 2200px) {
  body { --default-item-width: 284px; --default-max-item-width: 284px; --default-item-margin-right-width: 16px; }
}

@media screen and (max-width: 1023px) {
  .xxgo-time-link { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .xxgo-time-link span { display: none; }
  .xxgo-stat-grid { grid-template-columns: 1fr 1fr; }
  .xxgo-stat-primary { grid-column: 1 / -1; }
  .xxgo-member-columns { grid-template-columns: 1fr; }
}

@media screen and (max-width: 709px) {
  body { padding-bottom: 60px; }
  .page-header .logo { width: 104px; }
  .page-header .logo img { width: 104px; }
  .page-header-right .button-link.register-link, .page-header-right .on-header-right { display: none !important; }
  .xxgo-discovery-rail { padding: 10px 12px; }
  .xxgo-discovery-inner { gap: 8px; }
  .xxgo-discovery-label { font-size: 0; }
  .xxgo-discovery-label .material-icons { font-size: 20px; }
  .xxgo-all-categories { display: none; }
  .media-list-wrapper.items-list-ver { padding: 0 10px !important; }
  .media-list-header { padding-top: 12px; }
  .media-list-header h2 { font-size: 16px; }
  .media-list-wrapper.items-list-ver .media-list-row { width: 100% !important; max-width: 100% !important; }
  .items-list-ver.media-list-wrapper .media-list-row .item { display: inline-block !important; width: 50% !important; max-width: 50% !important; }
  .items-list-ver.media-list-wrapper .media-list-row .item-content { margin-right: 5px !important; }
  .items-list-ver.media-list-wrapper .media-list-row .item:nth-child(even) .item-content { margin-right: 0 !important; margin-left: 5px; }
  .item-main h3 { min-height: 34px; font-size: 12px; line-height: 17px; }
  .item-meta { font-size: 11px; }
  .xxgo-member-page, .xxgo-legal-page, .xxgo-report-page { padding: 24px 14px 42px; }
  .xxgo-page-heading { align-items: flex-start; margin-bottom: 20px; }
  .xxgo-page-heading h1 { font-size: 25px; }
  .xxgo-page-heading > .xxgo-secondary-button { min-width: 42px; width: 42px; padding: 0; font-size: 0; }
  .xxgo-stat-grid { grid-template-columns: 1fr; }
  .xxgo-stat-primary { grid-column: auto; }
  .xxgo-stat { min-height: 125px; }
  .xxgo-member-section, .xxgo-report-form { padding: 17px; }
  .xxgo-copy-row > div { grid-template-columns: minmax(0, 1fr) 42px; }
  #share-referral { display: none; }
  .xxgo-report-layout { grid-template-columns: 1fr; }
  .xxgo-age-panel { padding: 26px 20px; }
  .xxgo-age-actions { flex-direction: column; }
  .xxgo-legal-footer { display: block; padding: 22px 16px 82px; }
  .xxgo-legal-footer nav { justify-content: flex-start; margin-top: 14px; gap: 12px 16px; }
  .xxgo-mobile-nav { position: fixed; z-index: 9998; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 60px; padding-bottom: env(safe-area-inset-bottom); background: #121418; border-top: 1px solid #30333a; }
  .xxgo-mobile-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #aeb3bd; text-decoration: none; }
  .xxgo-mobile-nav a:hover { color: #fff; }
  .xxgo-mobile-nav .material-icons { font-size: 21px; }
  .xxgo-mobile-nav span { font-size: 10px; }
}

@media screen and (max-width: 380px) {
  .items-list-ver.media-list-wrapper .media-list-row .item { width: 100% !important; max-width: 100% !important; }
  .items-list-ver.media-list-wrapper .media-list-row .item-content,
  .items-list-ver.media-list-wrapper .media-list-row .item:nth-child(even) .item-content { margin-right: 0 !important; margin-left: 0; }
  .item-main h3 { min-height: 0; font-size: 13px; }
}