:root {
	--bg-start: #FAF6F0;
	--bg-end: #E8DCC8;
	--text-primary: #2C2416;
	--text-muted: #5C4A3A;
	--text-on-dark: #FFFFFF;
	--btn-primary: #8B5A2B;
	--btn-primary-hover: #6B4423;
	--btn-secondary: #2D6A4F;
	--btn-secondary-hover: #1E4D38;
	--btn-danger: #B83227;
	--btn-danger-hover: #922820;
	--btn-success: #2D6A4F;
	--input-bg: #FFFBF5;
	--input-border: #A8957A;
	--input-focus-bg: #FFF8E7;
	--input-focus-border: #8B5A2B;
	--panel-bg: #FFFBF5;
	--table-header: #A67C52;
	--table-header-alt: #8B6914;
	--sidebar-bg: #EDE4D3;
	--card-border: #C4B59A;
	--accent: #8B6914;
	--note-bg: #FFF8E7;
	--note-border: #D4C4A8;
	--neutral-bg: #E8DFD0;
	--neutral-dark: #666666;
	--upload-bg: #F5EDE0;
	--upload-drag: #E8DCC8;
	--shadow-btn: rgba(44, 36, 22, 0.3);
	--shadow-btn-hover: rgba(44, 36, 22, 0.4);
	--msg-ok-bg: #E8F5E9;
	--msg-ok-text: #1B4332;
	--msg-err-bg: #FDEDEC;
	--msg-err-text: #7B241C;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(https://fonts.gstatic.com/s/comfortaa/v12/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html *{
	font-family: 'Comfortaa',Microsoft JhengHei ;	    
	font-size: 12pt ;
	color: var(--text-primary);
	/*
	-webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
	*/
}
.main-bg-color{background-image: -webkit-linear-gradient(42deg,var(--bg-start) 0%,var(--bg-end) 100%);
    background-image: -moz-linear-gradient(42deg,var(--bg-start) 0%,var(--bg-end) 100%);
    background-image: -o-linear-gradient(42deg,var(--bg-start) 0%,var(--bg-end) 100%);
    background-image: linear-gradient(48deg,var(--bg-start) 0%,var(--bg-end) 100%);}
.warm-bg-gradient {
	background-image: linear-gradient(45deg, var(--bg-start) 0%, var(--bg-end) 100%);
}
html, body {
	width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    
}
h1,h2,h3,h4,h5,h6{
    font-weight: bolder;
    margin-top: 0em;
    margin-bottom: 0.3em;
}
h1{
	font-size:2em;	
}
h2{
	font-size:1.8em;	
}
h3{
	font-size:1.6em;	
}
h4{
	font-size:1.4em;	
}
h5{
	font-size:1.2em;	
}
h6{
	font-size:1.1em;	
}
.outer {
	position:fixed;
	width: 100vw;
    height: 100vh;
	top:0;
	left: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
.inner {
        display: flex;
	width: 100vw;
    height: 100vh;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.button_warring,.button_normal,.button_error{
    width: 100%;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    border-radius: 0.5em;
    text-decoration: none;
    font-weight: bold;
    color: var(--text-on-dark);
    border: 2px solid transparent;
    box-shadow: 0 2px 6px var(--shadow-btn);
    transition: background-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	cursor: pointer;
}
.button_warring {
    background-color: var(--btn-secondary);
    border-color: var(--btn-secondary-hover);
}
.button_normal {
    background-color: var(--btn-primary);
    border-color: var(--btn-primary-hover);
}
.button_error {
	background-color: #F5DEB3;
	color: var(--text-primary);
	border-color: var(--card-border);
}
.button_normal:hover {
	background-color: var(--btn-primary-hover);
	box-shadow: 0 3px 8px var(--shadow-btn-hover);
}
.button_warring:hover {
	background-color: var(--btn-secondary-hover);
	box-shadow: 0 3px 8px var(--shadow-btn-hover);
}
.button_normal:disabled,
.button_warring:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

.footer_status {
    margin: 0em;
    float: none;
    bottom: 0px;
    left: 0px;
    padding: 0;
    position: fixed;
    text-align: left;
    z-index: 100000;
    color: var(--text-primary);
	background: var(--panel-bg);
	padding: 3px 3px 3px 3px;
	border-radius: 0px 3px 0px 0px;
	border-top: 1px solid var(--card-border);
}
.footer_status div{
	font-size: 10px;
}

input,select{    
    padding: 0.5em;
    border-radius: 0.5em;
    font-size: 0.8em;
    border: thin solid var(--input-border);
    background-color: var(--input-bg);
	color: var(--text-primary);
	box-sizing: border-box;
	width: 100%;
}
input:focus, select:focus{
    background-color: var(--input-focus-bg);
    border-color: var(--input-focus-border);
    outline: none;
}
.killswitch{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 30px;
	z-index: 999;
}
.reload{
    position: fixed;
    top: 0px;
    left: 47%;
    width: 6%;
    height:30px;
	z-index: 999;
}
.mo_mask{
    display: none;
    z-index: 10000;
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--btn-danger);
    bottom: 0px;
}

/* --- Q Admin shared styles --- */
body.page-q_admin .outer,
body.page-q_admin .inner {
	position: static !important;
	height: auto !important;
	min-height: 100vh;
	overflow: visible !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
}
body.page-q_admin { overflow-y: auto !important; }

.q_panel {
	background: var(--panel-bg);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 1em;
	box-shadow: 0 1px 4px rgba(44, 36, 22, 0.12);
	border: 1px solid var(--card-border);
}
.q_note {
	background: var(--note-bg);
	border: 1px solid var(--note-border);
	padding: 10px;
	border-radius: 6px;
	margin-bottom: 1em;
	line-height: 1.5;
	font-size: 13px;
}
.q_bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.q_bar button, .q_bar select {
	padding: 8px 14px;
	border-radius: 6px;
	border: 2px solid var(--btn-primary-hover);
	background: var(--btn-primary);
	color: var(--text-on-dark);
	font-weight: bold;
	cursor: pointer;
	font-size: 13px;
	box-shadow: 0 2px 4px var(--shadow-btn);
}
.q_bar button.secondary, .q_bar select { background: var(--neutral-dark); border-color: #444; }
.q_bar select { color: var(--text-on-dark); }
.q_group_item input { width: 3em; padding: 4px; text-align: center; border: 1px solid var(--input-border); border-radius: 4px; }
.q_media { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.q_type_score { color: var(--btn-success); font-weight: bold; }
.q_type_show { color: var(--text-muted); }
.add_row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.add_row input, .add_row select { padding: 6px; border: 1px solid var(--input-border); border-radius: 4px; }
.set_cfg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.set_cfg label { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--neutral-bg); border-radius: 4px; cursor: pointer; font-weight: bold; }
.set_cfg label.on { background: var(--btn-primary); color: var(--text-on-dark); }
.set_cfg input { margin: 0; }
.set_custom { margin-top: 8px; font-size: 12px; }
.set_custom input { padding: 6px; border: 1px solid var(--input-border); border-radius: 4px; width: 200px; }
.set_dt_hint { font-size: 11px; color: var(--text-muted); margin: 0 0 8px; }
.btn_row_del { background: var(--btn-danger); color: var(--text-on-dark); border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
.btn_edit { background: var(--btn-success); color: var(--text-on-dark); padding: 6px 12px; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 12px; display: inline-block; }
.btn_del { background: var(--btn-danger); color: var(--text-on-dark); border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
#q_admin_msg { margin-top: 1em; padding: 8px; border-radius: 4px; display: none; }
#q_admin_msg.ok { display: block; background: var(--msg-ok-bg); color: var(--msg-ok-text); }
#q_admin_msg.err { display: block; background: var(--msg-err-bg); color: var(--msg-err-text); }

#q_admin_table, #sets_table { width: 100%; border-collapse: collapse; font-size: 13px; }
#q_admin_table th, #q_admin_table td,
#sets_table th, #sets_table td { border: 1px solid var(--card-border); padding: 8px; vertical-align: middle; }
#q_admin_table th { background: var(--table-header); color: var(--text-on-dark); position: sticky; top: 0; }
#sets_table { margin-bottom: 10px; }
#sets_table th, #sets_table td { padding: 6px; }
#sets_table th { background: var(--table-header-alt); color: var(--text-on-dark); }
#sets_table input[type="text"] { width: 100%; padding: 4px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; font-size: 12px; }
#sets_table input.set_dt { font-family: Consolas, "Courier New", monospace; min-width: 11em; }

.q_score_row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.q_score_row input { flex: 1; padding: 6px; border: 1px solid var(--input-border); border-radius: 4px; box-sizing: border-box; }
.q_score_row input.score_s { max-width: 70px; flex: 0 0 70px; }
.q_score_row button { padding: 4px 8px; background: var(--btn-danger); color: var(--text-on-dark); border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.set_tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.set_tab {
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--neutral-bg);
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: var(--text-primary);
}
.set_tab.active { background: var(--btn-primary); color: var(--text-on-dark); }
.set_tab .dot_ok { color: var(--btn-success); }
.set_tab .dot_part { color: #C0782C; }
.set_tab .dot_no { color: #999; }
.q_preview { max-width: 100%; max-height: 200px; display: block; margin: 10px auto; background: var(--neutral-bg); }
.q_upload_box {
	border: 2px dashed var(--btn-primary);
	border-radius: 8px;
	padding: 1em;
	text-align: center;
	background: var(--upload-bg);
	margin-top: 10px;
}
.q_upload_box.dragover { background: var(--upload-drag); }
label.upload_btn {
	display: inline-block;
	margin: 6px 4px;
	padding: 8px 14px;
	background: var(--btn-primary);
	color: var(--text-on-dark);
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	font-size: 12px;
	box-shadow: 0 2px 4px var(--shadow-btn);
}
label.upload_btn.audio { background: var(--neutral-dark); }
label.upload_btn input { display: none; }