:root {
	--tblr-primary: #066fd1;
	--tblr-primary-rgb: 6, 111, 209;
	--tblr-primary-darken: #055cae;
	--tblr-body-bg: #ffffff;
	--tblr-body-color: #111827;
	--tblr-muted: #6b7280;
	--tblr-border-color: #e5e7eb;
	--tblr-card-cap-bg: #f9fafb;
	--tblr-bg-surface: #ffffff;
	--tblr-input-bg: #ffffff;
	--tblr-muted-bg: #f3f4f6;
	--tblr-danger: #d63939;
	--tblr-success: #2fb344;
	--tblr-border-radius: 4px;
	--tblr-border-radius-lg: 6px;
	--tblr-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
	--tblr-font-sans-serif: "Microsoft YaHei", "微软雅黑", "Arial", "Helvetica", "SimSun", sans-serif;
}

html[data-theme="dark"] {
	--tblr-body-bg: #0f172a;
	--tblr-body-color: #e5e7eb;
	--tblr-muted: #9ca3af;
	--tblr-border-color: rgba(148, 163, 184, 0.22);
	--tblr-card-cap-bg: #172033;
	--tblr-bg-surface: #111827;
	--tblr-input-bg: #0f172a;
	--tblr-muted-bg: #1f2937;
	--tblr-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.3);
}

* {
	box-sizing: border-box;
}

html {
	padding: 0;
	margin: 0;
	color: var(--tblr-body-color);
	background: var(--tblr-body-bg);
	font-family: var(--tblr-font-sans-serif);
	font-size: 14px;
	line-height: 1.4285714286;
}

body {
	padding: 0;
	margin: 0;
	min-height: 100%;
	width: 100%;
	background: transparent;
}

#main_content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.content_box {
	width: 100%;
	margin: 0 0 16px;
	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);
	overflow: hidden;
}

.content_box_header {
	display: none;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0 16px;
	background: var(--tblr-card-cap-bg);
	border: 0;
	border-bottom: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0;
}

.content_box_header span {
	display: inline-block;
	padding: 0;
	color: var(--tblr-body-color);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.content {
	margin: 0;
	padding: 20px;
	background: var(--tblr-bg-surface);
	border: 0;
	border-radius: 0;
}

.content div,
.content p {
	margin: 8px 0;
}

.content span,
.content label {
	display: inline-block;
	color: var(--tblr-body-color);
	font-size: 13px;
}

.content .small_title {
	width: 180px;
	padding-right: 16px;
	color: var(--tblr-body-color);
	font-size: 13px;
	font-weight: 500;
	text-align: right;
	vertical-align: middle;
}

.content .subtitle {
	margin: 16px -20px 14px;
	padding: 8px 20px;
	background: var(--tblr-card-cap-bg);
	border-top: 1px solid var(--tblr-border-color);
	border-bottom: 1px solid var(--tblr-border-color);
}

.content > .subtitle:first-child {
	display: none;
	margin-top: -20px;
	border-top: 0;
}

.content .status_subtitle,
.content .network_subtitle,
.content .wifi_subtitle,
.content .g4_subtitle,
.content .system_subtitle,
.content .osd_setting_subtitle,
.content .crop_setting_subtitle {
	width: auto;
}

/* Hide crop setting subtitles to avoid duplicate with breadcrumb */
.content .subtitle:has(.crop_setting_subtitle) {
	display: none;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
	min-height: 32px;
	padding: 4px 10px;
	color: var(--tblr-body-color);
	background-color: var(--tblr-input-bg);
	border: 1px solid #d1d5db;
	border-radius: var(--tblr-border-radius);
	outline: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea {
	width: auto;
	max-width: 280px;
}

input[type="file"] {
	padding: 4px;
}

select {
	min-width: 96px;
}

input[disabled],
select[disabled],
textarea[disabled] {
	color: var(--tblr-muted);
	background-color: var(--tblr-muted-bg);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
	border-color: var(--tblr-primary);
	box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.12);
}

input[type="checkbox"],
input[type="radio"] {
	vertical-align: middle;
}

.input_button,
.large_button,
input[type="button"],
input[type="submit"] {
	min-width: 100px;
	min-height: 32px;
	padding: 5px 18px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	background: var(--tblr-primary) !important;
	background-image: none !important;
	border: 1px solid var(--tblr-primary) !important;
	border-radius: var(--tblr-border-radius);
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.input_button:hover,
.large_button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background: var(--tblr-primary-darken) !important;
	border-color: var(--tblr-primary-darken) !important;
}

.input_button:disabled,
.large_button:disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.hint_image {
	width: 15px;
	height: 15px;
	margin-left: 10px;
	vertical-align: -2px;
}

.hint_text {
	margin-left: 6px;
	color: var(--tblr-danger) !important;
	font-size: 12px !important;
}

.display_off {
	display: none !important;
}

.display_on,
.display_off1 {
	display: block;
}

hr {
	display: none;
	width: 0;
	height: 0;
	margin: 0;
	background: transparent;
	border: 0;
}

.span_href,
.green,
.copycss,
a {
	color: var(--tblr-primary) !important;
	text-decoration: none;
	cursor: pointer;
}

.span_href:hover,
.green:hover,
.copycss:hover,
a:hover {
	color: var(--tblr-primary-darken) !important;
	text-decoration: underline;
}

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--tblr-bg-surface);
}

th,
td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--tblr-border-color);
	text-align: left;
}

th {
	color: var(--tblr-body-color);
	font-weight: 600;
	background: var(--tblr-card-cap-bg);
}

#progress_bar {
	display: inline-block;
	width: 184px;
	height: 16px;
	margin: 0;
	overflow: hidden;
	vertical-align: -3px;
	background: #e5e7eb;
	border: 1px solid var(--tblr-border-color);
	border-radius: 999px;
}

#progress {
	display: block;
	width: 0;
	height: 100%;
	margin: 0;
	background: var(--tblr-primary);
	border-radius: 999px;
}

#progress_text {
	width: 42px;
	color: var(--tblr-muted);
	text-align: center;
}

#uri_scan,
#update_logo_block {
	background: var(--tblr-bg-surface) !important;
	border: 1px solid var(--tblr-border-color) !important;
	border-radius: var(--tblr-border-radius-lg) !important;
	box-shadow: var(--tblr-shadow-card);
}

.dynamic_data {
	color: var(--tblr-body-color);
}

.errorstatus {
	color: var(--tblr-primary) !important;
	text-decoration: underline;
}

@media (max-width: 768px) {
	#main_content {
		padding: 0;
	}

	.content {
		padding: 16px;
	}

	.content .subtitle {
		margin-right: -16px;
		margin-left: -16px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.content .small_title {
		display: block;
		width: auto;
		margin-bottom: 4px;
		padding-right: 0;
		text-align: left;
	}

	input[type="text"],
	input[type="password"],
	input[type="number"],
	textarea {
		max-width: 100%;
	}
}

/* Page-specific CSS is loaded after this file. These high-specificity
   overrides keep the legacy iframe pages aligned with the newer up/web style. */
html body #main_content .content_box {
	width: 100% !important;
	margin-bottom: 16px !important;
	background: var(--tblr-bg-surface) !important;
	border: 1px solid var(--tblr-border-color) !important;
	border-radius: var(--tblr-border-radius-lg) !important;
	box-shadow: var(--tblr-shadow-card) !important;
	overflow: hidden;
}

html body #main_content .content_box_header {
	display: flex !important;
	align-items: center !important;
	min-height: 40px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 16px !important;
	background: var(--tblr-card-cap-bg) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tblr-border-color) !important;
	border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0 !important;
}

html body #main_content .content_box_header span {
	padding: 0 !important;
	color: var(--tblr-body-color) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

html body #main_content .content {
	margin: 0 !important;
	padding: 20px !important;
	background: var(--tblr-bg-surface) !important;
	border: 0 !important;
	border-radius: 0 !important;
}

html body #main_content .content .small_title {
	width: 180px !important;
	padding-right: 16px !important;
	color: var(--tblr-body-color) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: right !important;
}

@media (max-width: 768px) {
	html body #main_content .content .small_title {
		text-align: left !important;
        }
}	
html body #main_content .content .subtitle {
	margin: 16px -20px 14px !important;
	padding: 8px 20px !important;
	background: var(--tblr-card-cap-bg) !important;
	border-top: 1px solid var(--tblr-border-color) !important;
	border-bottom: 1px solid var(--tblr-border-color) !important;
}

html body #main_content .content > .subtitle:first-child {
	margin-top: -20px !important;
	border-top: 0 !important;
}

html body #main_content .content .status_subtitle,
html body #main_content .content .network_subtitle,
html body #main_content .content .wifi_subtitle,
html body #main_content .content .g4_subtitle,
html body #main_content .content .system_subtitle,
html body #main_content .content .osd_setting_subtitle,
html body #main_content .content .crop_setting_subtitle {
	width: auto !important;
	color: rgb(34, 34, 34) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

html[data-theme="dark"] body #main_content .content .status_subtitle,
html[data-theme="dark"] body #main_content .content .network_subtitle,
html[data-theme="dark"] body #main_content .content .wifi_subtitle,
html[data-theme="dark"] body #main_content .content .g4_subtitle,
html[data-theme="dark"] body #main_content .content .system_subtitle,
html[data-theme="dark"] body #main_content .content .osd_setting_subtitle,
html[data-theme="dark"] body #main_content .content .crop_setting_subtitle {
	color: var(--tblr-body-color) !important;
}

html body #main_content hr {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

html body #main_content .input_button,
html body #main_content .large_button,
html body #main_content input[type="button"],
html body #main_content input[type="submit"] {
	min-width: 100px !important;
	min-height: 32px !important;
	padding: 5px 18px !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	background: var(--tblr-primary) !important;
	background-image: none !important;
	border: 1px solid var(--tblr-primary) !important;
	border-radius: var(--tblr-border-radius) !important;
	box-shadow: none !important;
}

html body #main_content .input_button:hover,
html body #main_content .large_button:hover,
html body #main_content input[type="button"]:hover,
html body #main_content input[type="submit"]:hover {
	background: var(--tblr-primary-darken) !important;
	border-color: var(--tblr-primary-darken) !important;
}

html body #main_content .sub_priority,
html body #main_content .sub_display {
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), 0.86) 0%, var(--tblr-primary) 100%) !important;
	border: 1px solid rgba(var(--tblr-primary-rgb), 0.75) !important;
	border-radius: var(--tblr-border-radius) !important;
	box-shadow: none !important;
}

html body #main_content .sub_display span,
html body #main_content .sub_priority span {
	color: #ffffff !important;
}

html body #main_content .scrren_operation {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	padding: 0 !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body #main_content .rule_pointer,
html body #main_content .resize_handle {
	background-color: var(--tblr-primary) !important;
}

html body #main_content .highlightborder {
	border-color: var(--tblr-primary) !important;
}

html body #main_content .copycss,
html body #main_content .span_href,
html body #main_content .green,
html body #main_content a {
	color: var(--tblr-primary) !important;
}

html body #main_content .copycss:hover,
html body #main_content .span_href:hover,
html body #main_content .green:hover,
html body #main_content a:hover {
	color: var(--tblr-primary-darken) !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: calc(180px + 5px) !important;
}

html body #main_content #scan_button,
html body #main_content #backup_config,
html body #main_content #update_apply {
	margin-left: 8px !important;
}

html body #main_content .hint_image {
	width: 15px !important;
	height: 15px !important;
	margin-left: 10px !important;
	vertical-align: -2px !important;
}

html body #main_content .hint_text {
	margin-left: 6px !important;
	color: var(--tblr-danger) !important;
	font-size: 12px !important;
}

html body #main_content #progress_bar {
	display: inline-block;
	width: 184px !important;
	height: 16px !important;
	margin: 0 !important;
	overflow: hidden !important;
	vertical-align: -3px !important;
	background: #e5e7eb !important;
	border: 1px solid var(--tblr-border-color) !important;
	border-radius: 999px !important;
}

html body #main_content #progress {
	display: block !important;
	width: 0;
	height: 100% !important;
	margin: 0 !important;
	background: var(--tblr-primary) !important;
	border-radius: 999px !important;
}

html body #main_content #sub_priority_0,
html body #main_content #sub_priority_1,
html body #main_content #sub_priority_2,
html body #main_content #sub_priority_3,
html body #main_content #sub_display_0,
html body #main_content #sub_display_1,
html body #main_content #sub_display_2,
html body #main_content #sub_display_3 {
	background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), 0.86) 0%, var(--tblr-primary) 100%) !important;
}

html body #main_content #sub_priority_0,
html body #main_content #sub_priority_1,
html body #main_content #sub_priority_2,
html body #main_content #sub_priority_3 {
	display: block;
	line-height: 23px;
}

html body #main_content #sub_display_0,
html body #main_content #sub_display_1,
html body #main_content #sub_display_2,
html body #main_content #sub_display_3 {
	display: flex;
	justify-content: center;
}

html body #main_content #update_logo_block,
html body #main_content #uri_scan {
	background: var(--tblr-bg-surface) !important;
	border: 1px solid var(--tblr-border-color) !important;
	border-radius: var(--tblr-border-radius-lg) !important;
	box-shadow: var(--tblr-shadow-card) !important;
}



/* css 追加覆盖 */
.content .uri_input {
	width: 50% !important;
	min-width: 485px !important;
}
	
#status_layout_div {
	flex-direction: column !important;
	align-items: center !important;
}

.content input[id^="full_btn_"] {
	width: auto !important;
	margin-left: var(--playlist-button-gap);
}

#playlist_config_discription_txt {
    display: block !important;
    word-break: break-all;
    white-space: normal;
}

html body #main_content #reset_apply  {
	background-color: #d63939 !important;
	border: 1px solid #b92f2f !important; 
}
html body #main_content #reboot_apply {
	background-color: #f59f00 !important;
	border: 1px solid #F5D06F !important; 

}

html body #main_content .content_box {
	width: 100% !important;
	margin-bottom: 3px !important;
}
#system_default{
	margin-left: 180px !important;
}
#update_logo_block {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 98% !important;
  height: auto !important;
  background-color: #888888 !important;
}

#update_logo_block div {
	margin: 15px 10px 30px 20px !important;
}

#update_logo_block span{
	color: var(--tblr-body-color) !important;
}

#update_logo_block .small_title {
	width: auto !important;
}

.osd_region_logo{
	width: auto !important;
	height: 100px !important;
	cursor: pointer !important;
}

#update_txt {
	width: auto !important;
}

.update_backup_row {
	gap: 16px !important;
}

.update_backup_row .large_button {
	width: auto !important;
	flex: none !important;
}


@media (max-width: 508px) {
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 {
	margin-left: 0 !important;
    }
	#system_default{
	margin-left: 0 !important;
   }
   .content .uri_input {
	min-width: 100% !important;
    }
}