#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #101820;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 1;
  transition: opacity 0.35s ease;
}
#loadingOverlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
#loadingOverlayLogo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  animation: loading-pulse 2s ease-in-out infinite;
}
#loadingOverlayText {
  color: #cc2020;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  animation: loading-fadein 0.5s ease 0.4s forwards;
}
#loadingOverlayLicense {
  color: rgba(255,255,255,0.9);
  font-size: 1.6rem;
  font-weight: bold;
  min-height: 1em;
  opacity: 0;
  animation: loading-fadein 0.5s ease 0.4s forwards;
}
#loadingOverlayDots {
  display: flex;
  gap: 10px;
}
#loadingOverlayDots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cc2020;
  opacity: 0.3;
  animation: loading-dot 1.2s ease-in-out infinite;
}
#loadingOverlayDots span:nth-child(2) { animation-delay: 0.2s; }
#loadingOverlayDots span:nth-child(3) { animation-delay: 0.4s; }

#loadingOverlayStage {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  min-height: 1em;
}
#loadingOverlayClose {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 18px);
  right: calc(env(safe-area-inset-right) + 18px);
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
  transition: color 0.2s;
}
#loadingOverlayClose:hover {
  color: rgba(255,255,255,0.7);
}

@keyframes loading-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 10px rgba(200,30,30,0.3)); }
  50%       { transform: scale(1.06); filter: drop-shadow(0 0 24px rgba(200,30,30,0.6)); }
}
@keyframes loading-fadein {
  to { opacity: 1; }
}
@keyframes loading-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-5px); }
}

/* ===== RESET & BASE ===== */
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			-webkit-user-select: none;
			user-select: none;

			-webkit-touch-callout: none;
			-webkit-tap-highlight-color: transparent;
      /* --map-controls-scale: 1; */
		}
    #panel-help{
      --map-controls-scale: 1;
    }

		button:focus,
		button:active {
			outline: none !important;
			box-shadow: none !important;
		}

		input,
		textarea {
			-webkit-user-select: text;
			user-select: text;
		}

		/* ===== MAIN FONT ===== */

		:root {
			--main-font: -apple-system,
				BlinkMacSystemFont,
				"Segoe UI",
				Roboto,
				"Noto Sans",
				Arial,
				sans-serif;
			--notif-extra: 0px;
      --trip-extra: 0px;
      
      --panel-width-bunches: 425px;
      --panel-height-bunches: 540px;
      --app-scale:1;
      --nav-height: calc(30px * var(--app-scale, 1));
      --panelH-portrait: min(
        440px,
        calc(
          (
            100dvh
            - env(safe-area-inset-top)
            - var(--nav-height)
            - var(--notif-extra)
            - var(--trip-extra)
          ) / 2
        )
      );

      --bg-page: #111;
      --bg-body: #272727;
      --bg-panel: #1e1e1e;
      --bg-elevated: #2a2a2a;
      --bg-card-alt: #1f1f1f;
      --bg-control: #424242;
      --text-primary: #fff;
      --text-secondary: #aaa;
      --text-disabled: #888;
      --border-color: #555;
      --accent: #cc2020;
      --shadow-color: rgba(0,0,0,0.4);
      --map-water: #003e6b;
		}

		html.light-theme {
      --bg-page: #f2f2f0;
      --bg-body: #e8e8e6;
      --bg-panel: #ffffff;
      --bg-elevated: #f5f5f5;
      --bg-card-alt: #fafafa;
      --bg-control: #dcdcdc;
      --text-primary: #1a1a1a;
      --text-secondary: #555;
      --text-disabled: #999;
      --border-color: #ccc;
      --shadow-color: rgba(0,0,0,0.15);
		}

		html,
		body {
			font-family: var(--main-font);
			font-size: 16px;
			color: var(--text-primary);
			letter-spacing: 0.3px;
			height: 100%;
			overflow: hidden;
			/* page must NEVER scroll */
			background: var(--bg-page);
			-webkit-touch-callout: none;
		}

		html {
			-webkit-text-size-adjust: 100%;
		}

		body {
			overscroll-behavior: none;
			background: var(--bg-body);
		}

		#app {
			position: relative;
      height: 100vh; /*IMPORTANT for Android 11 UI 3.1*/
	    height: 100dvh;
			/* IMPORTANT for Android */
		}

		* {
			-webkit-tap-highlight-color: transparent;
		}

/* ===== SAFE ZONES ===== */

		.safe {
			position: absolute;
			/* background: rgba(255, 0, 255, 0.233); */
			z-index: 100;
			pointer-events: none;
		}

		#safeTop {
			top: 0;
			left: env(safe-area-inset-left);
			right: env(safe-area-inset-right);
			height: env(safe-area-inset-top);
		}

		#statusBtn {
			flex: 0 1 auto;
			font-weight: 600;
			position: relative;
		}

		#statusBtn.hidden {
			display: none;
		}

		#csbClock {
			display: inline-block;
			min-width: 3em;
			text-align: center;
		}

		#csbBattery {
			display: inline-block;
			min-width: 3.8em;
			text-align: center;
		}

		#csbThemeIcon {
			position: absolute;
			right: 0.3em;
			top: 50%;
			transform: translateY(-50%);
		}


		#safeBottom {
			bottom: 0;
			left: 0;
			right: 0;
			height: env(safe-area-inset-bottom);
      
		}

		#safeLeft {
			top: 0;
			bottom: 0;
			left: 0;
			width: env(safe-area-inset-left);
		}

		#safeRight {
			top: 0;
			bottom: 0;
			right: 0;
			width: env(safe-area-inset-right);
      
		}

/* ===== NOTIFICATION BAR ===== */

		#notifBar {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;

			height: calc(env(safe-area-inset-top) + var(--notif-extra));

			background: #ffee00;
			color: black;

			display: flex;
			align-items: flex-end;
			justify-content: center;

			padding-bottom: 8px;

			font-size: 18px;
			font-weight: bold;

			overflow: hidden;
			transition: height 0.25s ease;

			z-index: 90;

			will-change: height;
			transform: translateZ(0);
			backface-visibility: hidden;
			border-radius: 10px;
		}

		#notifInner {
			position: absolute;
			bottom: 0;
			left: env(safe-area-inset-left);
			right: env(safe-area-inset-right);
			height: var(--notif-extra);

			background: #ffee00;
			color: black;

			display: flex;
			align-items: center;
			justify-content: flex-start;
			overflow: hidden;

			font-size: 26px;
			font-weight: bold;

			transition: opacity 0.2s ease;
		}

		#notifText {
			display: inline-block;
			white-space: nowrap;
			flex-shrink: 0;
		}

		#notifBar.hidden {
			height: env(safe-area-inset-top);
			padding-bottom: 0;

			background: transparent;
		}

		#notifBar.hidden #notifInner {
			opacity: 0;
		}

		#notifFixTimeBtn {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
		}

		#notifFixTimeBtn.hidden {
			display: none;
		}

		#notifBatteryBtn {
			position: absolute;
			right: calc(10px + env(safe-area-inset-right, 0px));
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
		}

		#notifBatteryBtn.hidden {
			display: none;
		}

		#notifRestartBtn.hidden {
			display: none;
		}



/* ===== TOP NAVIGATION ===== */
		#topNav {
			/* position: absolute; */

			/* attach to notif bottom */
			top: calc(env(safe-area-inset-top) + var(--notif-extra));

			left: env(safe-area-inset-left);
			right: env(safe-area-inset-right);

			height: var(--nav-height);

			background: var(--bg-body);

			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;

			gap: 1px;
			padding: 4px;

			box-sizing: border-box;
			overflow: hidden;

			transition: top 0.25s ease;

			z-index: 80;
			will-change: top;
			transform: translateZ(0);
			backface-visibility: hidden;

		}

		/* when notif closed → nav moves up */
		#notifBar.hidden+#topNav {
			top: env(safe-area-inset-top);
		}


		#topNav button {

			flex: 1 1 auto;
			min-width: 0;
			font-size: min(4vw, 16px);
			white-space: nowrap;
			height: calc(25px);

			background: #6d6d6d;
			color: #000;

			border: none;
			outline: none;
			box-shadow: none;

			-webkit-appearance: none;
			appearance: none;

			-webkit-tap-highlight-color: transparent;

			border-radius: 6px;

			overflow: hidden;
		}

		#topNav button.active {
			background: var(--bg-body);
			color: var(--text-primary);
		}


/* ===== PANEL & PAGES ===== */
#panel-trips {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#panel-trips .columns {
  flex: 1;
  min-height: 0;
}

#panel-trips .col {
  min-height: 0;
}

#panel-trips .panelScroll {
  min-height: 0;
}

#panel-trips .col.tripListcol,
#panel-trips .col.tripDetails {
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* kill the outer scrollbar */
  min-height: 0;
}

/* ensure the inner scroller gets the leftover height */
#panel-trips .panelScroll {
  flex: 1;
  min-height: 0;
}

/* ===== MAIN LAYOUT ===== */
		#mainArea {
			position: absolute;

			/* attach to bottom of nav */
			top: calc(env(safe-area-inset-top) + var(--nav-height)
        +	var(--notif-extra)
        + var(--trip-extra)
				);

			left: calc(env(safe-area-inset-left));
			right: calc(env(safe-area-inset-right));
			bottom: calc(env(safe-area-inset-bottom));

			background: var(--bg-body);

			padding: 3px;

			transition: top 0.25s ease;

			will-change: top;
			transform: translateZ(0);
			backface-visibility: hidden;
		}

		/* when notif hidden → move up */
		#notifBar.hidden+#topNav+#mainArea {
			top: calc(env(safe-area-inset-top) + var(--nav-height));
		}

		#viewport {
			position: absolute;
			inset: 5px;
			overflow: hidden;

        transform-origin: top left;
      transform: scale(var(--app-scale, 1));

      width: calc(100% / var(--app-scale, 1));
      height: calc(100% / var(--app-scale, 1));
  
		}

		#mapCanvas {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			background: var(--map-water);
			border-radius: 10px;
		}

		input[type="checkbox"] {
			width: 22px;
			height: 22px;
			min-width: 22px;
			min-height: 22px;
		}

		/* input[type="checkbox"] {
			outline: 2px solid red;
		} */

		#panel {
			position: absolute;
			background: var(--bg-body);
			z-index: 5;
			transition: transform 0.25s ease;
			will-change: transform;
			transform: translateZ(0);
			backface-visibility: hidden;
			border-radius: 12px;
		}

		#viewport.landscape #panel {
			top: 0px;
			bottom: 0px;
			left: 0px;
			width: var(--panel-width, 260px);
			height: auto;
		}

		#viewport.portrait #panel {
			left: 5px;
			right: 5px;


      height: 440px;
      max-height: calc(
        (
          100dvh
          - env(safe-area-inset-top)
          - var(--nav-height)                  /* topNav */
          - var(--notif-extra)
          - var(--trip-extra)
        ) / 2
      );
			width: auto;
		}
    #viewport.portrait.mode-bunches #panel {
      height: var(--panel-height-bunches);
            max-height: calc(
        (
          100dvh
          - env(safe-area-inset-top)
          - var(--nav-height)                 /* topNav */
          - var(--notif-extra)
          - var(--trip-extra)
        ) / 1.5
      );
    }
    #viewport.portrait.mode-bunches {
      --panelH-portrait: var(--panel-height-bunches);
    }
		#viewport.portrait.mapTop #panel {
			bottom: 0px;
			top: auto;
		}

		#viewport.portrait.mapBottom #panel {
			top: 0px;
			bottom: auto;
		}

		#panelPages {
			position: absolute;
			inset: 0;
		}

		.panelPage {
			position: absolute;
			inset: 0;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.2s ease;
			display: flex;
			flex-direction: column;
		}

		.panelPage.active {
			opacity: 1;
			pointer-events: auto;
		}

		.panelScroll {
			flex:1;
			overflow-y:auto;
			overflow-x:hidden;

			-webkit-overflow-scrolling: touch; /* iOS smooth */
			overscroll-behavior: contain;      /* stop page bounce */
		}
		.panelScroll::-webkit-scrollbar {
		width: 12px;
		}

		.panelScroll::-webkit-scrollbar-track {
		background: var(--bg-control);
		border-radius: 6px;
		}

		.panelScroll::-webkit-scrollbar-thumb {
		background: var(--text-disabled);
		border-radius: 6px;
		}

		.panelScroll::-webkit-scrollbar-thumb:hover {
		background: #555;
		}


		#viewport.landscape.mode-trips:has(.tripDetails.active) {
			--panel-width: 520px;
		}

		#viewport.landscape.mode-trips:not(:has(.tripDetails.active)) {
			--panel-width: 235px;
		}
		#viewport.landscape.mode-bunches {
			--panel-width: var(--panel-width-bunches);
		}

		#viewport.landscape.mode-logs {
			--panel-width: 520px;
		}

		#viewport.landscape.mode-settings {
			--panel-width: 400px;
		}

		#viewport.landscape.mode-help {
			--panel-width: 400px;
		}



button {
  -webkit-appearance: none;
  appearance: none;

  background: var(--bg-control);
  border: #000;

  outline: none;
  box-shadow: none;

  border-radius: 0;

  -webkit-tap-highlight-color: transparent;
}

#overlay-ok, #crewSaveBtn, #overlay-cancel, #crewCancelBtn {
  flex: 1;
  max-width: 140px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
#overlay-ok, #crewSaveBtn   { background: rgb(0, 187, 0); }
#overlay-cancel, #crewCancelBtn { background: rgb(214, 104, 0); }
/* Kill focus/active glow */

button:focus,
button:focus-visible,
button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Firefox inner border */

button::-moz-focus-inner {
  border: 0;
}



#setConfirmOverlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: none;
}

#setConfirmBox {
	position: absolute;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(30,30,30,0.95);
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	text-align: center;
	pointer-events: auto;
	z-index: 9999;
	font-size: 14px;
	max-width: 220px;
}

#bigCatchWarningOverlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10001;
}

#bigCatchWarningOverlay.active {
	display: flex;
}

#bigCatchWarningBox {
	background: var(--bg-body);
	color: var(--text-primary);
	padding: 1.4em 2em;
	border-radius: 8px;
	text-align: center;
	max-width: 340px;
	border: 2px solid #f5a623;
}

#bigCatchWarningTitle {
	font-size: 22px;
	font-weight: bold;
}

#bigCatchWarningDetail {
	font-size: 17px;
}

#bigCatchWarningHint {
	font-size: 13px;
	opacity: 0.6;
}



.col.bunchlist{
  flex: none;
  width: 65px;

  display: flex;
  flex-direction: column;

  min-height: 0;     /* ← this makes it match parent height */
  overflow: hidden;  /* outer does NOT scroll */
}

.col.bunchlist .panelScroll{
  flex: 1;           /* take full height of col */
  min-height: 0;
}

/* ===== COLUMN LAYOUT ===== */
.columns {
  display: flex;
  flex: 1;

  gap: 4px;      /* 👈 spacing between each column */
  margin: 0px;     /* space around the whole row of columns */
  box-sizing: border-box;

}
.col.tripListcol{
  flex: 0 0 auto; 
  width: fit-content;
  max-width: 300px; 
  white-space: nowrap;
}
.col {
  flex: 1;
  background: var(--bg-control);
  padding: 4px;
  overflow-y: auto;
  border-radius: 7px;
}
.col.quickbunch{
  flex: 0 0 auto;         /* don’t grow or shrink, size from content */
  width: fit-content;     /* wrap column to widest child */
  max-width: 300px;       /* optional cap */
  white-space: nowrap;    /* prevent text wrapping inside */
  overflow-x: hidden;     /* badge/overlay must never create a horizontal scrollbar */
}
/* .col.bunchlist{
  flex: none;
  width: 65px;     
  overflow-y: auto;
  overflow-x: hidden;
} */

#panel-bunches {
  min-height: 0;
}

#panel-bunches .columns {
  flex: 1;
  min-height: 0;
}

#panel-bunches .col {
  min-height: 0;
}
#panel-bunches .ui-scale-wrap{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

#panel-bunches .ui-scale-content{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
/* do NOT touch .col.quickbunch */
.quickbunch-overlay {
	position: absolute;
	height: 65px;
  padding: 6px;
	background: rgba(0,0,0,0.5);
	border-radius: 6px;
	z-index: 50;

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;

	/* rotate whole overlay */
	transform: rotate(-90deg) translateX(-100%);
	transform-origin: top left;
}
.quickbunch-overlay.threeblock {
  width: 182px;
  margin-top: 0px;
  font-size: 20px; /* base size */
}
.quickbunch-overlay.twoblock_middle {
  width: 120px;
  margin-top: 124px;
  font-size: 15px; /* base size */
 }
.quickbunch-overlay.twoblock_top {
  width: 120px;
  margin-top: 0px;
  font-size: 15px; /* base size */
 }
.quickBunchOverlay-content {
	/* transform: rotate(-90deg); */
	color: #fff;
	font-weight: bold;
	/* font-size: 1.1em; */
	/* white-space: nowrap; */
  text-align: center;     /* ← THIS was missing */


  	color: #fff;
	font-weight: bold;

	/* responsive text */
	/* font-size: clamp(12px, 1.1vh, 18px); */
  
	text-align: center;
	line-height: 1.1;

	white-space: normal;
	word-break: break-word;
}

.quickbunch-overlay .small {
	display: block;
	margin-top: 6px;
	font-size: 9px; /* base size */
	opacity: 0.9;
  
}

.quickBunchOverlay-hidden {
	display: none !important;
}
.first-run{
	text-align:center;
	max-width:400px;
  background: var(--bg-elevated);
  padding:12px 20px;
  border-radius: 16px;
}

.bunch-options{
	display:flex;
	gap:10px;
	justify-content:center;
	margin:10px 0;
}

.bunch-options button{
	padding:12px 20px;
	font-size:18px;
}

.primary{
	margin-top:15px;
	padding:12px 20px;
	font-size:18px;
  border-radius: 6px;
}

.col.auto {
  flex: 0;         /* don't flex, size based on content */
  width: auto;     /* shrink/grow exactly to fit its children */
  max-width: 300px; /* optional limit */
}

footer {
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-align: center;
  padding: 5px;
}

/* Custom scrollbar */
.col::-webkit-scrollbar {
  width: 15px;              /* scrollbar width */
}
.col::-webkit-scrollbar-track {
  background: var(--bg-control);       /* track color */
  border-radius: 7px;
}
.col::-webkit-scrollbar-thumb {
  background: var(--text-disabled);
  border-radius: 6px;
}
.col::-webkit-scrollbar-thumb:hover {
  background: #555;          /* thumb hover color */
}

.quickbunch-tile {
  display: block;           /* stack vertically */
  width: 65px;              /* fixed width (adjust as needed) */
  height: 58px;              /* default; overridden to 78px in nomap mode */
  /* margin: 4px auto;          */
  margin-bottom: 4px;         
  padding: 0px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  color: #000;
}

.bunch-tile {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  width: 100%;
  height: 40px;

  margin: 4px auto;
  padding: 8px;

  border-radius: 6px;
  box-sizing: border-box;

  text-align: center;
  cursor: pointer;
  color: #000;
  line-height: 1; /* 👈 tighter lines */
}

.bunch-tile.add-bunch {
  background: #e0e0e0;   /* light gray */
  color: #333;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.bunch-tile.add-bunch:hover {
  background: #cfcfcf;   /* slightly darker gray on hover */
}


.bunch-label{
	display: flex;
	align-items: center;   /* vertical alignment */
	gap: 6px;
}

.bunch-number{
	font-size: 30px;
  
}


    .quickbunch-tile.red    { background: rgb(245,  33,  33); }
    .quickbunch-tile.white  { background: rgb(243, 243, 243); }
    .quickbunch-tile.yellow { background: rgb(255, 238,   0); }

    .quickbunch-boat-wrap {
      position: relative;
    }
    .quickbunch-boat-count {
      position: absolute;
      bottom: -1px;
      right: -1px;
      min-width: 28px;
      height: 28px;
      padding: 0 6px;
      border-radius: 14px;
      background: #000;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      line-height: 28px;
      text-align: center;
      z-index: 10;
      box-shadow: 0 0 0 2px rgb(243, 243, 243);
      pointer-events: none;
    }

    .bunch-tile.red         { background: rgb(206,   0,   0); } /* on the boat (no pending catch) */
    .bunch-tile.white       { background: rgb(243, 243, 243); } /* not fished today(yet) */
    .bunch-tile.green       { background: rgb(  5, 141,   0); } /* set back catch is saved */
    .bunch-tile.yellow      { background: rgb(255, 238,   0); } /* set back but wait for catch */
    .bunch-tile.pink        { background: rgb(255,   0, 234); } /* on boat but wait for catch */
    
    .num { display: block; font-size: 20px; font-weight: bold; }
    .info { display: block; font-size: 11px; white-space: pre-line; }
    
    /* #numPad button {
      width: 50px; height: 50px; margin: 2px;
      font-size: 16px;
    } */


/* ===== BUNCH BLOCKS ===== */
.bunch-block {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: 8px;            /* rounded edges */
  padding: 2px;                 
  width: 100%;                   /* auto fit width of container */
  box-sizing: border-box;         /* prevent overflow */
  margin-bottom: 2px;
}

#bunch_blocks {
  display: grid;
  gap: 1px;
  width: 100%;
  grid-auto-rows: 28px; /* fixed row height */
  touch-action: none;
   flex: 1; 
}

.bunch-progress-block {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  border-radius: 4px;
  overflow: hidden;      
  text-overflow: ellipsis;
  color: #fff;
  flex-direction: column; 
}
.bunch-progress-id {
  font-size: 10px;
  line-height: 1;
}

.bunch-progress-total {
  font-size: 12px;
  font-weight: bold;
}

@keyframes blink-question {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.bunch-progress-block.pending-catch .bunch-progress-total {
  animation: blink-question 1s step-start infinite;
}

.bunch-catch-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-panel);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 12px 16px;
  width: 210px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  font-size: 15px;
  pointer-events: all;
  overflow: hidden;
}
.bcp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.bcp-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.bcp-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: var(--text-secondary);
}
.bcp-total {
  font-weight: bold;
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
  padding-top: 4px;
}
.bcp-scroll-body {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -16px;
  padding: 0 16px;
}
.bcp-haul-header {
  font-weight: bold;
  color: var(--text-primary);
  margin-top: 6px;
  margin-bottom: 2px;
}
.bcp-indent {
  padding-left: 10px;
  color: var(--text-disabled);
}
.bcp-divider {
  border-top: 1px solid var(--border-color);
  margin: 6px 0 4px;
}
.bcp-haul-actions {
  margin: 3px 0 6px;
}
.bcp-haul-actions .bcp-edit-btn {
  width: 100%;
}
.bcp-actions {
  margin-top: 10px;
}
.bcp-edit-btn {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 0;
  font-size: 15px;
  cursor: pointer;
}
.bcp-edit-btn:active {
  background: #3a3a3a;
}
.groups-popup {
  width: min(94vw, 340px);
}
.avg-popup-section-title {
  font-weight: bold;
  font-size: 13px;
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  margin: 10px 0 8px;
  padding-top: 8px;
}
.avg-popup-scope-bar {
  gap: 6px;
  margin-bottom: 10px;
}
.avg-popup-scope-bar .area-scope-btn {
  padding: 6px 2px;
  font-size: 0.7rem;
}
/* Area Averages trend strip needs more room than the compact Groups list
   this popup style was built for - the 7-day strip's blocks (font-size 16px
   inline, set in JS) don't fit the 340px groups-popup width. Widen the
   popup, shrink the block text, and let blocks wrap to a second row on
   narrow phones instead of clipping. */
.avg-types-popup {
  width: min(96vw, 420px);
}
.avg-types-popup .group-row-label {
  flex: 0 0 56px;
  width: 56px;
}
.avg-types-popup .group-trend-row {
  flex-wrap: wrap;
  row-gap: 3px;
}
.avg-types-popup .group-trend-block {
  flex: 1 1 32px;
  min-width: 32px;
  padding: 3px 1px;
}
.avg-types-popup .group-trend-block div:nth-child(2) {
  font-size: 11px !important;
}
.avg-types-popup .group-trend-block div:nth-child(1),
.avg-types-popup .group-trend-block div:nth-child(3) {
  font-size: 7px !important;
}
.bcp-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-manage-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
.group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.group-row:last-child {
  margin-bottom: 0;
}
.group-row-label {
  flex: 0 0 68px;
  width: 68px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.group-row-name {
  min-width: 0;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-row-avg {
  font-size: 11px;
  color: var(--text-secondary);
}
.group-trend-row {
  display: flex;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.group-trend-block {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  box-sizing: border-box;
  padding: 4px 3px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
}

/* ---- Group manager overlay ---- */
.group-mgr-empty {
  opacity: 0.6;
  text-align: center;
  padding: 16px;
}
.group-mgr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}
.group-mgr-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.group-mgr-name {
  font-weight: bold;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-mgr-count {
  font-size: 0.8em;
  color: var(--text-secondary);
}
.group-mgr-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.group-mgr-traps, .label-mgr-traps {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.group-mgr-rename, .group-mgr-delete {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
}
.label-mgr-category {
  margin-bottom: 10px;
}
.label-mgr-category h4 {
  margin: 10px 0 2px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Trap selector (plain numbered checklist) ---- */
.trap-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  /* Disables native touch panning here so a finger-drag across chips is read
     as swipe-select instead of a page scroll; .overlay-content around it
     still scrolls normally when you touch outside the grid itself. */
  touch-action: none;
}
.trap-select-chip {
  min-width: 40px;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: none;
}
.trap-select-chip.active {
  background: #2d7cff;
  border-color: #2d7cff;
  color: #fff;
}
.bunch-progress-block.drag-selected {
  box-shadow: inset 0 0 0 3px #fff;
  position: relative;
  z-index: 2;
}
.bunch-progress-block.drag-selected::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: bunch-sel-flash 0.6s ease-in-out infinite alternate;
}
@keyframes bunch-sel-flash {
  from { background: rgba(255,255,255,0.45); }
  to   { background: rgba(220,30,30,0.55); }
}
.bcp-close-timer {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bcp-timer-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.bcp-timer-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3;
}
.bcp-timer-ring {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 56.55;
  stroke-dashoffset: 0;
}
.bcp-close-timer span {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1;
}

#no-trip {
  padding: 10px;
  text-align: center;

}

#no-trip div {
  margin-bottom: 12px;
  line-height: 1.5;
}

.numPadClass {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 0.1em;
  justify-content: center;
}
.numPadClass button {
  font-size: 30px;
  cursor: pointer;
  background: var(--bg-control);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: bold;
  transition: background 0.2s;
}
.numPadClass button.orangebg {
  background: rgb(214, 104, 0);
}
    /* Inputs */
#catch-fields input {
  width: 100px;
  padding: 8px;
  font-size: 1.2rem;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  margin: 4px 0;
  text-align: right;
}

/* Flashing active input */
.flash-active {
  border-color: #00ccff;
  box-shadow: 0 0 42px #00ccff;
  animation: flashPulse 0.5s infinite;
    outline: none;
  box-shadow: none;
}
@keyframes flashPulse {
  0%,100% { box-shadow: 0 0 60px #00ccff; background-color: #ff0000; }
  50%     { box-shadow: 0 0 0 transparent; background-color: transparent}
}

#catch-fields {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.bunch-edit-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.bunch-edit-title{
	flex:1;
	text-align:center;
}

.nav-bunch-btn{
	width:42px;
	min-width:42px;
	height:42px;
}


/* Labels above inputs */
#catch-fields label {
  font-size: .8rem;
  font-weight: bold;
  margin-bottom: -5px;
  display: block;
  color: var(--text-secondary);
}

#catch-fields input {
  width: 60px;
  padding: 4px;
  font-size: 1.2rem;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  text-align: right;
  background: var(--bg-control);
  color: var(--text-primary);
}

/* Save button */
#saveCatchBtn, .save-catch {
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 1.2rem;
  font-weight: bold;
  background: rgb(214, 104, 0);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}
#saveCatchBtn:hover, .save-catch:hover {
  background: darkorange;
}

.catch-row.inline {
  display: flex;
  align-items: flex-end;   /* bottom-align inputs with button */
  gap: 10px;
}
.catch-row.inline .field {
  display: flex;
  flex-direction: column;
  width: 80px;            /* keep inputs narrow */
}

.catch-row.inline label {
  font-size: 0.8rem;
  margin-bottom: 2px;
}
.catch-row {
  display: flex;
  align-items: stretch;   /* make both columns equal height */
  gap: 10px;
}
.catch-row.flex {
  display: flex;
  align-items: flex-end; /* aligns button nicely with inputs */
  gap: 12px;            /* spacing between items */
}

.catch-row.flex .field {
  display: flex;
  flex-direction: column;
}
/* ✅ push save button all the way to the right */
.catch-row.flex button {
  margin-left: auto;
}

/* Inputs stacked */
.catch-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;                /* take available space */
}

/* Fields */
.catch-inputs .field {
  display: flex;
  flex-direction: column;
}

.catch-inputs label {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: -2px; /* keeps it tight like you like */
  color: var(--text-secondary);
}

.catch-inputs input {
  width: 100%;
  padding: 6px;
  font-size: 1.2rem;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  text-align: right;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Save Catch button tall */
#savecatchBtn {
  flex: 0 0 140px;   /* fixed width - wide enough for a note later */
  background: orange;
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#savecatchBtn:hover {
  background: darkorange;
}
#savecatchBtn.cancel-mode {
  background: rgb(214, 0, 0);
  color: #fff;
}
#savecatchBtn.cancel-mode:hover {
  background: rgb(170, 0, 0);
}



/* ===== NOTIFICATION BAR OVERRIDES (transition, opacity) ===== */

#notifBar {
  position: relative;
  height: calc(env(safe-area-inset-top) + 30px);
  font-weight: bold;
  background: #ffee00;
  color: #000;
  overflow: hidden;
  opacity: 1;
  transition: height 0.4s ease, opacity 0.4s ease;
}

#notifBar.hidden {
  background: var(--bg-body);
  height: env(safe-area-inset-top);
  opacity: 0;
}

@keyframes scrollNotif {
  0%   { transform: translateX(var(--scroll-start)); }
  100% { transform: translateX(var(--scroll-end)); }
}

.ui-scale-nav {

  transform: scale(var(--app-scale));
  transform-origin: top left;

  width:  calc(100% / var(--app-scale));
  /* height: calc(100% / var(--app-scale)); */

  display: flex;
  align-items: center;
}
.ui-scale-nav #topNav {
  flex: 1;
  min-width: 0;
}

.ui-scale-trip {

  transform: scale(var(--app-scale));
  transform-origin: top left;

  width:  calc(100% / var(--app-scale));
  /* height: calc(100% / var(--app-scale)); */
}



.bunch-header {
  position: sticky;
  top: 0;
  background: #ffee00;
  padding: 3px 3px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  border-radius: 5px;
  height: 30px;
  color: #000;
}

#header-bunch {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}




.maint-block {
  /* background: var(--bg-panel); */
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1.2em;
}

.maint-block strong {
  display: block;
  color: var(--text-secondary);
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.force-catch-btn {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
}

.force-catch-btn:active {
  background: var(--bg-control);
  color: var(--text-primary);
}

.last10-btn {
  font-size: 11px;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  text-align: center;
}
.last10-btn:active,
.last10-btn--on {
  background: var(--bg-control);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.last10-btn--locked {
  opacity: 0.45;
}

html.light-theme .last10-btn--locked {
  opacity: 0.7;
}

.tier-locked-dim {
  opacity: 0.45;
}

html.light-theme .tier-locked-dim {
  opacity: 0.7;
}

.tag-list {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  margin-bottom: 4px;
}

.tag-chip {
  background: var(--bg-panel);
  /* background: var(--bg-elevated); */
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  width: fit-content;
  font-size: 0.9em;
}

.beacon-live-info {
  color: var(--text-secondary);
  font-size: 0.85em;
}

.tag-chip.inactive {
  opacity: 0.4;
  text-decoration: line-through;
}

.beacon-live-info {
  color: var(--text-secondary);
  font-size: 0.85em;
}











#haul-input {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

#haulBtn {
  background: #e60000;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#set-input {
  display: flex;
  flex-direction: column;   /* stack children top → bottom */
  justify-content: space-between; /* push last element to bottom */
  background: transparent;
}

#setBtn {
  align-self: center;       /* button centered left-right at bottom */
  background: #328801;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Simple Haul/Set: Set & Save combo - half Set green, half Save Catch orange */
#setBtn.combo-mode {
  background: linear-gradient(90deg, #328801 50%, #d47f00 50%);
}

#catch-input {
  display: flex;
  flex-direction: column;   /* stack children top → bottom */
  justify-content: space-between; /* push last element to bottom */
  background: transparent;
}

#savecatchBtn {
  align-self: center;       /* button centered left-right at bottom */
  background: #d47f00;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 0px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#haulBtn:hover {
  opacity: 0.85;
}


main {
  flex: 1;
  overflow: hidden;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
}

.page {
  display: none;
  max-height: 100%;
  box-sizing: border-box;
}
.page.active {
  display: flex;
}
.page2 {
  display: flex;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
}




main.wide {
  flex-direction: row;
}
main.wide .page.active {
  /* flex: 0 0 var(--page-width, 25em); */
  display: flex;
}




main.narrow {
  flex-direction: column;
}












.map-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #0a1a2a;
}

/* ===== MAP ===== */
#map {
  position:absolute;
  top:0;
  left:0;
  right:4px;
  bottom:0px;
  z-index: 500;
}
#viewport.landscape:not(.mapFull) #map {
  left: calc(var(--panel-width) + 0px);
  /* left: 400px; */
}
#viewport.portrait.mapTop:not(.mapFull) #map {
  bottom: calc(var(--panelH-portrait) + 10px);
}
#viewport.portrait.mapBottom:not(.mapFull) #map {
  top: calc(var(--panelH-portrait) + 10px);
}

/* ===== NO MAP ACTION PANEL ===== */
#nmActionPanel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 8px;
  bottom: 8px;
  z-index: 500;
  background: var(--bg-control);
  border-radius: 10px;
  padding: 16px;
  overflow-y: auto;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
/* Hide map, show action panel - only on the bunches tab in nomap mode */
#viewport.nomap.mode-bunches:not(.mapFull) #map { display: none; }
#viewport.nomap.mode-bunches:not(.mapFull) #nmActionPanel { display: flex; }

/* Position mirrors #map positioning */
#viewport.landscape.nomap.mode-bunches #nmActionPanel {
  left: calc(var(--panel-width) + 0px);
}
#viewport.portrait.mapTop.nomap.mode-bunches #nmActionPanel {
  bottom: calc(var(--panelH-portrait) + 10px);
}
#viewport.portrait.mapBottom.nomap.mode-bunches #nmActionPanel {
  top: calc(var(--panelH-portrait) + 10px);
}

/* Portrait nomap: action panel mirrors the map area, buttons fill it */
#viewport.portrait.nomap.mode-bunches #nmActionPanel {
  left: 5px;
  right: 5px;
  bottom: 5px;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}
/* Each block takes half the width and fills the full height */
#viewport.portrait.nomap.mode-bunches #nmActionPanel #haul-input,
#viewport.portrait.nomap.mode-bunches #nmActionPanel #set-input {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Buttons stretch to fill their container - always the same size as each other */
#viewport.portrait.nomap.mode-bunches #nmActionPanel #haulBtn,
#viewport.portrait.nomap.mode-bunches #nmActionPanel #setBtn {
  flex: 1;
  min-height: 0;
  height: 100%;
}
#viewport.portrait.nomap.mode-bunches #nmActionPanel .set-bunch-row {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#viewport.portrait.nomap.mode-bunches #nmActionPanel #no-trip {
  width: 100%;
}

/* Dimmed state: visible but inactive */
.nm-dimmed {
  opacity: 0.25;
  pointer-events: none;
}

/* Action buttons - fixed px like regular buttons, appscale handles overall zoom */
#nmActionPanel #haulBtn,
#nmActionPanel #setBtn,
#nmActionPanel #savecatchBtn {
  font-size: 28px;
  padding: 16px 32px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  min-height: 3em;
  font-weight: bold;
}

/* Containers fill width */
#nmActionPanel #haul-input,
#nmActionPanel #set-input {
  width: 100%;
  justify-content: center;
}

/* Hide the <br> after haulBtn so haul and set buttons are the same height */
#nmActionPanel #haul-input br {
  display: none;
}


/* In nomap mode the action blocks are gone from bunchActionCol;
   remove the hard min-width so the numpad column can shrink naturally */
#viewport.nomap #bunchActionCol {
  min-width: 0;
}

/* Catch blocks ignore no-map mode entirely for the quick bunch list - every
   nomap-specific override below is skipped while .qb-catchblocks is set, so
   the list renders exactly like normal (map-visible) mode. */
#viewport.nomap:not(.qb-catchblocks) .quickbunch-tile {
  height: 78px;
}
#viewport.nomap:not(.qb-catchblocks) .quickbunch-tile .num {
  font-size: 30px;
}
#viewport.nomap:not(.qb-catchblocks) .quickbunch-overlay.twoblock_top {
  width: 160px; /* 2 × 78px + 4px gap */
}
#viewport.nomap:not(.qb-catchblocks) .quickbunch-overlay.twoblock_middle {
  width: 160px;
  margin-top: 164px;
}

#nmActionPanel .set-bunch-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

#nmActionPanel .bait-select {
  gap: 4px 8px;
  padding: 4px 8px;
}
#nmActionPanel .bait-select label {
  font-size: 16px;
  gap: 4px;
}

/* no-trip block in nm panel */
#nmActionPanel #no-trip {
  text-align: center;
  color: #aaa;
  font-size: 16px;
  padding: 8px;
}
#nmActionPanel #no-trip .trip-button {
  font-size: 24px;
  padding: 16px 32px;
  width: 100%;
  margin-top: 16px;
  box-sizing: border-box;
}
/* ===== END NO MAP ACTION PANEL ===== */

#oldTripMapPreview {
  width: 100%;
  height: 99.9%;
  flex: 1;
  display: block;
  background: var(--map-water);
  cursor: grab;
}
#mapOverlayGPS {
  --map-controls-scale: 1;
  position: absolute;

  top: calc(8px * var(--map-controls-scale));
  left: calc(8px * var(--map-controls-scale));

  background: rgba(0, 0, 0, 0.377);
  color: #fff;

  padding: calc(6px * var(--map-controls-scale))
           calc(10px * var(--map-controls-scale));

  border-radius: calc(6px * var(--map-controls-scale));

  font-size: calc(16px * var(--map-controls-scale));
  /* line-height: calc(1.3 * var(--map-controls-scale)); */
  line-height: calc(1.3 + (0.3 * (1 - var(--map-controls-scale))));

  pointer-events: none;
}
#mapCenterCoords{
  --map-controls-scale: 1;
  position: absolute;
  bottom: calc(8px * var(--map-controls-scale));
  left: calc(8px * var(--map-controls-scale));
  padding: calc(6px * var(--map-controls-scale))
           calc(10px * var(--map-controls-scale));
  background: rgba(0,0,0,0.377);
  color: white;
  font-size: calc(16px * var(--map-controls-scale));
  border-radius: calc(6px * var(--map-controls-scale));
  pointer-events: none;
  display: none;
}
#mapOverlayList {
  position: absolute;
  top: 10px;
  right: 80px;
  max-width: 250px;
  background: rgba(0,0,0,0.377);
  color: white;
  font-size: 13px;
  border-radius: 8px;
  padding: 6px;
  overflow-y: auto;
  max-height: 40%;
}
#mapOverlayCONTOLS {
  --map-controls-scale: 1;
}
#mapOverlayCONTOLS.vertical {
  position: absolute;
  display: flex;
  flex-direction: column;  
  align-items: center;
  background: rgba(0, 0, 0, 0.377);
  backdrop-filter: blur(5px);

  

  top: calc(10px * var(--map-controls-scale));
  right: calc(10px * var(--map-controls-scale));
  gap: calc(6px * var(--map-controls-scale));
  border-radius: calc(8px * var(--map-controls-scale));
  padding: calc(10px * var(--map-controls-scale));
}


.map-btn {
  background: #ffcc00;
  border: none;
  cursor: pointer;

  width: calc(40px * var(--map-controls-scale));
  height: calc(40px * var(--map-controls-scale));
  font-size: calc(1.2em * var(--map-controls-scale));
  border-radius: calc(6px * var(--map-controls-scale));
}
.map-btn.active {
  background: #af4c4c; 
  color: white;
  border: 2px solid #7d2e2e;
}
.map-status{
  color: #fff;
  font-weight: bold;
  opacity: 0.8;
  margin-top: calc(4px * var(--map-controls-scale));
  font-size: calc(0.9rem * var(--map-controls-scale));
}

.map-status.off{
  color: #f44;
  opacity: 1;
}

/* ===== TRIP LIST ===== */
.trip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 10px;
  margin: 4px 0;
  cursor: pointer;
  color: var(--text-primary);
}

.trip-row.active {
  background: #0044cc;
}

.trip-row.open {
  background: #006600;
}
.trip-left {
  font-size: 22px;
  font-weight: bold;
  /* width: 30px; */
  text-align: right;
  margin-right: 8px;
}
.trip-right {
  flex: 1;
  text-align: left;
  line-height: 1.2;
  font-size: 12px;
}
.trip-weight {
  opacity: 0.7;
  font-size: 11px;
}
.trip-button {
  flex: 1;               /* equal share */
  max-width: 140px;      /* cap per button */
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;

    white-space: normal;      /* ✅ allow wrapping */
  text-align: center;
  line-height: 1.2;
}

#fillAllTagBtn {
  max-width: 220px;
}

.field-tip {
  display: block;
  margin-top: 4px;
  font-size: 0.75em;
  opacity: 0.65;
  font-style: italic;
  line-height: 1.3;
}



#startTripBtn1:disabled,
#endTripBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.tripButtons {
  display: flex;       /* buttons side by side */
  gap: 6px;
  margin-bottom: 8px;  /* space below buttons */
}

.tripButtons button {
  flex: 1;             /* equal width */
  max-width: 140px;    /* cap so they don’t stretch too far */
}




/* ===== LOGS TAB ===== */
.log-tabs {
  display: flex;
  margin-bottom: 6px;
}
.log-tab {
  flex: 1;
  padding: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 6px 6px 0 0;
}
.log-tab.active {
  background: #ffb800;
  color: #000;
}
.log-section {
  display: none;
  background: var(--bg-panel);
  border-radius: 0 6px 6px 6px;
  padding: 8px;
}
.log-section.active {
  display: block;
}
.log-header {
  font-size: 1em;
  color: var(--text-primary);
  background: var(--bg-elevated);
  padding: 6px 14px;
  border-radius: 8px;
  display: inline-block;
  min-width: 80px;
  /* text-align: center; */
  margin-bottom: 4px; /* ✅ adds space below */
}
.log-buttons button {
  margin-left: 4px;
  background: var(--bg-control);
  color: var(--text-primary);
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.log-buttons button:hover {
  background: #666;
}
.log-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-primary);
}
.log-table th, .log-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 6px;
  text-align: center;
}
.log-table th {
  background: var(--bg-elevated);
}

.sortable-col {
  cursor: pointer;
  user-select: none;
}
.sortable-col:hover {
  background: #444;
}
.gear-sort-active {
  background: var(--bg-control);
}
.gear-top td {
  background: rgba(0, 200, 100, 0.12);
}
.gear-bottom td {
  background: rgba(200, 60, 60, 0.12);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6000; /* above sticky headers */
  overflow-y: auto;              /* ✅ scroll if content taller than screen */
  -webkit-overflow-scrolling: touch; /* ✅ smooth mobile scroll */
}

.overlay-content {
  color: var(--text-primary);
  background: var(--bg-body);
  padding: 1em 2em;
  border-radius: 8px;
  margin: 2em auto;      /* ✅ add breathing room when scrolling */
  max-height: 90vh;     /* reverted back too this to make the full trip log show better? may 7th 2026*/
   /* max-height: calc(80dvh / var(--app-scale, 1)); */
  overflow-y: auto;      /* ✅ scroll inner content if still too tall */
  box-sizing: border-box;
}

.fuel-overlay-content {
  width: min(420px, 96vw);
}
.fuel-overlay-content .crewlist-block {
  flex-wrap: wrap;
}
.fuel-overlay-content .crew-info {
  min-width: 0;
  flex: 1 1 auto;
}
.fuel-overlay-content .crew-info small {
  display: block;
  overflow-wrap: anywhere;
}

.overlay-content label { display: block; margin-top: 0.5em; }
.overlay-content input[type="text"],
.overlay-content input[type="number"],
.overlay-content textarea {
  width: 100%;
  box-sizing: border-box; /* avoids overflow from padding */
  /* margin-bottom: 10px; */
}

.history-overlay {
  align-items: stretch;
  justify-content: stretch;
}

/* ---- Season Report ---- */
.sr-overlay-content {
  width: min(680px, 96vw);
  padding: 1.2em 1.4em;
  background: var(--bg-panel);
}

.sr-section {
  margin-bottom: 24px;
}

.sr-section-title {
  font-size: 1.05em;
  font-weight: 700;
  color: #aed6f1;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.sr-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-stat {
  background: var(--bg-elevated);
  border-radius: 6px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
  flex: 1 1 100px;
}

.sr-val {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--text-primary);
}

.sr-lbl {
  font-size: 0.78em;
  color: var(--text-disabled);
  margin-top: 2px;
  text-align: center;
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.sr-table th,
.sr-table td {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.sr-table thead th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 600;
}

.sr-table tbody tr:nth-child(even) {
  background: var(--bg-elevated);
}

.sr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82em;
  color: var(--text-secondary);
}

.sr-legend-item::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 3px;
  background: var(--c, #888);
  border-radius: 2px;
}

/* ---- End Season Report ---- */

.history-overlay .overlay-content {
  margin: 30px;
  width: calc(100% - 60px);
  max-height: calc(100% - 60px);
}

.buttons { 
  margin-top: 1em; 
  display: flex; 
  gap: .5em; justify-content: end; 
  }
.edit-bunch-btn,
.close-btn {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #888;
    background: #f0f0f0;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.demomenubutton {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #888;
    background: #f0f0f0;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
}

.settingsbutton {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #888;
    background: #f0f0f0;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin: 3px;
}

#beacon-auto-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
}

/* Active: quiet, low-contrast - not meant to draw the eye */
#beacon-auto-status:not(.paused) {
	background: var(--bg-panel);
	color: var(--text-secondary);
	opacity: 0.7;
}

/* Paused: meant to draw the eye */
#beacon-auto-status.paused {
	background: #cc0000;
	color: #fff;
	animation: beaconPausedBlink 1s ease-in-out infinite;
}

@keyframes beaconPausedBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}


.button { 
  margin-top: 1em; 
  display: flex; 
  gap: .5em; justify-content: end;
      
   }



.two-panel {
	display: flex;
	gap: 60px;
	/* width: 100%;
	height: 100%; */
}

.panel {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.left {
	/* catch + numpad takes more space if needed */
	flex: 1.2;
}

.right {
	justify-content: space-between;
}


.flash_bunch_no {
	animation: flashAnim 0.5s ease;
}

@keyframes flashAnim {
	0%   {transform: scale(3); }
	50%  {transform: scale(1.2);  }
	100% {transform: scale(1); }
}

/* ---- Beacon Log Card ---- */

#log-beacon {
  margin-top: 12px;
  padding: 10px;

  background: var(--bg-card-alt);      /* dark card */
  border-radius: 8px;       /* rounded */
}

/* Table base */

#log-beacon .log-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;    /* 2px–4px row gap */
  font-size: 15px;
  color: var(--text-primary);
}

/* Header */

#log-beacon th {
  padding: 6px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
}

/* Rows */

#log-beacon tbody tr {
  background: var(--bg-elevated);
  border-radius: 6px;
  color: #fff;
}

#log-beacon tbody tr td {
  padding: 8px 6px;
  text-align: center;
  border: none;
}

/* Rounded rows (important trick) */

#log-beacon tbody tr td:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

#log-beacon tbody tr td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}


/* Signal strength color is now a continuous gradient set inline via
   rssiToColor() in app_v2.js, so it can transition smoothly instead of
   jumping between 3 fixed bands - see refreshBeaconLog/renderBeaconPickerRow. */

#log-beacon tr.ble-old,
.beacon-picker-row.ble-old {
  opacity: 0.45;
}

/* BLE section sticky headers */

.ble-section-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card-alt);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 4px 6px;
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--border-color);
}

.live-scan-header-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.live-scan-header-btn.active {
  opacity: 0.6;
}

/* Live Scan controls: minor-ID range filter, sort mode, freeze toggle */

.live-scan-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 4px 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.live-scan-count {
  font-weight: 600;
  white-space: nowrap;
}

.live-scan-minor-filter,
.live-scan-sort {
  display: flex;
  align-items: center;
  gap: 5px;
}

.live-scan-minor-filter input[type="number"] {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card-alt);
  color: var(--text-primary);
  font-size: 13px;
}

.live-scan-sort select {
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card-alt);
  color: var(--text-primary);
  font-size: 13px;
}

.live-scan-toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.live-scan-toggle-btn {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card-alt);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.live-scan-toggle-btn.active {
  border-color: var(--accent-color, #3a9);
  background: var(--accent-color, #3a9);
  color: #fff;
}

/* Gateway network IP picker (Windows/Electron only) */

#ble-gateway-ip-list {
  padding: 4px 4px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ble-gateway-ip-hint {
  font-size: 12px;
  opacity: 0.65;
  padding: 0 2px 2px;
}

.ble-gateway-ip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card-alt);
  cursor: pointer;
}

.ble-gateway-ip-row.selected {
  border-color: var(--accent-color, #3a9);
  background: var(--bg-card);
}

.ble-gateway-ip-addr {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
}

.ble-gateway-ip-iface {
  font-size: 12px;
  opacity: 0.6;
}

.ble-gateway-ip-check {
  font-size: 13px;
  color: var(--accent-color, #3a9);
}

/* Registered beacon cards */

#registeredBeaconBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.beacon-reg-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  background: var(--bg-elevated);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  color: var(--text-primary);
}

.beacon-reg-card > div {
  padding: 6px 10px;
  display: flex;
  align-items: center;
}

.brc-mac {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brc-bunch {
  margin-left: 6px;
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 12px;
}

.brc-loc {
  color: var(--text-secondary);
  font-size: 12px;
  justify-content: flex-end;
  white-space: nowrap;
}

.brc-edit {
  justify-content: flex-end;
}

.brc-edit button {
  font-size: 13px;
  padding: 4px 10px;
}

.brc-icon {
  font-size: 14px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}

.brc-bat {
  font-size: 12px;
  color: var(--text-disabled);
  margin-left: 2px;
}

.brc-time {
  color: var(--text-disabled);
  font-size: 12px;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
}

.brc-del {
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
}

.brc-del button {
  background: transparent;
  border: none;
  color: #c44;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.brc-del button:active {
  background: #3a1a1a;
}

.beacon-reg-card.counter-card {
  grid-template-rows: auto auto auto;
}

.brc-count-row {
  grid-column: 1 / -1;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px 6px;
}

.brc-count-box {
  flex: 1;
  max-width: 44px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.brc-count-total {
  background: #2d7cff;
  border-color: #2d7cff;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* Assign button */

#log-beacon button {
  padding: 6px 12px;
  font-size: 14px;

  border-radius: 6px;
  border: none;

  background: var(--bg-control);
  color: var(--text-primary);

  cursor: pointer;
}

#log-beacon button:active {
  background: #666;
}

/* ===== TIDES TAB ===== */
.tide-graph-wrap {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 6px 4px 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.tide-svg {
  width: 100%;
  height: auto;
  display: block;
}
.tides-locked-teaser {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-primary);
}
.tides-teaser-icons {
  font-size: 2em;
  margin-bottom: 10px;
  opacity: 0.7;
}
.tides-teaser-title {
  font-size: 1.15em;
  font-weight: bold;
  margin-bottom: 8px;
}
.tides-teaser-desc {
  font-size: 0.85em;
  opacity: 0.6;
  margin-bottom: 14px;
  line-height: 1.5;
}
.tides-teaser-badge {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid #ffb800;
  color: #ffb800;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: bold;
}
.tides-source {
  font-size: 0.75em;
  opacity: 0.5;
  padding: 0 2px 2px;
}
.tides-source a {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.tides-status {
  font-size: 0.8em;
  opacity: 0.55;
  padding: 2px 2px 6px;
  min-height: 1.2em;
}
.tides-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.tides-header-bar .log-header {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tides-lock-btn {
  padding: 3px 8px;
  background: var(--bg-control);
  color: var(--text-primary);
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78em;
  white-space: nowrap;
}
#tides-lock-area {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0 2px;
}
.tides-fav-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--bg-control);
  border: 1px solid #555;
  border-radius: 14px;
  font-size: 0.78em;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-primary);
  user-select: none;
}
.tides-fav-pill.active {
  border-color: #ffb800;
  background: rgba(255, 184, 0, 0.12);
  color: #ffb800;
}
.tides-fav-remove {
  opacity: 0.45;
  font-size: 0.82em;
  line-height: 1;
  cursor: pointer;
}
.tides-fav-remove:hover { opacity: 1; }
.tides-lock-btn.tides-locked {
  background: rgba(255,184,0,0.12);
  border-color: #ffb800;
  color: #ffb800;
}
.tides-refresh-btn {
  padding: 4px 10px;
  background: var(--bg-control);
  color: var(--text-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78em;
  white-space: nowrap;
}
.tide-day-card {
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.tide-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.tide-moon-label {
  font-size: 0.85em;
  opacity: 0.75;
}
.tide-moon-illum {
  opacity: 0.55;
  font-size: 0.9em;
}
.tide-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 3px;
  font-size: 0.9em;
}
.tide-high {
  background: rgba(100, 160, 255, 0.12);
  color: #7bb8ff;
}
.tide-low {
  background: rgba(120, 120, 120, 0.1);
  color: var(--text-primary);
  opacity: 0.65;
}
.tide-height {
  font-weight: bold;
  min-width: 38px;
  text-align: right;
}
.tide-event-none {
  font-size: 0.8em;
  opacity: 0.4;
  padding: 4px 8px;
}
.tide-past-card {
  opacity: 0.75;
  border-left: 2px solid rgba(255,255,255,0.1);
}
.tide-past {
  opacity: 0.8;
}

/* ===== TRIP MOON MINI-GRAPH ===== */
.trip-moon-graph-wrap {
  margin: 6px 0 10px;
}
.trip-moon-caption {
  font-size: 0.78em;
  opacity: 0.6;
  padding: 0 2px 4px;
  color: var(--text-primary);
}
.trip-moon-locked {
  font-size: 0.85em;
  opacity: 0.7;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}









.table-dark {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-page);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1em;
}

.table-dark thead tr {
  background: var(--bg-elevated);
}

.table-dark th,
.table-dark td {
  padding: 6px 10px;
  text-align: left;
}

.table-dark tr + tr {
  border-top: 1px solid var(--border-color);
}

.table-dark th {
  font-weight: 600;
  color: var(--text-primary);
}

.table-dark td {
  color: var(--text-secondary);
}


#progress {
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 4px;
  text-align:center;
  align-self: center;
}

#bunch_avg {
    font-size: 14px;
    text-align:center;
    margin-left: 4px;
    margin-right: auto;
    align-self: center;
    cursor: pointer;
}

.stat-label{
	font-size: 0.7em;
	opacity: 0.8;
	font-weight: normal;
  margin-top: -4px;
}
#prevAvgBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  flex-shrink: 0;
  align-self: stretch;
  margin: 3px 3px 3px 0;
  border-radius: 6px;
  background: var(--bg-card-alt);
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
  font-size: 12px;
  text-align: center;
}
#prevAvgBlock .prev-number {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.1;
}
#prevAvgBlock .prev-label {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 1px;
}
.progress-row {
  display: flex;
  align-items: stretch;
  background: var(--bg-body);
  color: var(--text-primary);
  padding: 2px;
  position: relative;
}

#undoBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 14px 2px 14px;
  flex-shrink: 0;
  align-self: stretch;
  margin: 3px 3px 3px 6px;
  border-radius: 6px;
  background: var(--bg-card-alt);
  color: var(--text-disabled);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
#undoBlock .undo-label {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.04em;
}
#undoBlock .undo-desc {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 1px;
}
#undoBlock.active {
  background: #ff0000;
  color: #fff;
  cursor: pointer;
}
#undoBlock.active:hover {
  background: #aa0101;
}

#tripWatermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  font-weight: bold;
  color: rgba(0, 26, 255, 0.425);
  pointer-events: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 8px;
}


.quickbunch-toggle {
  padding: 6px;
  font-size: 0.8em;
  line-height: 1.2;
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  width: 65px;
}

.quickbunch-toggle:hover {
  background: #555;
}

.crew-info {
  flex: 1;
}
.crew-actions button {
  margin-left: 6px;
}
.default-tag {
  color: rgb(0, 0, 0);
  font-weight: bold;
  margin-left: 8px;
}
.crewlist-field label {
  display: flex;
  align-items: center;
  gap: 6px;   /* space between checkbox and text */
  font-weight: normal; /* optional if it looked bold */
}

.crewlist-field input[type="checkbox"] {
  margin: 0;  /* removes weird default spacing */
  width: 10px;
}

.numpad-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.numpad-row button {
  flex: 1;
  padding: 12px;
  font-size: 18px;
}


.demo-overlay {
  border-radius: 6px;
  background: rgba(255, 255, 0, 0.8);   /* much stronger fill */
  box-shadow: 0 0 40px 20px rgba(255, 255, 0, 0.9); 
  animation: demoPulse 0.7s ease-in-out;
}

@keyframes demoPulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.95; }
  100% { transform: scale(1.05); opacity: 0; }
}

.catch-row-example {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}

.catch-cell {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
}

/* Solid color states */
.catch-cell.red    { background: #c00; }
.catch-cell.orange { background: #e67e00; }
.catch-cell.yellow { background: #e6d700; color: #000; }
.catch-cell.green  { background: #0a0; }

.catch-expl {
  font-size: 0.9rem;
  margin-top: 4px;
  color: var(--text-primary);
}

.catch-expl .red   { color: #c00; font-weight: bold; }
.catch-expl .green { color: #0a0; font-weight: bold; }

.greenbg { background: rgb(0, 187, 0); }
.orangebg { background: rgb(214, 104, 0); }
.redbg { background: rgb(214, 0, 0); }
.bluebg { background: rgb(0, 119, 204); }


.overlay-content small {
  color: var(--text-primary);
  display: block;
  font-size: 0.8em;
  opacity: 0.8;
  margin-top: 2px;
}

.trip-notes {
  white-space: pre-wrap;  /* respects \n as line breaks */
}

.trip-action-btn span {
  margin-left: 6px;
}

.trip-action-btn {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 4px 4px 0 0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.trip-action-btn:hover {
  background: #333;
}
.trip-action-btn.active {
  background: #0077cc;
  border-color: #005fa3;
  color: #fff;
}


#tripDetails {
  background: var(--bg-panel);    /* dark card */
  color: var(--text-primary);
  padding: 15px;
  border-radius: 8px;
  font-family: sans-serif;
}

#tripDetails h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #4da3ff;  /* accent */
}

.trip-field {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color);
}

.trip-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.trip-value,
.trip-notes {
  font-size: 14px;
  color: var(--text-primary);
}

.trip-notes {
  font-style: italic;
  opacity: 0.85;
}
.col.tripDetails {
  display: none;  /* hidden by default */
  
}
.tripDetails.active {
	display: block;
}
/* ===== SETTINGS ===== */
#settingsContent {
  background: var(--bg-panel);
  color: var(--text-primary);
  padding: 16px;
  border-radius: 8px;
  font-family: "Segoe UI", Roboto, sans-serif;
}

/* Each row */
.setting-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-row.locked .setting-row-main {
  opacity: 0.55;
}

html.light-theme .setting-row.locked .setting-row-main {
  opacity: 0.75;
}

.tier-group {
  position: relative;
}

.tier-group--locked .tier-badge-vertical,
.tier-group--locked .tier-rows {
  opacity: 0.35;
}

html.light-theme .tier-group--locked .tier-badge-vertical,
html.light-theme .tier-group--locked .tier-rows {
  opacity: 0.6;
}

.tier-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding-right: 10px;
  pointer-events: inherit;
}

.tier-try-btn,
.tier-info-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.tier-try-btn {
  background: #4a9eff;
  color: #fff;
}

.tier-info-btn {
  background: var(--bg-control);
  color: var(--text-primary);
}

.setting-label-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.setting-tier-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

/* Vertical tier group layout */
.tier-group {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tier-group .setting-row:last-child {
  border-bottom: none;
}

.tier-badge-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 4px;
  min-width: 22px;
  flex-shrink: 0;
  border-radius: 12px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.tier-badge-status {
  opacity: 0.9;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.tier-rows {
  flex: 1;
  min-width: 0;
}

.setting-info-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.setting-info-btn:hover {
  color: var(--text-primary);
}

.setting-description {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 5px 0 2px;
  line-height: 1.5;
}

.setting-upgrade-prompt {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: bold;
  color: #c89b3c;
}

/* Labels */
.setting-row label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Inputs */
.setting-row input,
.setting-row select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  min-width: 80px;
}

.setting-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Zoom buttons row */
.setting-row button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
}

.setting-row button:hover {
  background: #444;
}

/* Crew list block */
.crewlist-block {
  background: var(--bg-elevated);
  padding: 8px;
  margin: 6px 0;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crew-info strong {
  font-size: 14px;
  color: var(--text-primary);
}

.crew-info small {
  font-size: 12px;
  color: var(--text-secondary);
}

.default-tag {
  margin-left: 6px;
  font-size: 11px;
  color: gold;
}

.crew-actions button {
  margin-left: 4px;
  background: var(--bg-control);
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-primary);
}

.crew-actions button:hover {
  background: #555;
}

/* Add crew button */
.crewlist-list > button {
  margin-top: 6px;
  width: 100%;
  background: #0077cc;
  color: #fff;
  border: none;
  padding: 6px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.crewlist-list > button:hover {
  background: #005fa3;
}


#gpsOutput {
  font-size: 13px;
  line-height: 1.5;
}

#gpsOutput .gps-label {
  display: inline-block;
  min-width: 80px;   /* makes them align nicely */
  color: var(--text-secondary);
  font-size: 12px;
}

#gpsOutput .gps-value {
  color: var(--text-primary);
  font-weight: 500;
  font-family: monospace; /* optional for numbers */
}

.crewlist-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}


.baitlist-list { margin-top: 8px; }

.bait-block {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  margin-bottom:6px;
  background: var(--bg-elevated);
  border-radius:6px;
}

.bait-left {
  display:flex;
  align-items:center;
  gap:8px;
}

.bait-actions button {
  margin-left: 4px;
  background: var(--bg-control);
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-primary);
}

.bait-actions button:hover {
  background: #555;
}


.baitlist-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;

}

/* Add bait button */
.baitlist-list > button {
  margin-top: 6px;
  width: 100%;
  background: #0077cc;
  color: #fff;
  border: none;
  padding: 6px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.baitlist-list > button:hover {
  background: #005fa3;
}




.set-bunch-row {
  display: flex;
  align-items: flex-start;   /* top aligned */
  gap: 12px;                 /* space between button and bait */
}

#setBtn {
  /* flex: 0 0 140px; */
  background: #328801;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 12px;
}
#setBtn:hover { background: #267000; }

.bait-select {
  display: grid;
  grid-template-columns: repeat(2, auto); /* ✅ 2 columns side by side */
  gap: 3px 6px;                          /* row/column spacing */
    background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: 6px;
}
.bait-select label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
}


.tag-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}
.tag-row input[type="text"] {
	flex: 1;
	padding: 4px 6px;
}

/* Manage Traps rows (app_v2.js showManageTrapsOverlay) - override
   .trip-button's flex:1/max-width:140px (sized for large primary actions)
   so "Move to..." gets most of the row's width and History/Move stay small,
   instead of all three fighting for equal flex share. */
.trap-manage-row .trap-manage-value {
	flex: 0 0 auto;
	min-width: 48px;
}
.trap-manage-row .move-trap-select {
	flex: 2 1 auto;
	min-width: 0;
	padding: 4px 6px;
}
.trap-manage-row .move-trap-when {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 6px;
}
.trap-manage-row .move-trap-confirm,
.trap-manage-row .move-trap-history-btn {
	flex: 0 0 auto;
	max-width: none;
	padding: 4px 10px;
	font-size: 0.8rem;
}
#joystick {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  z-index: 999;
}

#joystick-knob {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  touch-action: none;
}

/* --- Demo Menu Panel --- */
.demo-menu {
    padding: 20px;
    background: #1c1f26;
    border-radius: 16px;
    border: 1px solid #2e3440;
    box-shadow: 0 0 25px rgba(0,0,0,0.6);
    width: 320px;
    animation: popIn 0.2s ease-out;
}

/* Big profile/season readout shown when starting a trip, so it's unmistakable
   which season the trip (and every catch logged during it) will be saved under. */
.start-trip-season-banner {
    text-align: center;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 6px 0 14px 0;
}

/* Warning box */
.demo-warning {
    background: #3a0e0e;
    border: 1px solid #ff4d4d;
    color: #ffcccc;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
}

/* Buttons */
.demo-btn {
    width: 100%;
    padding: 14px;
    margin: 8px 0;
    font-size: 16px;
    border-radius: 12px;
    border: none;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, background 0.2s;
}

/* Colors matching your app theme */
.demo-btn.green { background: #2e8b57; }
.demo-btn.blue { background: #266dd3; }
.demo-btn.purple { background: #7a4dd9; }
.demo-btn.orange { background: #e37b29; }
.demo-btn.cancel { background: #555; }

.demo-btn:hover {
    transform: scale(1.03);
}

.demo-btn:active {
    transform: scale(0.97);
}

/* Entrance animation */
@keyframes popIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
#zoomInBtn, #zoomOutBtn {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action: none;   /* important */
}


@media print {
	body * {
		visibility: hidden !important;
	}
	#printContainer, #printContainer * {
		visibility: visible !important;
	}
	#printContainer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
}

button {
    user-select: none;
    -webkit-user-select: none;
}

#grayBlocker {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.822);
    pointer-events: auto;
    z-index: 400;
}




#setConfirmOverlay {
    position: fixed;
    z-index: 10002; /* higher than map */
}


.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.video-overlay.hidden {
  display: none;
}

.video-box {
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.video-box video {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}

.video-box-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  z-index: 100000;
}

.help-video-thumb {
  position: relative;
  width: 400px;
  cursor: pointer;
  margin-top: 15px;
}

.help-video-thumb img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
  background: rgba(0,0,0,0.4);
  border-radius: 10px;
}

.video-label {
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
  opacity: 0.8;
}



.spinner {
  width:40px;
  height:40px;
  border:4px solid #888;
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform:rotate(360deg); }
}








/* =========================
   Trap Categories – Settings
   ========================= */

.trapcat-section {
  margin-top: 16px;
}


.trapcat-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;

}

.trapcat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- category card ---- */
.trapcat-card {
  background: var(--bg-card-alt);
  border-radius: 8px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* header */
.trapcat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.trapcat-header strong {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.trapcat-delete {
  background: none;
  border: none;
  color: #ff6666;
  font-size: 1.1rem;
  cursor: pointer;
}

.trapcat-delete:hover {
  color: #ffaaaa;
}


/* ---- add option input ---- */
.trapcat-add {
  width: 100%;
  padding: 6px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: none;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.trapcat-add::placeholder {
  color: var(--text-disabled);
}

/* ---- add category ---- */
.trapcat-new {
  margin-top: 8px;
  padding: 8px;
  font-size: 0.9rem;
  border-radius: 8px;
  border: none;
  background: #153a5c;
  color: #fff;
}

.trapcat-new::placeholder {
  color: #aac;
}

/* touch feedback */
.trapcat-add:focus,
.trapcat-new:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(100,160,255,0.4);
}
/* ---- add row (input + button) ---- */
.trapcat-add-row {
  display: flex;
  gap: 8px;
}

.trapcat-add-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: #2d7cff;
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
}

/* ---- option list ---- */
.trapcat-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.trapcat-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.trapcat-option-delete {
  background: none;
  border: none;
  color: #ff7777;
  font-size: 1.1rem;
}
/* orphaned labels */
.trapcat-orphan {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #2a1d1d;
	padding: 6px 8px;
	border-radius: 6px;
	margin-top: 4px;
	gap: 8px;
}

.trapcat-orphan-left small {
	display: block;
	color: #ffaaaa;
	font-size: 0.75rem;
}

.trapcat-orphan-left span {
	font-size: 0.85rem;
	color: #fff;
}

.trapcat-orphan-delete {
	background: none;
	border: none;
	color: #ff7777;
	font-size: 1.1rem;
}
/* =========================
   Trap Labels (Edit Bunch)
   ========================= */

.trapcat-label-group {
	margin-bottom: 10px;
	padding: 6px;
	border-radius: 8px;
	background: var(--bg-panel);
}

.trapcat-label-title {
	font-weight: bold;
	font-size: 0.85rem;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.trapcat-check-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	font-size: 0.9rem;
	border-radius: 6px;
	cursor: pointer;
}

.trapcat-check-row input {
	width: 20px;
	height: 20px;
}

.trapcat-check-row:active {
	background: rgba(255,255,255,0.08);
}

/* =========================
   Labels Log – Shared
   ========================= */


/* section blocks */
.label-log-section {
	background: var(--bg-panel);
	border-radius: 10px;
	padding: 10px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* headers */
.label-log-section h3,
#log-labels h2 {
	/* margin: 0 0 8px 0; */
	font-size: 1rem;
	color: var(--text-primary);
}

/* =========================
   Step 1 – Current Labels
   ========================= */

.label-row {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 0.9rem;
}

.label-row:nth-child(even) {
	background: rgba(255,255,255,0.04);
}

.label-row span {
	color: var(--text-primary);
}

.label-row strong {
	color: var(--text-secondary);
	font-weight: bold;
}

/* Unlabeled emphasis */
.label-row span:contains("Unlabeled") {
	color: #ffcc66;
	font-style: italic;
}

/* =========================
   Step 2 – Season Performance
   ========================= */

.label-perf-title {
	font-weight: bold;
	font-size: 0.9rem;
	color: var(--text-primary);
}

.label-perf-table {
background: var(--bg-panel);
padding: 6px 8px;
border-radius: 6px;

}
.label-perf-table:nth-child(even) {
	background: rgba(255,255,255,0.04);
}
/* =========================
   Touch polish
   ========================= */

.label-row {
	touch-action: manipulation;
}

/* =========================
   Label Scope Selector
   ========================= */

.label-scope-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.scope-btn {
	flex: 1;
	padding: 8px;
	border-radius: 8px;
	border: none;
	background: var(--bg-elevated);
	color: var(--text-secondary);
	font-weight: bold;
	font-size: 0.85rem;
}

.scope-btn.active {
	background: #2d7cff;
	color: #fff;
}

.gear-scope-btn {
	flex: 1;
	padding: 8px;
	border-radius: 8px;
	border: none;
	background: var(--bg-elevated);
	color: var(--text-secondary);
	font-weight: bold;
	font-size: 0.85rem;
}

.gear-scope-btn.active {
	background: #2d7cff;
	color: #fff;
}

.area-scope-btn {
	flex: 1;
	padding: 8px;
	border-radius: 8px;
	border: none;
	background: var(--bg-elevated);
	color: var(--text-secondary);
	font-weight: bold;
	font-size: 0.85rem;
}

.area-scope-btn.active {
	background: #2d7cff;
	color: #fff;
}

/* =========================
   Label Performance Table
   ========================= */
.label-table {
	overflow-x: auto;
}

.label-table-row {
	display: grid;
	grid-auto-flow: column; /* 👈 FORCE columns */
	grid-auto-columns: minmax(70px, 1fr);
	font-size: 0.85rem;
	gap: 6px;
}

.label-table-row.header {
	font-weight: bold;
	color: var(--text-primary);
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding-top: 4px;
	padding-bottom: 4px;
}

.metric-name {
	min-width: 120px;
	text-align: left;
	color: var(--text-secondary);
}

.label-table-row div {
	/* text-align: center; */
	white-space: nowrap; /* 👈 no wrapping */
}


.label-perf-table + .label-perf-table {
	margin-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.05);
	padding-top: 8px;
}


/* best avg/haul highlight */
.label-best {
	background: rgba(18, 156, 0, 0.445);
	border-radius: 6px;
	font-weight: bold;
	color: #fff;
}

.label-best::after {
	content: "★";
	margin-left: 4px;
	font-size: 0.75rem;
	color: #ff0000a9;
}


#graph-content {
	margin-top: 14px;
	padding: 10px;
	background: var(--bg-panel);
	border-radius: 10px;
}

#graph-picker {
	margin-top: 10px;
	padding: 10px;
	background: var(--bg-card-alt);
	border-radius: 10px;
	font-size: 0.85rem;
	color: var(--text-secondary);
}

#graph-picker h3 {
	margin-top: 0;
	color: var(--text-primary);
}

.graph-bunch-row {
	display: block;
	margin: 4px 0;
	font-size: 0.8rem;
}
#inactivewarning {
  display: none;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 14px 9px;
  border-radius: 10px;
  background: #3a2200;
  color: #fff;
  border: 2px solid #ff9900;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
}

#inactivewarning button {
  margin-top: 8px;
  padding: 6px 18px;
  background: #ff9900;
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95em;
  cursor: pointer;
  display: block;
  width: 100%;
}

#haulwarning {
  display: none;                 /* show only when needed */
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 14px 9px;
  border-radius: 10px;

  background: #3b0d0d;
  color: #fff;
  border: 2px solid #ff3b3b;

  font-weight: 600;
  text-align: center;
  line-height: 1.4;

  box-shadow: 0 0 0 rgba(255, 59, 59, 0.0);

  animation:
    flash-bg 1.2s infinite,
    pulse-border 1.2s infinite;
}

/* background flash */
@keyframes flash-bg {
  0%   { background-color: #3b0d0d; }
  50%  { background-color: #7a1414; }
  100% { background-color: #3b0d0d; }
}

/* border + glow pulse */
@keyframes pulse-border {
  0% {
    border-color: #ff3b3b;
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 59, 59, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0);
  }
}





.graph-label-category {
	margin-bottom: 10px;
}

.graph-label-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.graph-label-groups {
	display: flex;          /* key line */
	flex-wrap: wrap;        /* wrap like blocks */
	gap: 6px;
	margin-left: 22px;      /* indent under label name */
}

.graph-label-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: #000;
	white-space: nowrap;
}

.chip-count {
	opacity: 0.7;
	font-size: 12px;
}


.graph-bunch-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.graph-bunch-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bunch-chip {
	padding: 4px 10px;
	border-radius: 6px;
	/* background: #ddd; */
  color:#000;
	font-size: 13px;
	min-width: 46px;
	text-align: center;
}

.bunch-picks {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.bunch-pick input {
	display: none;
}
.bunch-pick {

  color:#000;
}
.pick-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 6px;
	background: #eee;
	font-size: 12px;
	min-width: 28px;
}

.bunch-pick input:checked + .pick-chip {
	outline: 5px solid rgba(255, 0, 0, 0.664);
	background: #ddd;
  
}



.test-collapse.collapsed {
  display: none;
}





#keyDebugger {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: rgba(0,0,0,0.6);
	border-radius: 8px;
	backdrop-filter: blur(4px);

	width: 220px;
	min-height: 150px;   /* 👈 keeps box big always */
}

/* key blocks */
.key-row {
	height: 40px;       /* 👈 fixed row height */
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 8px;
	background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
	color: #bbb;
	font-size: 14px;
	font-family: monospace;
	border: 1px solid #333;
}

/* active (latest) */
.key-row.active {
	color: #fff;
	background: linear-gradient(145deg, #00ff88, #00cc66);
	border: 1px solid #00ff88;
	box-shadow: 0 0 10px rgba(0,255,136,0.6);
}

/* empty slots */
.key-row.empty {
	opacity: 0.2;
	font-style: italic;
}





.beacon-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.beacon-row input {
  flex: 1;
  opacity: 0.8;
}

.beacon-remove {
  padding: 2px 8px;
  font-size: 0.8em;
  opacity: 0.6;
}

.beacon-empty {
  opacity: 0.6;
  font-style: italic;
}









.ui-scale-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.ui-scale-content {
  width: 425px;
  /* height: 433px; */
  transform-origin: top left;
  position: absolute;
  left: 0;
  top: 0;
}








#actionHeadsUp{
	position: fixed;
	top: calc(env(safe-area-inset-top) + 10px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(500px, 90%);
	/* pointer-events: none; */
}
#actionHeadsUp.hidden{
	display:none;
}
.heads-up{
	/* position: fixed; */
	/* top: 12px; */
	/* left: 50%; */
	/* transform: translateX(-50%); */
	/* z-index: 9999; */

	width: min(520px, 92%);
	max-height: 260px;

	background: rgba(30,30,30,0.95);
	color: white;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.5);

	display: flex;
	flex-direction: column;
}

.heads-up.hidden{
	display:none;
}

.heads-up-header{
	display:flex;
	justify-content: space-between;
	align-items:center;

	padding:10px 14px;
	border-bottom:1px solid rgba(255,255,255,0.2);
	font-size:18px;
	font-weight:600;
}

#headsUpList{
	overflow-y:auto;
	max-height:200px;
	padding:6px;
}

.heads-up-row{
	display:flex;
	justify-content:space-between;
	align-items:center;

	padding:8px 10px;
	margin-bottom:6px;
	border-radius:6px;

	background:rgba(60,60,60,0.8);
}

.heads-up-row button{
	background:#ff5555;
	border:none;
	color:white;
	padding:4px 10px;
	border-radius:4px;
	cursor:pointer;
}

/* ===== DEPTH MAP PANEL ===== */

#depthMapToggleBtn {
  position: absolute;
  bottom: 130px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#depthMapToggleBtn.active {
  background: rgba(45, 111, 191, 0.8);
}

#depthMapPanel {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 260px;
  max-height: 65%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  z-index: 601;
  color: #fff;
  overflow: hidden;
}

#depthMapPanelInner {
  overflow-y: auto;
  flex: 1;
}

.depth-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}

.depth-mode-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s;
  line-height: 1.4;
}
.depth-mode-btn.active {
  opacity: 1;
}

.depth-panel-section {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* ===== MAP EDITOR ===== */

/* Tool selector strip - horizontal pill at top-center */
#editorToggleBtn {
  position: absolute;
  bottom: 80px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
#editorToggleBtn.active {
  background: rgba(68, 136, 255, 0.75);
}

#mapEditorToolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 30px;
  padding: 7px 12px;
  z-index: 600;
  white-space: nowrap;
}

.editor-tool-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.editor-tool-btn:hover  { background: rgba(255, 255, 255, 0.22); }
.editor-tool-btn.active { background: #ffcc00; color: #000; }

.editor-tool-util { font-size: 16px; }

/* Vertical separator between groups in toolbar */
.editor-h-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

/* Color swatches in toolbar */
.editor-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.1s;
}

.editor-color-swatch:hover   { transform: scale(1.15); }
.editor-color-swatch.active  {
  border: 2.5px solid #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

/* Action bar - big context buttons at bottom-center */
#editorActionBar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  z-index: 600;
  white-space: nowrap;
}

.editor-action-btn {
  border: none;
  border-radius: 24px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.1s;
}

.editor-action-btn:active { transform: scale(0.96); }

.eab-primary   { background: #ffcc00; color: #000; }
.eab-primary:hover { background: #ffe033; }

.eab-secondary { background: rgba(255,255,255,0.18); color: #fff; }
.eab-secondary:hover { background: rgba(255,255,255,0.28); }

.eab-finish    { background: #44cc44; color: #fff; }
.eab-finish:hover { background: #55dd55; }

.eab-danger    { background: rgba(220, 60, 60, 0.85); color: #fff; }
.eab-danger:hover { background: rgba(220, 60, 60, 1); }

.eab-edit  { background: rgba(255,255,255,0.15); color: #fff; }
.eab-edit:hover { background: rgba(255,255,255,0.25); }

.eab-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  background: rgba(0,0,0,0.4);
  padding: 8px 16px;
  border-radius: 20px;
}

/* Edit appearance popup - slides up from bottom of map */
#editorEditPopup {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 18, 28, 0.94);
  backdrop-filter: blur(14px);
  border-radius: 14px 14px 0 0;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  z-index: 700;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.edit-popup-header { display: none; }

#editorEditName {
  flex: 1;
  min-width: 120px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  padding: 8px 11px;
  box-sizing: border-box;
  outline: none;
}

#editorEditName:focus {
  border-color: rgba(255, 204, 0, 0.7);
  background: rgba(255,255,255,0.13);
}

.edit-popup-colors {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.edit-popup-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.12s, transform 0.1s;
}

.edit-popup-swatch:hover  { transform: scale(1.12); }
.edit-popup-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transform: scale(1.15);
}

.edit-popup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Import / Share picker modal */
#editorPickerModal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(18, 18, 28, 0.96);
  backdrop-filter: blur(14px);
  border-radius: 16px 16px 0 0;
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  z-index: 710;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 65%;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.picker-header button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}

#editorPickerList {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  -webkit-user-select: none;
  user-select: none;
}

.picker-row:hover { background: rgba(255,255,255,0.07); }

.picker-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #4488ff;
  cursor: pointer;
}

.picker-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.picker-sel-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
}

/* Feature list panel - floats on the right */
#editorFeatureListPanel {
  position: absolute;
  top: 60px;
  right: 70px;
  width: 200px;
  max-height: 55%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  z-index: 601;
  color: #fff;
}

.feat-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 6px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.feat-panel-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.editor-feature-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  user-select: none;
}

.editor-feature-row:hover   { background: rgba(255,255,255,0.07); }
.editor-feature-row.selected { background: rgba(255,255,255,0.14); }

.feat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.feat-name {
  flex: 1;
  font-size: 13px;
  outline: none;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feat-name:focus {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 1px 4px;
}

.feat-hide-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  cursor: pointer;
  padding: 1px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}

.feat-hide-btn:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

.feat-del-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.feat-del-btn:hover { color: #ff6666; }

.editor-feature-row.feat-hidden { opacity: 0.4; }

.editor-feat-empty {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  padding: 12px;
  text-align: center;
}

/* ── Temperature beacon history cards ── */

.beacon-history-card {
  background: var(--bg-card-alt);
  border-radius: 8px;
  padding: 10px 12px 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.beacon-history-card:active { background: #2a3040; }
.beacon-history-card.bhc-active { background: #1a2a3a; border: 1px solid rgba(79,195,247,0.35); }

.bhc-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.bhc-label {
  font-size: 13px;
  opacity: 0.65;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bhc-temp {
  font-size: 22px;
  font-weight: 700;
  color: #4fc3f7;
  line-height: 1;
}

.bhc-bat {
  font-size: 11px;
  opacity: 0.45;
}

.bhc-map-btn {
  font-size: 16px;
  margin-left: 6px;
  opacity: 0.6;
  cursor: pointer;
}

.bhc-map-btn:active { opacity: 1; }

.beacon-sparkline {
  width: 100%;
  display: block;
}

.bhc-range {
  font-size: 10px;
  opacity: 0.4;
  margin-top: 2px;
}

.bhc-rebuild-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 2px;
}

.bhc-rebuild-btn:active { color: rgba(255,255,255,0.7); }

.bhc-table-wrap {
  max-height: 240px;
  overflow-y: auto;
  margin-top: 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.15);
}

.bhc-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.bhc-history-table th {
  position: sticky;
  top: 0;
  background: var(--bg-card-alt);
  text-align: left;
  opacity: 0.5;
  font-weight: 500;
  padding: 4px 6px;
}

.bhc-history-table td {
  padding: 4px 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.bhc-history-empty {
  opacity: 0.5;
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

.bhc-delete-btn {
  background: #c0392b;
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
}

.temp-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.4;
  padding: 10px 0 4px;
}

/* ===== DEPTH COLOUR PANEL ===== */
.depth-color-panel {
  position: fixed;
  z-index: 9999;
  background: rgba(20,20,30,0.92);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 0 0 14px;
  width: 340px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  color: #fff;
  font-size: 13px;
  user-select: none;
}
.dcp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dcp-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.dcp-section-label {
  padding: 10px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  display: flex;
  justify-content: space-between;
}
.dcp-section-label span {
  color: #fff;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.dcp-invert-btn {
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dcp-invert-btn.active {
  background: #4fc3f7;
  border-color: #4fc3f7;
  color: #06232c;
}
.dcp-palettes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 14px 0;
}
.dcp-pal-btn {
  border: 2px solid transparent;
  border-radius: 8px;
  height: 30px;
  cursor: pointer;
  color: rgba(0,0,0,0.6);
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
  transition: border-color 0.15s;
}
.dcp-pal-btn.active {
  border-color: #fff;
}
.dcp-slider {
  width: calc(100% - 28px);
  margin: 2px 14px 0;
  accent-color: #4fc3f7;
  display: block;
}
.dcp-dual-range {
  position: relative;
  padding: 10px 14px 4px;
  height: 36px;
  box-sizing: border-box;
}
.dcp-range-track {
  position: absolute;
  left: 23px;
  right: 23px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}
.dcp-range-fill {
  position: absolute;
  height: 100%;
  background: #4fc3f7;
  border-radius: 2px;
}
.dcp-range {
  position: absolute;
  left: 14px;
  right: 14px;
  width: calc(100% - 28px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  height: 18px;
  background: transparent;
  appearance: none;
  pointer-events: none;
}
.dcp-range::-webkit-slider-thumb {
  appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4fc3f7;
  border: 2px solid rgba(255,255,255,0.85);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.dcp-range::-moz-range-thumb {
  pointer-events: all;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4fc3f7;
  border: 2px solid rgba(255,255,255,0.85);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.dcp-finetune {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 14px 0;
}
.dcp-finetune-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dcp-finetune-label {
  width: 30px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.dcp-finetune-val {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.dcp-step-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.dcp-step-btn:active {
  background: #4fc3f7;
}
.dcp-credit {
  padding: 10px 14px 0;
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
}
.dcp-credit a {
  color: rgba(255,255,255,0.55);
}

.depth-disclaimer-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 10000;
  background: rgba(20,20,30,0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 16px;
  width: min(320px, calc(100vw - 32px));
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}
.depth-disclaimer-toast strong {
  color: #ffb300;
}
.depth-disclaimer-toast button {
  margin-top: 10px;
  width: 100%;
  background: #4fc3f7;
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-weight: 700;
  color: #00263d;
  cursor: pointer;
}

.demo-btn.teal { background: #00897b; }
.demo-btn.brown { background: #6b4a2f; }