:root{
	--bg1:#0b1220;
	--bg2:#0e1b38;
	--card:rgba(255,255,255,.08);
	--card2:rgba(255,255,255,.10);
	--border:rgba(255,255,255,.12);
	--text:rgba(255,255,255,.92);
	--muted:rgba(255,255,255,.65);
	--muted2:rgba(255,255,255,.45);
	--accent:#6aa7ff;
	--accent2:#7cf0c4;
	--shadow:0 16px 60px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color:var(--text);
	background:
		radial-gradient(1000px 700px at 20% 10%, rgba(106,167,255,.28), transparent 60%),
		radial-gradient(900px 600px at 80% 30%, rgba(124,240,196,.18), transparent 55%),
		linear-gradient(160deg, var(--bg1), var(--bg2));
}

.page{
	min-height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 14px;
}

.card{
	display:flex;
	flex-direction:column;
	max-height:80vh;

	width:min(560px, 100%);
	background:linear-gradient(180deg, var(--card), rgba(255,255,255,.06));
	border:1px solid var(--border);
	border-radius:8px;
	box-shadow:var(--shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow:hidden;
}

.header{
	display:flex;
	align-items:center;
	gap:14px;
	padding:18px 18px 12px;
	flex:0 0 auto;
}

.logoWrap{
	width:56px;
	height:56px;
	border-radius:14px;
	background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
	border:1px solid rgba(255,255,255,.14);
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
}

.logoWrap img{ display:block; width:36px; height:36px; }

.brand{
	min-width:0;
	flex:1;
	display:flex;
	flex-direction:column;
	gap:4px;
}

.brandTitle{
	font-size:16px;
	font-weight:700;
	letter-spacing:.2px;
	line-height:1.2;
}

.brandSub{
	font-size:12px;
	color:var(--muted);
	line-height:1.4;
}

.content{
	padding:0 18px 16px;
	flex:1 1 auto;
	min-height:0;
	overflow:auto;
}

.notice{
	padding:12px 12px;
	border:1px solid rgba(255,255,255,.12);
	background:rgba(0,0,0,.14);
	border-radius:6px;
}

.noticeRow{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
}

.noticeText{
	font-size:13px;
	line-height:1.55;
	color:var(--muted);
}

.smallHint{
	margin-top:8px;
	font-size:12px;
	color:var(--muted2);
	line-height:1.5;
}

.progressWrap{
	margin-top:14px;
}

.progress{
	height:10px;
	border-radius:999px;
	background:rgba(255,255,255,.10);
	overflow:hidden;
	border:1px solid rgba(255,255,255,.12);
}

.progress-bar{
	height:100%;
	width:0%;
	border-radius:999px;
	background:linear-gradient(90deg, rgba(106,167,255,1), rgba(124,240,196,1));
	transition: width .5s ease;
}

.footer{
	padding:12px 20px 12px;
	border-top:1px solid rgba(255,255,255,.10);
	color:var(--muted2);
	font-size:12px;
	line-height:1.5;
	flex:0 0 auto;
}

.manual-wrap{
	margin-top:14px;
	text-align:left;
}
.manual-title{
	font-size:12px;
	color:var(--muted);
	margin:10px;
}
.manual-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	max-height:none;
	overflow:visible;
	padding-right:0;
}
.manual-item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:10px 12px;
	border:1px solid rgba(255,255,255,.14);
	border-radius:6px;
	background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
	box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.manual-item:hover{
	border-color: rgba(106,167,255,.45);
	box-shadow:0 10px 30px rgba(106,167,255,.12);
}
.manual-left{
	min-width:0;
	flex:1;
	display:flex;
	flex-direction:column;
	gap:4px;
}
.manual-link{
	color:rgba(255,255,255,.92);
	text-decoration:none;
	font-size:13px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.manual-sub{
	color:var(--muted2);
	font-size:11px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.badge{
	flex:0 0 auto;
	font-size:11px;
	padding:4px 10px;
	border-radius:999px;
	background:rgba(255,255,255,.12);
	color:rgba(255,255,255,.78);
	border:1px solid rgba(255,255,255,.14);
}
.badge.good{ background:rgba(124,240,196,.16); border-color:rgba(124,240,196,.35); color:#caffee; }
.badge.warn{ background:rgba(255,193,7,.16); border-color:rgba(255,193,7,.35); color:#ffe2a8; }
.badge.bad{ background:rgba(255,82,82,.16); border-color:rgba(255,82,82,.35); color:#ffc1c1; }

.manual-toggle{
	width:100%;
	margin-top:12px;
	padding:10px 12px;
	border-radius:6px;
	border:1px solid rgba(255,255,255,.14);
	background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
	color:rgba(255,255,255,.88);
	font-size:13px;
	cursor:pointer;
	text-align:left;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.manual-toggle:hover{
	border-color: rgba(106,167,255,.45);
	box-shadow:0 10px 30px rgba(106,167,255,.10);
}
.manual-toggle .hint{ color:rgba(255,255,255,.55); font-size:12px; }
.manual-collapsed .manual-grid{ display:none; }
.manual-collapsed .manual-title{ display:none; }

@media (min-width: 520px){
	.manual-grid{ grid-template-columns:1fr 1fr; }
}