<style>
    /* 
      Machined dark navy + coral accent.
      Tweak these to match your palette.
    */
    body {
      margin: 0;
      padding: 0;
      background-color: #131a2c; /* deep navy */
      color: #f0f0f0;
      font-family: "Segoe UI", Tahoma, sans-serif;
    }
    .container {
      max-width: 900px;
      margin: 40px auto;
      padding: 20px 30px;
      background: #1b2240; /* slightly lighter navy */
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0,0,0,0.5);
    }
    /*h2 {
      text-align: center;
      margin-top: 0;
      color: var(--fplr-red); 
      letter-spacing: 1px;
      text-transform: uppercase;
    }*/

    /* Custom Tab Nav (no jQuery UI) */
    #tabs-nav {
      list-style: none;
      padding: 0;
      margin: 0px 0px 1px 0px;
      display: flex;
      border-bottom: 2px solid var(--fplr-red);
	  justify-content: center;
    }
    #tabs-nav li {
      background: #2c3350; 
      margin: 0 2px;
      border-radius: 4px 4px 0 0;
      border: 2px solid #2c3350;
      border-bottom: none;
    }
	#tabs-nav li:hover {
		background: var(--fplr-lightblue) !important;
	}
    #tabs-nav li a {
      color: var(--text-med);
      padding: 8px 16px;
      display: block;
      text-decoration: none;
      font-weight: 600;
      text-transform: uppercase;
    }
    #tabs-nav li.active {
      background: var(--fplr-red);
      border-color: var(--fplr-red);
    }
    #tabs-nav li.active a {
      color: var(--text-med);
    }

    /* Tab panels */
    .tab-panel {
      display: none; /* hidden until active */
      background-color: var(--fplr-background2);
      border: 1px solid var(--under-line);;
      border-radius: 0 0 5px 5px;
      padding: 0px;
      margin-top: -1px;
    }
    .tab-panel.active {
      display: block; /* show when active */
    }

    /* Table-like layout for settings */
    .settings-table {
      display: table;
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
    }
    .setting-row {
      display: table-row;
      background: var(--modal-darkblue2);
      border-bottom: 1px solid var(--under-line); /* thicker border */
      transition: background 0.2s;
    }
    .setting-row:hover {
      background: #2c3350;
    }
    .setting-label,
    .setting-control {
		display: inline-grid;
		padding: 4px 12px;
		vertical-align: middle;
    }
	.setting-control input {
		font-size: 13px !important;
		padding: 6px 2px;
	}
    .setting-label {
      width: 30%;
      text-transform: uppercase;
      font-weight: bold;
      /*font-size: 0.9rem;*/
	  font-size: 13px;
      color: var(--text-med); /* strong contrast */
    }
    .setting-control {
      width: 70%;
      text-align: right;
	  justify-content: end;
    }

    /* Range slider with thicker bar, descriptor centered above */
    .range-container {
      display: inline-flex!important;
      flex-direction: column!important;
      align-items: center!important;
      width: 200px!important; /* match arrow input width */
    }
    .range-value-display {
		margin-bottom: 2px!important;
		font-size: 13px!important;
		font-weight: bold!important;
		color: var(--text-med)!important; 
		text-align: center!important;
		width: 100%!important;
    }
    .slider2 {
      -webkit-appearance: none!important;
      width: 200px!important; 
      height: 10px!important;
      background: #444!important; 
      border-radius: 5px!important;
      cursor: pointer!important;
      outline: none!important;
    }
    .slider2::-webkit-slider-thumb {
      -webkit-appearance: none!important;
      width: 14px!important;
      height: 14px!important;
      border-radius: 14px!important;
      background: var(--under-line)!important;
      border: 2px solid var(--fplr-red)!important;
      cursor: pointer!important;
    }
    .slider2::-moz-range-thumb {
      width: 14px!important;
      height: 14px!important;
      border-radius: 0!important;
      background: var(--text-med)!important;
      border: 2px solid var(--fplr-red)!important;
      cursor: pointer!important;
    }

    /* Arrow + numeric input container */
    .arrow-control {
      display: inline-flex;
      width: 200px;
      justify-content: space-between;
      align-items: center;
    }
    .arrow-button {
      background: var(--fplr-background2);
      border: 1px solid var(--under-line)!important;
      color: var(--fplr-red);
      width: 40px; 
      padding: 4px 0;
      cursor: pointer;
      border-radius: 3px;
      font-weight: bold;
      text-align: center;
      user-select: none;
    }
	.arrow-button:hover,.arrow-button:focus  {
		background: var(--fplr-lightgrey);
		color: var(--fplr-red);
	}
    .arrow-input {
      width: 70px;
      text-align: center;
      font-weight: bold;
      color: var(--text-med);
      background: #2c3350;
      border: 0px solid;
      border-radius: 3px;
      margin: 0 5px;
      padding: 6px 0;
      -webkit-appearance: none; /* hide spin buttons in Chrome */
    }
    .arrow-input[type=number]::-webkit-inner-spin-button,
    .arrow-input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .arrow-input[type=number] {
      -moz-appearance: textfield; /* hide spin buttons in Firefox */
    }
	

    /* Advanced settings toggle */
    .advanced-settings {
      margin: 0px 0 5px;
      cursor: pointer;
      color: var(--fplr-red);
      font-weight: bold;
      text-decoration: underline;
      display: inline-block;
    }
    .advanced-settings-content {
      /* border: 2px solid #2c3350;
      background-color: #131a2c;
      border-radius: 5px;
      padding: 10px; */
      display: none;
      margin-bottom: 5px;
    }
	
	#likely-schedules-context {
		margin-top: 5px;
		font-size: 13px;
		display: inline-flex;
		width: 200px;
		justify-content: center;
		align-items: center;
	}
</style>