:root{
    --bg:#fbfcfd;
    --card:#ffffff;
    --muted:#6b7280;
    --accent:#626a69;
    --accent-weak:#dbdde3;
    --yellow:#ffeb8b;
    --border:#e6e9ef;
    --radius:10px;
    --gap:10px;
	--mainPanelsHeight:220px;
	--gradientTopColor:#0E4560;
	--gradientBottomColor:#3EB3DA;
	--clubCardBG:#d1edf6;
  }
  *{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;}
	
	body{
		margin:0;
		background:var(--bg);
		color:#111;
		padding:14px;
		display:flex;
		justify-content:center;
	}

	.app{
		width:100%;
		max-width:1400px;
		display:flex;
		flex-direction:column;
		gap:8px;
		align-items:center;
		border-radius:8px;					
	}

	.wb-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1px;
		margin-bottom: -2px;
	}

	.wb-header img {
		/* filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); */
		width: auto;       /* adjust size as needed */
		height: 125 px;  /* adjust size as needed */
		pointer-events: none;
		user-select: none;
		/* border:1px solid var(--card); */
	}

	/* AUTH BUTTONS (HEADER) */
	.authContainer {
		display: flex;
		flex-direction: column;
	}

	#authBar {
		position: absolute;
		top: 12px;
		right: 20px;
		display: flex;
		gap: 10px;
	}

	.auth-btn {
		background: var(--accent);
		color: #fff;
		border:1px solid var(--border);
		padding: 6px 14px;
		border-radius: 6px;
		cursor: pointer;
		font-size: 17px;
		background:var(--gradientTopColor);
	}

	#toast-container {
		position: absolute;
		top: 12px;
		right: 20px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		z-index: 100;
	}

	.toast {
		color: white;
		padding: 10px 14px;
		border-radius: 6px;
		font-size: 17px;
		/* line-height: 1.4; */
		box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
		opacity: 0;
		transition: opacity 0.3s ease, transform 0.3s ease;
		background:var(--gradientTopColor);
	}



	.hidden { display:none !important; }


	/* MODAL BACKDROP */
	.modal {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 5000;
	}
	.modal.hidden { display:none; }

	/* MODAL CONTAINER */
	.modal-content {
		background: #fff;
		padding: 25px;
		width: 320px;
		border-radius: 12px;
		border: 1px solid var(--border);
		box-shadow: 0 6px 14px rgba(0,0,0,0.22);
	}

	.modal-content h2 {
		text-align:center;
		margin-top:0;
		margin-bottom:18px;
	}

	/* CLOSE X */
	.close {
		position:absolute;
		margin-left: 275px;
		font-size: 22px;
		cursor: pointer;
	}

	/* INPUTS */
	.auth-input {
		width:100%;
		padding:8px;
		margin-bottom:12px;
		border:1px solid var(--border);
		border-radius:6px;
	}

	/* ACTION BUTTONS */
	.auth-action {
		width:100%;
		background: var(--accent);
		color:#fff;
		border:none;
		padding:8px;
		margin-bottom:10px;
		border-radius:6px;
		cursor:pointer;
	}

	/* Divider */
	.divider {
		text-align:center;
		color:#666;
		margin:14px 0;
	}
	.divider span {
		padding:0 8px;
		background:#fff;
	}

	/* Google Button */
	.google-btn {
		width:100%;
		padding:8px;
		border:1px solid var(--border);
		background:#fff;
		border-radius:6px;
		cursor:pointer;
		display:flex;
		align-items:center;
		gap:10px;
		justify-content:center;
	}
	.google-btn img {
		width:20px;
		height:20px;
	}



	header{
		font-size:22px;
		font-weight:700;
		text-align:center;
		padding:12px 0;
		color:#fff
	}

  /* TOGGLE */
	#toggleClubs{
		align-self:flex-end;
		margin:2px;
		color:var(--card);
		cursor:pointer;
		font-size:14px
	}

  
  
/* <!-- ______________________________________________________________________________ --> */
							/* <!-- CATEGORIES --> */
/* <!-- _______________________________________________________________________________ --> */
	.clubs-wrap{
		/* border:1px solid var(--border); */
		border-radius:var(--radius);
		padding:8px;
	}
	.linear-gradient{
		background-image: linear-gradient(#0E4560, #3EB3DA);
	}
	.clubs-top{
		display:flex;
		align-items:center;
		justify-content:space-between;
		margin-bottom:6px
	}
	.clubs-title{
		font-weight:700;
		text-transform:uppercase;
		letter-spacing:0.6px;
		color:#111;
		font-size:13px
	}
	.toggle-link{
		font-size:13px;
		color:var(--accent);
		cursor:pointer;
		user-select:none
	}
  /* the grid is horizontally scrollable only when needed */
	.club-grid{
		display:flex;
		gap:8px;
		overflow:auto;
		padding-bottom:6px;
	}
	.category{
		max-width:185px;
		border:1px solid var(--border);
		border-radius:6px;
		padding:0;
		background:var(--clubCardBG);
		display:flex;
		flex-direction:column;
		justify-content:center;
	}
	.category h4{
		font-size:16px;
		border-radius:8px;
		margin:0;
		margin-bottom:5px;
		text-align:center;
		text-transform:uppercase;
		color:var(--card);
		width:100%;
		align-self:start;
		justify-self:stretch;
		background:var(--gradientTopColor);
	}

/* <!-- ______________________________________________________________________________ --> */
							/* <!-- CLUBS --> */
/* <!-- _______________________________________________________________________________ --> */

	.club-list{
		display:flex;
		flex-direction:column;
		margin-left:4px;
		gap:4px;
		max-height:220px;
		/* max-width:160px; */
		overflow:auto;
		padding-right:4px;
		justify-self: stretch;
	}
	.club-radio{
		font-size:14px;
		padding: 2px 6px 2px 6px;
		border-radius:5px;
		border:1px solid #ddd;
		background:#fff;
		cursor:pointer;
		/* align-self: center; */
		text-align:left
	}
	
	
/* <!-- ______________________________________________________________________________ --> */
							/* <!-- LEVELS --> */
/* <!-- _______________________________________________________________________________ --> */
	.levels{
		display:flex;
		flex-wrap:wrap;
		gap:4px;
		margin-top:8px;
		margin-bottom:4px;
		justify-content:center;
	}
	.level-radio{
		width:30px;
		height:26px;
		border-radius:5px;
		border:1px solid #ddd;
		background:#fff;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		font-size:14px;
		cursor:pointer;
	}
	.level-radio.disabled{
		opacity:0.35;
		cursor:not-allowed;
	}





  /* MAIN CONTROL AREA */
	.main{
		display:flex;
		flex-direction:row;
		gap:18px;
		width:100%;
		justify-content:center;
	}
	
	
	
	
/* <!-- ______________________________________________________________________________ --> */
							/* <!-- GOLF BAGS --> */
/* <!-- _______________________________________________________________________________ --> */
	.bagsPanel{
		width:175px;
		height:var(--mainPanelsHeight);
		display:flex;
		flex-direction:column;
		background:var(--card);
		border-radius:8px;
		border:1px solid var(--border);
	}
	.panel{
		display:flex;
		flex-direction:column;
		background:var(--card);
		border-radius:8px;
		border:1px solid var(--card);
		flex-grow:1;
		overflow:auto;
		align-items:center;
		margin-bottom:5px;
	}
	.bagsPanel h4{
		font-size:16px;
		margin-bottom:0px;
		margin-top:0px;
		text-transform:uppercase;
		text-align:center;
		background:var(--gradientTopColor);
		color:var(--card);
		border-radius:8px;
	}
	.bag-row{
		display:flex;
		flex-direction:row
		gap:15px;
		justify-content:center;
		margin-bottom:2px;
		margin-top:2px;
		margin-left:px;
		margin-right:1px;
		height:18%;
		width:95%;
    }
	.small-btn{
		width:60%;
		padding-top:1px;
		padding-bottom:1px;
		margin-top:4px;
		margin-bottom:4px;
		margin-right:3px;
		margin-left:3px;
		border-radius:4px;
		border:1px solid #c9c9c9;
		background:#f3f4f6;
		cursor:pointer;
		font-size:14px;
		height:90%;
		white-space: nowrap;
	}
	.smaller-btn{
		width:40%;
		padding-top:1px;
		padding-bottom:1px;
		margin-top:4px;
		margin-bottom:4px;
		margin-right:3px;
		margin-left:3px;
		border-radius:4px;
		border:1px solid #c9c9c9;
		background:#f3f4f6;
		cursor:pointer;
		font-size:14px;
		height:90%;
		white-space: nowrap;
	}
	
	.bag-toast {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(30, 30, 30, 0.9);
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: left;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.5;
		border-radius: 6px;
		padding: 10px;
		box-sizing: border-box;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		z-index: 10;
	}

	.bag-toast.show {
		opacity: 1;
		pointer-events: auto;
	}


/* <!-- ________________________________________________________________________________ --> */
									/* <!-- Tool Panel --> */
/* <!-- ___________________________________________________________________________ --> */
	.toolsPanel{
		width:175px;
		height:var(--mainPanelsHeight);
		display:flex;
		flex-direction:column;
		background:var(--card);
		border-radius:8px;
		border:1px solid var(--border);
	}
	
	.toolsPanel h4 {
		/* display: flex; */
		/* flex-direction: row; */
		align-items: center;
		justify-self: center;
		font-size: 16px;
		margin-bottom: 0px;
		margin-top: 0px;
		/* text-align: center; */
		text-align: end;
		text-transform: uppercase;
		background: var(--gradientTopColor);
		color: var(--card);
		border-radius: 8px;
	}	

/* --- Modal Wrapper --- */
	#tools-info-modal {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		display: none;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	/* --- Modal Content --- */
	#tools-info-box {
		background: #ffffff;
		width: 90%;
		max-width: 520px;
		padding: 20px;
		border-radius: 12px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.25);
		font-size: 15px;
		line-height: 1.45;
		color: #003f66;
		position: relative;
	}

	/* Close Button */
	#tools-info-close {
		position: absolute;
		right: 10px;
		top: 8px;
		font-size: 20px;
		cursor: pointer;
		color: #555;
	}

	
	tool-row{
		display:flex;
		flex-direction:row;
		gap:15px;
		justify-content:center;
		margin-bottom:2px;
		margin-top:2px;
		margin-left:px;
		margin-right:1px;
		width:97%;
	}
	.btn{
		width:97%;
		padding-top:1px;
		padding-bottom:1px;
		margin-top:4px;
		margin-bottom:4px;
		margin-right:3px;
		margin-left:3px;
		border-radius:4px;
		border:1px solid #c9c9c9;
		background:#f3f4f6;
		cursor:pointer;
		font-size:14px;
		height:75%;
		white-space: nowrap;
	}
	.active{
		background:var(--accent);
		color:#fff;
		border-color:var(--accent);	
	}
	


/* <!-- _________________________________________________________________________________________________________ --> */
									/* <!-- CLUB INFO PANEL --> */
/* <!-- _________________________________________________________________________________________________________ --> */
	
	.clubInfoPanel{
		min-width:200px; */
		height:var(--mainPanelsHeight);
		display:flex;
		flex-direction:column;
		background:var(--card);
		border-radius:8px;
		border:1px solid var(--border);
	}
	.clubInfoPanel h4{
		font-size:16px;
		margin-bottom:5px;
		margin-top:0px;
		text-align:center;
		text-transform:uppercase;
		font-weight:700;
		text-align:center;
		padding: 0 4px 0 4px;
		background:var(--gradientTopColor);
		color:var(--card);
		border-radius:8px;
	}
	.club-info-grid{
		display:flex;
		flex-direction:column;
		margin-left:12px;
		margin-bottom:5px;
		background:var(--card);
		border-radius:8px;
		border:1px solid var(--card);
		flex-grow:1;
		overflow:auto;
		font-size:14px;
		padding-top:12px;
		text-align:left;
		gap:10px;
		height:98%;
		width:93%;
	}
	.club-info-row{
		width:75%;
		align-self:center;
		justify-self:center;
	}
	.value{
		font-weight:700;
	}



/* <!-- _________________________________________________________________________________________________________ --> */
									/* <!-- SHOT Adjustments --> */
/* <!-- _________________________________________________________________________________________________________ --> */

	.shotAdjPanel{
		display:flex;
		flex-direction:column;
		background:var(--card);
		align-items:center;
		height:var(--mainPanelsHeight);
		border-radius:8px;
		border:1px solid var(--border);
		row-gap:5px;
	}
	.shotAdjPanel h4{
		font-size:16px;
		margin-bottom:4px;
		margin-top:0px;
		text-align:center;
		width:100%;
		text-transform:uppercase;
		background:var(--gradientTopColor);
		color:var(--card);
		border-radius:8px;
	}
	.sa_row{
		display:flex;
		flex-direction:row;
		background:var(--card);
		justify-content:center;
		width:98%;
		padding:1px;
		padding-top:1px;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:2px;
		margin-right:2px;
	}
	.sa_row label{
		margin-right:2px;
		font-size:14px;
		text-align:center;
		align-content: center;	
		text-wrap: nowrap;	
	}
	
	input[type=number],select,input[list]{
		border-radius:6px;
		border:1px solid var(--border);
		font-size:14px;
		padding:4px;
		max-width:60px;
	}
	input[type=range]{
		width:250px;
		border-radius:6px;
		border:1px solid var(--border);
		font-size:14px;
		padding:0px
	}
		
	/* wrapper must be positioned so tooltip can be absolutely positioned relative to it */
	.tooltip-wrapper {
	  position: relative;
	  display: inline-block; /* or block per layout */
	}

	/* style the input as you already have */
	#windInput {
	  padding: 6px 8px;
	  border-radius: 6px;
	  border: 1px solid var(--border);
	  min-width: 64px;
	}

	/* tooltip box (hidden by default) */
	.input-tooltip {
	  position: absolute;
	  left: 0;
	  bottom: calc(100% + 8px); /* place above the input */
	  transform-origin: bottom left;
	  white-space: nowrap;
	  background: #222;
	  color: #fff;
	  padding: 8px 10px;
	  border-radius: 6px;
	  font-size: 12px;
	  line-height: 1.2;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity .18s ease, transform .18s ease;
	  transform: translateY(6px);
	  z-index: 30;
	}

	/* small arrow */
	.input-tooltip::after {
	  content: "";
	  position: absolute;
	  left: 12px;
	  top: 100%;
	  width: 0;
	  height: 0;
	  border-left: 6px solid transparent;
	  border-right: 6px solid transparent;
	  border-top: 6px solid #222;
	  display: block;
	}

	/* show tooltip on hover OR when input is focused (keyboard accessible) */
	.tooltip-wrapper:hover .input-tooltip {
	  opacity: 1;
	  transform: translateY(0);
	  pointer-events: auto;
	}
	

  /* hide number spinners */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }


/* <!-- _________________________________________________________________________________________________________ --> */
									/* <!-- RING CARD --> */
/* <!-- _________________________________________________________________________________________________________ --> */
	.ring-card{
		display:flex;
		flex-direction:column;
		background:var(--card);
		border-radius:8px;
		max-width:200px;
		height:var(--mainPanelsHeight);
		text-align:center;
		border:1px solid var(--border);
	}
	.ring-card h4{
		font-size:16px;
		margin-bottom:2px;
		margin-top:0px;
		text-align:center;
		font-weight:700;
		width:100%;
		text-transform:uppercase;
		background:var(--gradientTopColor);
		color:var(--card);
		border-radius:8px;
	}
	.rings-main{
		background:var(--yellow);
		font-size:38px;
		font-weight:700;
		margin-bottom:1px;
		margin-top:1px;
		padding-left:10px;
		padding-right:10px;
		padding-top:2px;
		padding-bottom:2px;
		border:4px solid black;
	}
	.rings-sub{
		font-size:14px;
		color:#222
	}
	.active-club{
		font-weight:700
	}


/* <!-- _________________________________________________________________________________________________________ --> */
									/* <!-- SHORTCUT BUTTONS --> */
/* <!-- _________________________________________________________________________________________________________ --> */
	.shortcut-bar{
		display:flex;
		flex-direction: row;
		justify-content:center;
		align-items:center;
		gap:8px;
		flex-wrap:wrap;
	}
	.shortcutbarInfo{
		font-size:16px;
		font-weight:700;
		color:#ffffff;
		margin:1px 5px 0;
	}
	.shortcut-btn{
	  border:1px solid var(--border);
	  border-radius:4px;
	  padding-top:5px;
	  padding-bottom:5px;
	  padding-left:5px;
	  padding-right:5px;
	  font-size:14px;
	  background:#f2f2f2;
	  color:#666;
	  cursor:not-allowed;
	  transition:all 0.2s ease;
	  display: flex;
	  flex-direction: column;
	  gap: 20px;
	}
	.shortcut-btn.enabled{
		cursor:pointer;
		background:#fff;
		color:#222;
	}
	.shortcut-btn.active{
		background: var(--gradientTopColor);
		color:#fff;
		border-color: #f3f4f6;
		padding: 6px;
	}

	/* --- Modal Wrapper --- */
	#sc-info-modal {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		display: none;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	/* --- Modal Content --- */
	#sc-info-box {
		background: #ffffff;
		width: 90%;
		max-width: 520px;
		padding: 20px;
		border-radius: 12px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.25);
		font-size: 15px;
		line-height: 1.45;
		color: #003f66;
		position: relative;
	}

	/* Close Button */
	#sc-info-close {
		position: absolute;
		right: 10px;
		top: 8px;
		font-size: 20px;
		cursor: pointer;
		color: #555;
	}




  
/* <!-- _________________________________________________________________________________________________________ --> */
									/* <!-- ENDBRINGER SCHOOL --> */
/* <!-- _________________________________________________________________________________________________________ --> */
    
   /*	Endbringer School Panel 	*/
   .ebsPanelWrapper {
		display: flex;
		flex-direction: column;
		margin-top:1px;
		margin-bottom:0px;
		margin-left:4px;
		margin-right:4px;
		gap: 0px;
		border:1px solid var(--border);
		max-width: 800px;
		background:var(--card);
		border-radius:8px
   }

   .ebsPanelHeader {
		text-align: center;
		align-content:center;
		background:var(--gradientTopColor);
		margin-bottom:1px;
		padding:2px;
		font-size: 16px;
		font-weight: 700;
		color:var(--card);
 		border-radius:8px;
		width:100%;
    }
	.ebsPanelInfo {
		font-size: 11px;
		color: black;
		text-align: center;
	}
   
    .ebsPanelContainer {
		display: flex;
		flex-direction:row;
		margin-top:0px;
		margin-bottom:1px;
		margin-left:1px;
		margin-right:1px;
		padding:1px;
  }

   .ebsPanelColumn {
		display: flex;
		flex-direction:column;
		flex: 1;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:2px;
		margin-right:2px;
		padding:2px;
		gap: 0px;
		align-items:center;
		justify-content:center;
   }

   .ebsColRow {
		display:flex;
		flex-direction:column;    
		margin:1px;
		padding:1px;
		font-size: 14px;
		min-width: 100px;
		font-weight: 700;
		text-align:center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		gap: 0px;
		justify-content:center;
   }


  
  
/* <!-- _________________________________________________________________________________________________________ --> */
									/* <!-- MISC. --> */
/* <!-- _________________________________________________________________________________________________________   --> */
  /* responsive / aesthetics */
  .club-grid::-webkit-scrollbar{height:10px}
  .club-grid::-webkit-scrollbar-thumb{background:#ddd;6px}
  
	footer{
		margin-top:24px;
		text-align:center;
		color: #f3f4f6;
		font-size: 13px;
		padding-bottom: 0px;
	}

footer {}

	.selected{
		background: var(--gradientTopColor);
		color:#fff;
		border-color: #111;
	}



.show {
/* .toast.show { */
  opacity:1;
  transform: translateY(0);
}



/* Visibility classes */
.hidden {
    display: none;
}

	/* --- Info Icon --- */
	.info-icon {
		display: inline-flex;
		justify-content: center;
		align-self: center;
		align-items: center;
		width: 18px;
		height: 18px;
		padding-top: 8px;
		margin-right: 12px;
		font-family: Javanese Text;
		font-size: 15px;
		font-weight: bold;
		text-transform: lowercase;
		border-radius: 50%;
		background-color: #fff;
		color: #0a3d62;
		border: 1px solid #0a3d62;
		cursor: pointer;
		user-select: none;
	}	
	.info-icon-spcr {
		display: inline-flex;
		justify-content: center;
		align-self: end;
		width: 18px;
		height: 18px;
		margin-left: 6px;
		font-size: 12px;
		font-weight: bold;
		text-transform:lowercase;
		border-radius: 50%;
		background-color: var(--gradientTopColor);
		color: #0a3d62;
		border: 1px solid #0a3d62;
		cursor: none;
		user-select: none;
	}