/* ==========================================================================
   base.css —— 两个页面共用的设计变量与基础件
   apply(填写资料) / result(查询结果) 都用这一套
   ========================================================================== */

:root{
	/* 品牌色 —— 跟 index.html 的 logo 用同一组值,不要各写各的 */
	--brand-blue:#5bcefa;
	--brand-pink:#f5a9b8;
	--brand-gradient:linear-gradient(135deg,#5bcefa 50%,#f5a9b8 50%);

	/* 小尺寸元素用的版本。
	   50%/50% 那条硬接缝是为大块的 header 和小方 logo 设计的;
	   放到按钮/标签这种「文字居中」的窄元素上,斜线会正正横穿文字。
	   把接缝推到 70%,文字就落在纯色那半边了。 */
	--brand-gradient-sm:linear-gradient(135deg,#5bcefa 70%,#f5a9b8 70%);

	/* 压在这两个浅色上的文字颜色。
	   白色在 #5bcefa / #f5a9b8 上对比度只有 1.7:1,远不够;
	   深墨色有 10:1 以上,而且跨过接缝也不会有对比度断崖。 */
	--on-brand:#1c2430;

	/* 中性色 */
	--bg:#f4f6f8;
	--card:#ffffff;
	--ink:#1f2430;
	--ink-2:#5b6472;
	--ink-3:#98a1af;
	--line:#e8ebef;
	--field:#f4f6f8;

	--danger:#d9534f;
	--warn:#c9911a;
	--ok:#2f9e63;

	--radius-card:14px;
	--radius-field:10px;
	--shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.05);

	/* 触控最小尺寸 —— 低于这个值手指点不准 */
	--tap:44px;

	--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}

html{
	/* 顶栏用 fixed 时不被系统状态栏压住 */
	-webkit-text-size-adjust:100%;
}

body{
	font-family:var(--font);
	background:var(--bg);
	color:var(--ink);
	font-size:15px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	/* 手机上点按钮不要出现灰块 */
	-webkit-tap-highlight-color:transparent;
	/* 底部刘海/手势条留白 */
	padding-bottom:env(safe-area-inset-bottom);
}

/* --------------------------------------------------------------------------
   顶部品牌条
   -------------------------------------------------------------------------- */
.brandbar{
	background:var(--brand-gradient);
	/* 顶部刘海区留白 */
	padding:calc(16px + env(safe-area-inset-top)) 18px 16px;
	color:#fff;
}

.brandbar h1{
	margin:0;
	font-size:19px;
	font-weight:700;
	letter-spacing:.01em;
	/* 渐变底色上白字要一点投影才清晰 */
	text-shadow:0 1px 2px rgba(0,0,0,.12);
}

.brandbar p{
	margin:3px 0 0;
	font-size:13px;
	opacity:.92;
	text-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* --------------------------------------------------------------------------
   页面容器
   -------------------------------------------------------------------------- */
.page{
	max-width:520px;
	margin:0 auto;
	padding:14px 14px calc(28px + env(safe-area-inset-bottom));
}

.card{
	background:var(--card);
	border-radius:var(--radius-card);
	box-shadow:var(--shadow);
	padding:18px 16px;
}

/* --------------------------------------------------------------------------
   表单字段
   -------------------------------------------------------------------------- */
.field{margin-bottom:16px}

.field:last-child{margin-bottom:0}

.field > label{
	display:block;
	font-size:13px;
	font-weight:600;
	color:var(--ink-2);
	margin-bottom:7px;
}

/* 必填星号 */
.req{color:var(--danger);font-style:normal;margin-left:2px}

/* 字段下方的提示行(报错或说明都在这里,不跳动) */
.hint{
	margin:6px 0 0;
	min-height:17px;
	font-size:12.5px;
	line-height:17px;
	color:var(--ink-3);
}

.hint.bad{color:var(--danger);font-weight:600}
.hint.good{color:var(--ok)}

input[type="text"],
input[type="number"],
textarea{
	display:block;
	width:100%;
	border:1.5px solid transparent;
	background:var(--field);
	color:var(--ink);
	font-family:inherit;
	/* 16px 是 iOS 上「聚焦不放大页面」的临界值,不要改小 */
	font-size:16px;
	border-radius:var(--radius-field);
	padding:0 13px;
	height:var(--tap);
	transition:border-color .15s, background .15s;
	-webkit-appearance:none;
	appearance:none;
}

textarea{
	height:auto;
	min-height:96px;
	padding:11px 13px;
	line-height:1.6;
	resize:vertical;
}

input::placeholder,
textarea::placeholder{color:#b3bac4}

input:focus,
textarea:focus{
	outline:none;
	border-color:var(--brand-blue);
	background:#fff;
}

/* 提交校验没过时把框标红 */
input.bad,
textarea.bad{
	border-color:var(--danger);
	background:#fef7f7;
}

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn{
	display:block;
	width:100%;
	min-height:var(--tap);
	border:none;
	border-radius:var(--radius-field);
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
	transition:opacity .15s, transform .06s;
}

.btn:active{transform:translateY(1px)}

.btn:disabled{opacity:.55;cursor:default;transform:none}

.btn.primary{
	background:var(--brand-gradient-sm);
	color:var(--on-brand);
	height:50px;
}

/* --------------------------------------------------------------------------
   全屏遮罩
   -------------------------------------------------------------------------- */
.overlay{
	display:none;
	position:fixed;
	inset:0;
	background:rgba(255,255,255,.82);
	-webkit-backdrop-filter:blur(2px);
	backdrop-filter:blur(2px);
	z-index:9999;
	align-items:center;
	justify-content:center;
}

.overlay.on{display:flex}

.overlay-box{
	background:#fff;
	border-radius:12px;
	box-shadow:0 8px 30px rgba(16,24,40,.14);
	padding:18px 22px;
	display:flex;
	align-items:center;
	gap:11px;
	font-size:14px;
	color:var(--ink-2);
}

/* 纯 CSS 转圈,不用 gif */
.spinner{
	width:17px;
	height:17px;
	border:2.5px solid var(--line);
	border-top-color:var(--brand-blue);
	border-radius:50%;
	animation:spin .7s linear infinite;
	flex:0 0 auto;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion:reduce){
	.spinner{animation-duration:2s}
	.btn:active{transform:none}
}

/* --------------------------------------------------------------------------
   空状态 / 错误状态
   -------------------------------------------------------------------------- */
.state{
	background:var(--card);
	border-radius:var(--radius-card);
	box-shadow:var(--shadow);
	padding:38px 20px;
	text-align:center;
	color:var(--ink-3);
	font-size:14px;
}

.state strong{
	display:block;
	color:var(--ink-2);
	font-size:15px;
	font-weight:600;
	margin-bottom:6px;
}

.state.error strong{color:var(--danger)}