#system_setting {
	margin-left: 124px;
}

#default_setting {
	margin-left: 124px;
}

.dividing_rule{
	width: 250px;
	height: 20px;
	background-image: url("../../images/dividing_backgroud.png");
}
.rule_pointer{
	width: 10px;
	height: 20px;
	vertical-align: -5px;
}
.number{
	width: 20px;
	height: 20px;
}
.display_off{
	display: none !important;
}
#vo_source{
	vertical-align: -2px;
	margin-left: 15px;
}

.content .system_subtitle {
	font-size: 16px;
	width: 150px;
	color: rgb(34, 34, 34);
	font-weight: bold;
}

hr {
    background-color: rgb(186, 185, 185);
    height: 1px;
    border: none;
    width: 100%;
    margin: 15px auto;
}

.content .select_width{
	width: 70px;
}

/* 输出设置页面下拉列表框统一宽度 */
.content select#vo_mod,
.content select#decode_mod,
.content select#vo,
.content select#vo_color,
.content select#vo_cvbs {
	width: 120px;
	min-width: 100px;
}

.screen_background{
    margin-left: -10px !important;
    background-color: black;
	position: relative;
	min-width: 768px !important;
	width: 768px !important;
	height: 432px !important;
        margin-right: 0 !important;
        overflow: hidden;
}

/* 16 宫格参考线（4×4 = 16 份） */
.screen_background::before{          /* 3 条水平线 */
    content: "";
    position: absolute;
    inset: 0;                       /* top:0 right:0 bottom:0 left:0 简写 */
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(25% - 1px),
        rgba(255,255,255,.7) calc(25% - 1px) 25%,
        transparent 25% calc(50% - 1px),
        rgba(255,255,255,.7) calc(50% - 1px) 50%,
        transparent 50% calc(75% - 1px),
        rgba(255,255,255,.7) calc(75% - 1px) 75%
    );
    pointer-events: none;
    z-index: 1;
}
.screen_background::after{           /* 3 条垂直线 */
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to right,
        transparent 0 calc(25% - 1px),
        rgba(255,255,255,.7) calc(25% - 1px) 25%,
        transparent 25% calc(50% - 1px),
        rgba(255,255,255,.7) calc(50% - 1px) 50%,
        transparent 50% calc(75% - 1px),
        rgba(255,255,255,.7) calc(75% - 1px) 75%
    );
    pointer-events: none;
    z-index: 1;
}
.layoutset_disable{
	pointer-events: none !important;
}

.screen_sub{
	/* background-color: white; */
	margin: 0px;
	position: absolute;
	/* border: 1px solid rgb(34, 34, 34); */
	overflow: hidden;
	user-select: none;
	cursor: move; /* 鼠标样式为移动 */
	/* padding: 5px; */
	box-sizing: border-box;
}

.main_name{
	color: white !important;
	font-size: 20px !important;
	font-weight: bold;
	position: absolute;
	right: 10px;
	bottom: 5px;
	/* top: 50%; */
	/* left: 50%; */
	/* transform: translate(-50%, -50%); */
}

.sub_name{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scrren_operation{
	color: white;
	cursor: pointer;
	/* background: linear-gradient(rgb(184, 184, 184), rgb(71, 71, 71)); */
	/* background-color: rgb(109, 109, 109); */
	background-color: transparent;
	border-radius: 5px;
	border: none;
	/* border: 1px solid rgb(34, 34, 34); */
	width: 20px;
	height: 20px;
	/* position: absolute;
	top: 2px; */
}

.operation_up{
	left: 2px;
	display: none;
	position: relative;
}

.operation_up::before{
	content: "";
	position: absolute;
	top: 4px;
	left: 5px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid rgba(255, 255, 255, 0.92);
}

.operation_display{
	background-image: url("../../images/display.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	right: 2px;
}

.operation_hide{
	background-image: url("../../images/hide.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	right: 2px;
}

.container{
	display: flex !important;
}

.layoutset_tip_block {
	margin-top: 15px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	margin-bottom: 15px !important;
}

.layoutset_tip_block .dynamic_data {
	margin-left: 15px;
}

.layoutset_control_row {
	margin-left: 205px !important;
	margin-right: 109px !important;
}

.layoutset_canvas_row {
	margin-left: 0px !important;
}

.layoutset_action_row {
	margin: 15px 260px 0 220px !important;
}

.layoutset_control_row .small_title {
	width: auto;
	padding-right: 16px;
	text-align: left;
}

.layoutset_canvas_row .screen_background {
	margin: 0 1px 0 0 !important;
	border-radius: 6px;
	overflow: hidden;
}

.layoutset_canvas_row .screen_sub {
	border-radius: 4px;
}

#sub_priority_title{
	font-size: 13px;
	/* font-weight: 700; */
	width: 150px;
	text-align: left;
}

#sub_priority_div, #sub_display_div{
	width: 100px;
	position: relative;
	margin: 0px !important;
}

.sub_priority{
	width: 60px;
	height: 25px;
	border: 0px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	cursor: pointer;
	/* background: url(../../images/bg-button-green.gif) repeat-x left top rgb(69, 147, 0) !important; */
    font-size: 14px;
    font-weight: bold;
    color: white;
	text-align: center;
	margin: 0px 0px 5px 0px !important;
}

.sub_display{
	width: 80px;
	height: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
	border: 0px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	cursor: pointer;
	/* background: url(../../images/bg-button-green.gif) repeat-x left top rgb(69, 147, 0) !important; */
    font-size: 14px;
    font-weight: bold;
    color: white;
	text-align: center;
	margin: 0px 0px 5px 0px !important;
}
.sub_display span{
	width: 50px;
	color: white;
	font-weight: 500;
}

.resize_handle {
	width: 10px;
	height: 10px;
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: nwse-resize;
	margin: 0px !important;
}

.hide{
	display: none;
	/* opacity: 0.5; */
	/* background-color: ; */
}

#screen_sub_0{
	background-color: rgb(186, 204, 225);
}

#screen_sub_1{
	background-color: rgb(192, 235, 210);
}

#screen_sub_2{
	background-color: rgb(255, 198, 192);
}

#screen_sub_3{
	background-color: rgb(218, 200, 239);
}

.highlightborder{
	border: 2px solid white;
}

.content .dynamic_data {
	max-width: 500px;
	max-height:17px;
	text-align: left;
	overflow: hidden;
	vertical-align: -3px;
}

body.layoutset_page #main_content {
	padding-bottom: 32px;
}

body.layoutset_page #system_setting,
body.layoutset_page #default_setting {
	margin-left: 0 !important;
}

body.layoutset_page .layoutset_content {
	padding: 24px !important;
}

body.layoutset_page .layoutset_intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

body.layoutset_page .layoutset_tip_card {
	padding: 12px 14px;
	background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), 0.08) 0%, rgba(var(--tblr-primary-rgb), 0.04) 100%);
	border: 1px solid rgba(var(--tblr-primary-rgb), 0.18);
	border-radius: var(--tblr-border-radius-lg);
}

body.layoutset_page .layoutset_tip_card .dynamic_data {
	max-width: none;
	max-height: none;
	color: var(--tblr-body-color);
	line-height: 1.6;
}

body.layoutset_page .layoutset_toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 14px 16px;
	background: var(--tblr-card-cap-bg);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius-lg);
}

body.layoutset_page .layoutset_toolbar .small_title {
	width: auto !important;
	padding-right: 0 !important;
}

body.layoutset_page .layoutset_workspace {
	display: grid !important;
	grid-template-columns: minmax(640px, 1fr) 220px;
	align-items: start;
	gap: 20px;
	margin: 0 0 20px !important;
}

body.layoutset_page .layoutset_canvas_card,
body.layoutset_page .layoutset_sidebar_card,
body.layoutset_page .layout_window_panel {
	background: var(--tblr-bg-surface);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius-lg);
	box-shadow: var(--tblr-shadow-card);
}

body.layoutset_page .layoutset_canvas_card {
	padding: 16px;
}

body.layoutset_page .layoutset_canvas_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

body.layoutset_page .layoutset_section_mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 24px;
	padding: 0 10px;
	color: var(--tblr-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(var(--tblr-primary-rgb), 0.1);
	border-radius: 999px;
}

body.layoutset_page .layoutset_canvas_stage {
	padding: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 24px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 24px),
		linear-gradient(145deg, #111827 0%, #1f2937 100%);
	border-radius: calc(var(--tblr-border-radius-lg) + 2px);
}

body.layoutset_page .screen_background {
	margin: 0 auto !important;
	background:
		radial-gradient(circle at top left, rgba(var(--tblr-primary-rgb), 0.24) 0%, rgba(var(--tblr-primary-rgb), 0) 38%),
		linear-gradient(160deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.96) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 36px rgba(2, 6, 23, 0.3);
}

body.layoutset_page .screen_background::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	pointer-events: none;
}

body.layoutset_page .main_name {
	right: 18px;
	bottom: 14px;
	padding: 4px 10px;
	font-size: 13px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(15, 23, 42, 0.46);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

body.layoutset_page .screen_sub {
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
	backdrop-filter: blur(8px);
}

body.layoutset_page .sub_name {
	padding: 6px 12px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	background: rgba(15, 23, 42, 0.2);
	border-radius: 999px;
}

body.layoutset_page #screen_sub_0 {
	background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.9) 0%, rgba(var(--tblr-primary-rgb), 0.52) 100%);
}

body.layoutset_page #screen_sub_1 {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.92) 0%, rgba(21, 128, 61, 0.54) 100%);
}

body.layoutset_page #screen_sub_2 {
	background: linear-gradient(135deg, rgba(249, 115, 22, 0.92) 0%, rgba(194, 65, 12, 0.54) 100%);
}

body.layoutset_page #screen_sub_3 {
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.92) 0%, rgba(109, 40, 217, 0.54) 100%);
}

body.layoutset_page .layoutset_sidebar {
	width: 100%;
}

body.layoutset_page .layoutset_sidebar_card {
	padding: 12px;
}

body.layoutset_page .layoutset_toggle_list,
body.layoutset_page .layoutset_priority_list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.layoutset_page .layoutset_priority_list {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--tblr-border-color);
}

body.layoutset_page #sub_display_div,
body.layoutset_page #sub_priority_div {
	width: auto;
	margin: 0 !important;
}

body.layoutset_page .sub_display,
body.layoutset_page .sub_priority {
	width: 100% !important;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 12px !important;
}

body.layoutset_page .sub_display span,
body.layoutset_page .sub_priority {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

body.layoutset_page .sub_display span {
	width: auto;
	flex: 1 1 auto;
	text-align: left;
}

body.layoutset_page .scrren_operation {
	position: relative;
	flex: 0 0 auto;
}

body.layoutset_page .layoutset_window_fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

body.layoutset_page .layout_window_panel {
	padding: 16px;
}

body.layoutset_page .layout_window_panel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

body.layoutset_page .layout_window_title {
	color: var(--tblr-body-color);
	font-size: 14px;
	font-weight: 700;
}

body.layoutset_page .layout_window_state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	padding: 4px 10px;
	color: var(--tblr-primary);
	font-size: 12px;
	font-weight: 700;
	background: rgba(var(--tblr-primary-rgb), 0.1);
	border-radius: 999px;
}

body.layoutset_page .layout_window_panel.is-hidden {
	opacity: 0.72;
}

body.layoutset_page .layout_window_panel.is-hidden .layout_window_state {
	color: var(--tblr-muted);
	background: rgba(107, 114, 128, 0.12);
}

body.layoutset_page .layout_window_row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 12px !important;
}

body.layoutset_page .layout_window_row:last-child {
	margin-bottom: 0 !important;
}

body.layoutset_page .layout_window_label {
	color: var(--tblr-body-color);
	font-size: 12px;
	font-weight: 600;
}

body.layoutset_page .layout_window_inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

body.layoutset_page .layout_window_axis {
	min-width: 14px;
	color: var(--tblr-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

body.layoutset_page .layout_window_unit {
	color: var(--tblr-muted);
	font-size: 12px;
}

body.layoutset_page .layout_window_inline input[type="text"] {
	width: 72px;
	max-width: none;
}

body.layoutset_page .layoutset_actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
}

@media (max-width: 1180px) {
	body.layoutset_page .layoutset_workspace {
		grid-template-columns: 1fr;
	}
}

body.system_page #main_content {
	padding-bottom: 32px;
}

body.system_page .system_page_content {
	padding: 24px !important;
}

body.system_page #system_setting {
	margin-left: 0 !important;
}

body.system_page .system_page_grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

body.system_page .system_panel {
	background: var(--tblr-bg-surface);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius-lg);
	box-shadow: var(--tblr-shadow-card);
}

body.system_page .system_panel_primary,
body.system_page .system_panel_secondary {
	padding: 18px;
}

body.system_page .system_panel_primary {
	background:
		radial-gradient(circle at top right, rgba(var(--tblr-primary-rgb), 0.12) 0%, rgba(var(--tblr-primary-rgb), 0) 36%),
		var(--tblr-bg-surface);
}

body.system_page .system_form_grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.system_page .system_field,
body.system_page .system_slider_field {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin: 0 !important;
}

html body #main_content input[id$="_setting"],
html body #main_content #default_setting,
html body #main_content #playlist_get_btu_url,
html body #main_content #playlist_get_btu_xcurl,
html body #main_content #scan_button,
html body #main_content #backup_firmware,
html body #main_content #backup_config,
html body #main_content #update_apply {
	min-width: 100px !important;
	width: auto !important;
	margin-left: 10px !important;
}

body.system_page .system_field .small_title,
body.system_page .system_slider_field .small_title {
	width: auto !important;
	padding-right: 0 !important;
	text-align: left !important;
}

body.system_page .system_field_control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

body.system_page .system_field_inline {
	gap: 16px;
}

body.system_page .system_field_note {
	color: var(--tblr-muted);
	font-size: 12px;
}

body.system_page .system_toggle_inline {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

body.system_page .system_toggle_inline span {
	color: var(--tblr-body-color);
	font-size: 13px;
}

body.system_page .system_toggle_inline input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--tblr-primary);
}

body.system_page .system_panel_secondary {
	background:
		linear-gradient(180deg, rgba(var(--tblr-primary-rgb), 0.04) 0%, rgba(var(--tblr-primary-rgb), 0.01) 100%),
		var(--tblr-bg-surface);
}

body.system_page .system_form_grid_compact .system_field {
	grid-template-columns: 140px minmax(0, 1fr);
}

body.system_page .system_form_grid_compact input[type="text"] {
	width: 100px;
	max-width: none;
}

body.system_page .system_tuning_panel {
	padding: 18px;
	margin-bottom: 18px;
}

body.system_page .system_tuning_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px 22px;
}

body.system_page .system_slider_field {
	padding: 14px 16px;
	background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), 0.05) 0%, rgba(var(--tblr-primary-rgb), 0.02) 100%);
	border: 1px solid rgba(var(--tblr-primary-rgb), 0.12);
	border-radius: var(--tblr-border-radius-lg);
}

body.system_page .system_slider_control {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

body.system_page .dividing_rule {
	position: relative;
	width: 100%;
	max-width: none;
	height: 10px;
	background-image: none;
	background: linear-gradient(90deg, rgba(var(--tblr-primary-rgb), 0.12) 0%, rgba(var(--tblr-primary-rgb), 0.28) 100%);
	border-radius: 999px;
	overflow: hidden;
}

body.system_page .dividing_rule::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0, rgba(255, 255, 255, 0.24) 1px, transparent 1px, transparent 24px);
	opacity: 0.5;
	pointer-events: none;
}

body.system_page .rule_pointer {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: -2px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(var(--tblr-primary-rgb), 0.35);
}

body.system_page .number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 32px;
	padding: 0 10px;
	color: var(--tblr-primary);
	font-size: 13px;
	font-weight: 700;
	background: rgba(var(--tblr-primary-rgb), 0.1);
	border-radius: 999px;
}

body.system_page .system_actions {
	display: flex;
	justify-content: center;
}

.system_action_row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.system_action_row .large_button {
	width: 120px;
	flex: 0 0 120px;
}

.system_action_row .system_action_spacer {
	display: none;
	width: 0;
	height: 0;
}

#system_default{
	margin-left: 160px;
}

#system_setting {
	margin-left: 20px;
}

@media (max-width: 1100px) {
	body.system_page .system_page_grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	body.system_page .system_field,
	body.system_page .system_slider_field,
	body.system_page .system_form_grid_compact .system_field {
		grid-template-columns: 1fr;
	}
}
