.gsp-hero-board {
  position: relative;
  z-index: 2;
  width: min(520px, 88%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  background: #123e59;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .7);
  color: #fff;
  transform: rotate(-1deg);
}

.gsp-hero-board > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: stretch;
  border-bottom: 3px solid var(--yellow);
  background: #102e42;
}

.gsp-hero-board > header > div {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
}

.gsp-hero-board > header > div small {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}

.gsp-hero-board > header > div strong { font-size: 22px; letter-spacing: .02em; }
.gsp-hero-board > header > div span { color: #b8ceda; font-size: 10px; font-weight: 800; }
.gsp-hero-board > header > aside { display: grid; grid-template-rows: auto 1fr; place-items: center; background: #0a2434; }
.gsp-hero-board > header > aside small { padding-top: 10px; color: #b8ceda; font-size: 8px; font-weight: 900; }
.gsp-hero-board > header > aside b { display: grid; width: 100%; height: 100%; place-items: center; background: var(--yellow); color: #111; font-size: 30px; }
.gsp-hero-board-columns,
.gsp-hero-board li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 68px 58px; align-items: stretch; }
.gsp-hero-board-columns { background: #071d2b; color: #91afbd; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.gsp-hero-board-columns span { padding: 7px 8px; }
.gsp-hero-board ol { margin: 0; padding: 0; list-style: none; }
.gsp-hero-board li { border-bottom: 1px solid rgba(255, 255, 255, .14); background: #154e6d; }
.gsp-hero-board li > * { display: grid; min-height: 43px; place-items: center; margin: 0; padding: 7px 9px; font-style: normal; }
.gsp-hero-board li > b { color: var(--yellow); font-size: 12px; }
.gsp-hero-board li > span { justify-items: start; overflow: hidden; font-size: 13px; font-weight: 900; white-space: nowrap; }
.gsp-hero-board li > strong { background: #f0f0ed; color: #111; font-size: 20px; }
.gsp-hero-board li > em { background: #071d2b; color: #fff; font-size: 16px; font-weight: 950; }
.gsp-hero-board li > em.is-finished { background: var(--yellow); color: #111; }
.gsp-hero-board li > em.is-finished.is-over { background: #eae7df; }
.gsp-hero-board > footer { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: #071d2b; color: #b8ceda; font-size: 10px; }
.gsp-hero-board > footer span { padding: 5px 7px; background: #e43f44; color: #fff; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.gsp-hero-board > footer strong { color: #fff; font-size: 10px; }

.gsp-score-popup-shot { position: relative; overflow: hidden; }
.gsp-shot-score { display: grid; justify-items: center; padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(0, 0, 0, .1); }
.gsp-shot-score > span { color: #777; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.gsp-shot-score > strong { font-size: 62px; line-height: 1; }
.gsp-shot-score > small { color: #168a58; font-weight: 800; }
.gsp-shot-hole-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 14px; }
.gsp-shot-hole-strip b { display: grid; height: 36px; place-items: center; border-radius: 7px; background: #e5e1d8; font-size: 11px; }
.gsp-shot-hole-strip b.active { background: var(--yellow); }
.gsp-inline-top { position: absolute; right: 10px; bottom: 12px; left: 10px; overflow: hidden; border: 2px solid var(--yellow); border-radius: 10px; background: #111; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); color: #fff; }
.gsp-inline-top > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #102e42; }
.gsp-inline-top > header > div { display: grid; }
.gsp-inline-top > header small { color: var(--yellow); font-size: 7px; font-weight: 950; letter-spacing: .12em; }
.gsp-inline-top > header strong { font-size: 14px; }
.gsp-inline-top > header > span { font-size: 9px; font-weight: 900; }
.gsp-inline-top ol { margin: 0; padding: 0; list-style: none; }
.gsp-inline-top ol li { display: grid; grid-template-columns: 25px minmax(0, 1fr) 43px 36px; border-bottom: 1px solid #333; }
.gsp-inline-top ol li > * { display: grid; min-height: 31px; place-items: center; margin: 0; padding: 4px; font-style: normal; }
.gsp-inline-top ol li > b { color: var(--yellow); font-size: 9px; }
.gsp-inline-top ol li > b:empty,
.gsp-demo-phone ol li > b:empty { background: transparent; }
.gsp-inline-top ol li > span { justify-items: start; font-size: 10px; font-weight: 850; }
.gsp-inline-top ol li > strong { background: #f0f0ed; color: #111; font-size: 13px; }
.gsp-inline-top ol li > em { background: #080808; color: #fff; font-size: 11px; font-weight: 900; }
.gsp-inline-top ol li > em.is-finished { background: var(--yellow); color: #111; }
.gsp-inline-top ol li > em.is-finished.is-over { background: #eae7df; }

.gsp-showcase {
  display: grid;
  gap: 36px;
  padding: 92px clamp(22px, 6vw, 90px);
  background: #101010;
}

.gsp-product-card {
  width: min(1180px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #393939;
  border-radius: 18px;
  background: #f5f3ec;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
}

.gsp-showcase-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  background: #080808;
  color: #fff;
}

.gsp-showcase-title > div { display: grid; gap: 4px; }
.gsp-showcase-title small { color: var(--yellow); font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.gsp-showcase-title strong { font-size: 22px; }
.gsp-showcase-title span { color: #aaa; font-size: 11px; font-weight: 750; }
.gsp-showcase-title > b { padding: 7px 9px; border-radius: 4px; background: #e43f44; font-size: 9px; letter-spacing: .1em; }
.gsp-player-identity { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid #d6d2c9; }
.gsp-profile-badge { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #24634d; color: #fff; font-size: 18px; font-weight: 950; }
.gsp-player-identity > div { display: grid; gap: 4px; }
.gsp-player-identity > div strong { font-size: 23px; }
.gsp-player-identity > div small { color: #6a665e; font-weight: 750; }
.gsp-player-identity > em { min-width: 78px; padding: 10px 16px; background: var(--yellow); color: #111; font-size: 30px; font-style: normal; font-weight: 950; text-align: center; }
.gsp-scorecard-wide { display: grid; gap: 16px; padding: 24px; }
.gsp-scorecard-wide section { overflow-x: auto; }
.gsp-scorecard-wide section > header,
.gsp-scorecard-wide section > div { display: grid; grid-template-columns: 66px repeat(9, minmax(45px, 1fr)) 70px; min-width: 650px; }
.gsp-scorecard-wide section > * > * { display: grid; min-height: 42px; place-items: center; margin: 0; border-right: 1px solid #c9cec9; border-bottom: 1px solid #c9cec9; }
.gsp-scorecard-wide section > header > * { background: #24634d; color: #fff; font-size: 11px; }
.gsp-scorecard-wide .gsp-par-row > * { background: #e8eee9; color: #153f31; font-size: 11px; font-weight: 850; }
.gsp-scorecard-wide .gsp-score-row > * { background: #fff; color: #111; font-size: 14px; }
.gsp-scorecard-wide .gsp-score-row > b,
.gsp-scorecard-wide .gsp-score-row > strong { font-weight: 950; }
.gsp-scorecard-wide .gsp-score-row span { align-self: center; justify-self: center; width: 30px; min-height: 30px; border: 0; }
.gsp-scorecard-wide .birdie,
.gsp-score-legend .birdie { border: 2px solid #24634d!important; border-radius: 50%; }
.gsp-scorecard-wide .bogey,
.gsp-score-legend .bogey { border: 2px solid #24634d!important; }
.gsp-scorecard-wide .double-bogey,
.gsp-score-legend .double-bogey { border: 4px double #24634d!important; }
.gsp-score-legend { display: flex; align-items: center; gap: 22px; padding: 14px 24px; background: #edf0ec; color: #153f31; font-size: 11px; }
.gsp-score-legend span { display: flex; align-items: center; gap: 7px; }
.gsp-score-legend i { display: grid; width: 28px; height: 28px; place-items: center; font-style: normal; }
.gsp-score-legend > strong { margin-left: auto; font-size: 13px; }

.gsp-live-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: end; min-height: 510px; padding: 38px; background: linear-gradient(135deg, #f5f3ec, #e5e1d7); }
.gsp-entry-panel { display: grid; justify-items: center; align-self: center; max-width: 560px; width: 100%; padding: 34px; border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgba(0, 0, 0, .1); }
.gsp-entry-panel > small { color: #777; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.gsp-entry-panel > strong { margin-top: 8px; font-size: 84px; line-height: 1; }
.gsp-entry-panel > span { margin-top: 7px; color: #24634d; font-weight: 850; }
.gsp-entry-panel > div { display: grid; grid-template-columns: 50px 86px 50px; gap: 8px; margin-top: 24px; }
.gsp-entry-panel button,
.gsp-entry-panel > div b { display: grid; min-height: 44px; place-items: center; margin: 0; border: 0; border-radius: 8px; background: #111; color: #fff; font-size: 18px; }
.gsp-entry-panel > div b { background: var(--yellow); color: #111; }
.gsp-entry-panel nav { display: grid; grid-template-columns: repeat(5, 48px); gap: 7px; margin-top: 25px; }
.gsp-entry-panel nav b { display: grid; height: 40px; place-items: center; border-radius: 7px; background: #e5e1d8; font-size: 11px; }
.gsp-entry-panel nav b.active { background: var(--yellow); }
.gsp-compact-tv-board { overflow: hidden; border: 1px solid var(--yellow); border-radius: 4px; background: #071d2b; box-shadow: 0 18px 45px rgba(0, 0, 0, .45); color: #fff; }
.gsp-compact-tv-board > header { display: grid; grid-template-columns: minmax(0, 1fr) 48px; background: #102e42; }
.gsp-compact-tv-board > header > div { display: grid; gap: 1px; padding: 8px 9px; }
.gsp-compact-tv-board > header small { color: var(--yellow); font-size: 6px; font-weight: 950; letter-spacing: .12em; }
.gsp-compact-tv-board > header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gsp-compact-tv-board > header span { color: #aabfca; font-size: 7px; font-weight: 750; }
.gsp-compact-tv-board > header > b { display: grid; place-items: center; background: var(--yellow); color: #111; font-size: 16px; }
.gsp-compact-columns,
.gsp-compact-tv-board li { display: grid; grid-template-columns: 23px minmax(0, 1fr) 42px 35px; }
.gsp-compact-columns { background: #071824; color: #7995a4; font-size: 6px; font-weight: 900; }
.gsp-compact-columns span { padding: 4px 3px; }
.gsp-compact-tv-board ol { margin: 0; padding: 0; list-style: none; }
.gsp-compact-tv-board li { border-bottom: 1px solid rgba(255, 255, 255, .14); background: #111; }
.gsp-compact-tv-board li > * { display: grid; min-height: 27px; place-items: center; margin: 0; padding: 3px; font-style: normal; }
.gsp-compact-tv-board li > b { color: var(--yellow); font-size: 8px; }
.gsp-compact-tv-board li > span { justify-items: start; overflow: hidden; font-size: 9px; font-weight: 900; white-space: nowrap; }
.gsp-compact-tv-board li > strong { background: #f1f1ee; color: #111; font-size: 12px; }
.gsp-compact-tv-board li > em { color: #fff; font-size: 10px; font-weight: 950; }
.gsp-compact-tv-board li > em.finished { color: var(--yellow); }

@media (max-width: 560px) {
  .gsp-hero-board { width: calc(100% - 24px); transform: none; }
  .gsp-hero-board > header > div { padding: 15px; }
  .gsp-hero-board > header > div strong { font-size: 18px; }
  .gsp-hero-board-columns,
  .gsp-hero-board li { grid-template-columns: 37px minmax(0, 1fr) 58px 50px; }
  .gsp-hero-board li > span { font-size: 11px; }
  .gsp-showcase { padding: 55px 12px; }
  .gsp-showcase-title { padding: 16px; }
  .gsp-showcase-title strong { font-size: 17px; }
  .gsp-player-identity { grid-template-columns: 52px minmax(0, 1fr); padding: 16px; }
  .gsp-profile-badge { width: 46px; height: 46px; font-size: 14px; }
  .gsp-player-identity > div strong { font-size: 18px; }
  .gsp-player-identity > em { grid-column: 1 / -1; width: 100%; font-size: 22px; }
  .gsp-scorecard-wide { padding: 14px; }
  .gsp-score-legend { align-items: flex-start; flex-wrap: wrap; padding: 14px; }
  .gsp-score-legend > strong { width: 100%; margin: 0; }
  .gsp-live-card-body { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 16px; }
  .gsp-entry-panel { padding: 24px 14px; }
  .gsp-entry-panel > strong { font-size: 64px; }
  .gsp-compact-tv-board { width: min(292px, 100%); justify-self: end; }
}

.gsp-hero { background-image: linear-gradient(90deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.48) 47%, rgba(8,8,8,.1) 100%), linear-gradient(0deg, rgba(118,75,0,.08), rgba(255,184,52,.03)), url('ugc-course-hero-2026.jpg'); background-position: center; background-size: cover; }
.gsp-hero-copy { position: relative; z-index: 2; }
.gsp-hero-visual { background: radial-gradient(circle at 50% 43%, rgba(64,50,14,.28) 0, rgba(23,20,12,.2) 45%, rgba(8,8,8,.08) 78%); }
.gsp-organizer-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);gap:24px;padding:32px;background:linear-gradient(135deg,#f5f3ec,#e8e2d6)}
.gsp-organizer-form{display:grid;gap:13px;border:1px solid #d7d0c4;border-radius:14px;background:#fff;padding:22px}
.gsp-organizer-form>div:first-child,.gsp-organizer-pair article{display:grid;gap:5px;border:1px solid #d7d0c4;border-radius:9px;background:#faf9f5;padding:13px}
.gsp-organizer-form small,.gsp-organizer-summary small{color:#777;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.gsp-organizer-form strong{font-size:14px}
.gsp-organizer-pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.gsp-organizer-checks{display:flex;gap:8px;flex-wrap:wrap}
.gsp-organizer-format-options{display:grid!important;gap:8px!important}.gsp-organizer-format-options>span{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gsp-organizer-format-options b{display:grid;min-height:34px;place-items:center;border:1px solid #d7d0c4;border-radius:7px;background:#f2efe8;font-size:10px}.gsp-organizer-format-options b.active{border-color:var(--yellow);background:var(--yellow)}
.gsp-organizer-checks span{display:flex;align-items:center;gap:6px;border-radius:20px;background:#111;color:#fff;padding:8px 10px;font-size:10px;font-weight:800}
.gsp-organizer-checks i{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;background:var(--yellow);color:#111;font-style:normal}
.gsp-organizer-form button{border:0;border-radius:9px;background:var(--yellow);color:#111;padding:13px;font-weight:950}
.gsp-organizer-summary{display:grid;align-content:center;gap:11px;border-radius:14px;background:#111;color:#fff;padding:25px}
.gsp-organizer-summary>strong{color:var(--yellow);font-size:38px}
.gsp-organizer-summary>span{border-bottom:1px solid #393939;padding-bottom:10px;font-size:13px}
.gsp-organizer-summary>b{margin-top:8px;border:1px solid var(--yellow);border-radius:5px;color:var(--yellow);padding:10px;text-align:center;font-size:9px;letter-spacing:.1em}
@media(max-width:650px){.gsp-organizer-body{grid-template-columns:1fr;padding:14px}.gsp-organizer-pair{grid-template-columns:1fr}.gsp-organizer-format-options>span{grid-template-columns:1fr 1fr}.gsp-organizer-summary{padding:20px}.gsp-organizer-summary>strong{font-size:30px}}
.gsp-profile-photo-demo { background-color: #222; background-image: url('demo-player-sprite.png'); background-position: 0 0; background-repeat: no-repeat; background-size: 500% 400%; color: transparent; }
.gsp-account-head { display: flex; align-items: center; gap: 15px; padding: 22px 24px; border-bottom: 1px solid #d8d2c7; background: #fff; }
.gsp-account-head > div { display: grid; gap: 4px; }
.gsp-account-head > div strong { font-size: 24px; }
.gsp-account-head > div small { color: #6c675e; }
.gsp-account-body { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.8fr); gap: 22px; padding: 28px; }
.gsp-account-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; grid-column: 1/-1; }
.gsp-account-stats article { position: relative; display: grid; aspect-ratio: 1; max-height: 145px; place-items: center; align-content: center; border: 8px solid #e2ddd2; border-top-color: var(--yellow); border-radius: 50%; background: #fff; }
.gsp-account-stats b { font-size: clamp(24px,4vw,42px); }
.gsp-account-stats span { color: #6a655c; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.gsp-account-target { display: grid; gap: 7px; padding: 20px; border-radius: 12px; background: #111; color: #fff; }
.gsp-account-target small { color: var(--yellow); font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.gsp-account-target i { height: 9px; overflow: hidden; border-radius: 20px; background: #454545; }
.gsp-account-target i b { display: block; height: 100%; background: var(--yellow); }
.gsp-account-target span { color: #aaa; font-size: 10px; }
.gsp-account-result { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 18px; border: 1px solid #d7d0c4; border-radius: 12px; background: #fff; }
.gsp-account-result > b { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--yellow); }
.gsp-account-result span strong,.gsp-account-result span small { display: block; }
.gsp-account-result span small { color: #777; margin-top: 3px; }
.gsp-account-result em { font-size: 24px; font-style: normal; font-weight: 950; }
@media(max-width:650px){.gsp-account-body{grid-template-columns:1fr;padding:16px}.gsp-account-stats{grid-template-columns:repeat(2,1fr)}.gsp-account-target,.gsp-account-result{grid-column:1}.gsp-account-head{padding:16px}.gsp-account-head>div strong{font-size:19px}}