/* Material Design 3 全局样式 */
:root{
  --bg-image:/images/bg.webp;
  /* MD3 Light scheme：深绿色主题 */
  --md-primary:#0F766E; --md-on-primary:#FFFFFF;
  --md-secondary:#4A6358; --md-on-secondary:#FFFFFF;
  --md-surface:#FFFBFE; --md-on-surface:#1C1B1F;
  --md-surface-variant:#E0E3E0; --md-on-surface-variant:#4F5B55;
  --md-outline:#7D8E85; --md-error:#B3261E; --md-on-error:#FFFFFF;
}
html[data-theme="dark"]{
  /* MD3 Dark scheme：深绿色主题 */
  --md-primary:#2CA39A; --md-on-primary:#FFFFFF;
  --md-secondary:#5A7A6D; --md-on-secondary:#FFFFFF;
  --md-surface:#1C1B1F; --md-on-surface:#E6E1E5;
  --md-surface-variant:#3F4A45; --md-on-surface-variant:#C9D6CF;
  --md-outline:#8EA19A; --md-error:#F2B8B5; --md-on-error:#601410;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Roboto, system-ui, -apple-system, "Segoe UI", Arial, "Helvetica Neue", sans-serif;
  margin:0;
  /* 回退背景固定路径 */
  background-image: radial-gradient(1200px 600px at 20% -10%, rgba(12,57,44,.20) 0%, rgba(12,57,44,0) 55%), url('/images/bg.webp');
  /* 主设置：变量路径 */
  background-image: radial-gradient(1200px 600px at 20% -10%, rgba(12,57,44,.20) 0%, rgba(12,57,44,0) 55%), url(var(--bg-image));
  background-size:cover; background-position:center; background-attachment:fixed;
  background-color:var(--md-surface);
  color:var(--md-on-surface);
}

/* 顶部应用栏 */
header{
  background:var(--md-primary);
  color:var(--md-on-primary);
  padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  box-shadow:0 2px 4px rgba(0,0,0,.10);
}
header h1{margin:0; font-size:22px; letter-spacing:.2px}
header .actions{display:flex; gap:8px; align-items:center}
header a{color:var(--md-on-primary); text-decoration:none; opacity:.92}
header a:hover{opacity:1; text-decoration:underline}
/* 品牌返回首页链接（MD State Layer） */
header h1 a{
  color:var(--md-on-primary); text-decoration:none; cursor:pointer;
  position:relative; display:inline-block; border-radius:12px; padding:4px 8px; margin:-4px -8px;
  transition:transform .12s ease, color .12s ease;
}
header h1 a::after{
  content:""; position:absolute; inset:0; border-radius:12px; background:currentColor;
  opacity:0; transform:scale(.98); transition:opacity .16s ease, transform .16s ease;
}
header h1 a:hover::after{opacity:.08; transform:scale(1)}
header h1 a:active::after{opacity:.12; transform:scale(.98)}
header h1 a:hover{transform:translateY(-1px)}
header h1 a:active{transform:translateY(0)}
header h1 a:hover{text-decoration:none}

/* 主容器 */
main.container{max-width:1000px; margin:26px auto; padding:0 16px}

/* 卡片（Surface） */
.card{
  background:var(--md-surface);
  border:1px solid var(--md-surface-variant);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  padding:18px; margin-bottom:18px; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.10)}
.card h2{margin:0 0 12px 0; font-size:28px; color:var(--md-on-surface)}

/* 网格与单元 */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.item{border:1px solid var(--md-surface-variant); border-radius:12px; padding:14px; background:var(--md-surface)}
.item .title{font-weight:700; margin-bottom:6px; color:var(--md-on-surface)}
.item .price{color:var(--md-primary); margin-bottom:8px; font-weight:600}

/* 行布局与表单 */
.row{display:flex; gap:10px; flex-wrap:wrap}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=search],select{
  flex:1 1 280px; height:44px; padding:10px 14px;
  border:1px solid var(--md-outline); border-radius:12px; background:var(--md-surface);
  color:var(--md-on-surface);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input[type=file]{
  flex:1 1 280px; padding:8px; border:1px dashed var(--md-outline); border-radius:12px; background:var(--md-surface);
  color:var(--md-on-surface-variant);
}
input:hover,select:hover{
  border-color:var(--md-surface-variant);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
input::placeholder,textarea::placeholder{color:var(--md-on-surface-variant)}
html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=password],html[data-theme="dark"] input[type=number],html[data-theme="dark"] input[type=email],html[data-theme="dark"] input[type=search],html[data-theme="dark"] select{background:var(--md-surface); color:var(--md-on-surface); border-color:var(--md-outline)}
html[data-theme="dark"] input[type=file]{background:var(--md-surface); border-color:var(--md-outline)}
input:focus,select:focus{
  outline:none; border-color:var(--md-primary);
  box-shadow:0 0 0 3px rgba(15,118,110,.22), 0 2px 6px rgba(0,0,0,.06);
}
textarea{
  flex:1 1 100%; min-height:100px; padding:12px 14px;
  border:1px solid var(--md-outline); border-radius:12px; background:var(--md-surface);
  color:var(--md-on-surface); resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.row .btn{ height:44px; padding:0 16px; border-radius:12px }
input:disabled,select:disabled,textarea:disabled{
  opacity:.75; background:var(--md-surface-variant); color:var(--md-on-surface-variant);
  cursor:not-allowed; border-color:var(--md-surface-variant);
}

/* 选择框下拉箭头 */
select{
  appearance:auto; -webkit-appearance:auto; -moz-appearance:auto;
  background-image:none; /* 使用系统原生箭头，避免多箭头重叠 */
  background-color:var(--md-surface);
  padding-right:12px; height:44px; line-height:1.2; cursor:pointer;
}
/* 不再隐藏 IE/旧 Edge 的箭头，统一使用原生箭头 */
html[data-theme="dark"] select{ background-image:none }

/* 复选框容器 */
.checkbox{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--md-outline); border-radius:12px; background:var(--md-surface); color:var(--md-on-surface)}
.checkbox input{width:18px; height:18px; accent-color:var(--md-primary)}

/* 按钮（Filled/Secondary/Danger/Outlined） */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  background:var(--md-primary); color:var(--md-on-primary);
  border:1px solid transparent; border-radius:12px; padding:10px 16px; cursor:pointer; 
  box-shadow:none; transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,118,110,.18)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:var(--md-secondary); color:var(--md-on-secondary)}
.btn.danger{background:var(--md-error); color:var(--md-on-error)}
.btn.outlined{background:transparent; color:var(--md-primary); border-color:var(--md-outline)}

/* Ripple */
.btn .ripple{position:absolute; border-radius:50%; transform:translate(-50%, -50%); pointer-events:none; width:10px; height:10px; background:rgba(255,255,255,.5); animation:ripple .6s ease-out}
@keyframes ripple{from{opacity:.7; width:10px; height:10px} to{opacity:0; width:240px; height:240px}}

/* 文本与辅助 */
.muted{color:var(--md-on-surface-variant)}
.error{background:#FDE7E9; color:#B3261E; padding:10px 12px; border-radius:12px; border:1px solid #F2B8B5; margin-bottom:12px}

/* 上传进度条 */
.progress{width:100%; height:10px; background:var(--md-surface-variant); border-radius:999px; overflow:hidden}
.progress-bar{height:100%; width:0%; background:linear-gradient(90deg, var(--md-primary), #5DB8AD); transition:width .12s ease}

/* 链接 */
a{color:var(--md-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* 页脚 */
footer{font-size:13px}

/* 首页 Hero 居中与美化（更新） */
/* Section 尺寸与 article 间距调整 */
/* 首页 hero 卡片更宽：输入区更舒展 */
section.card.hero{ max-width:820px }

/* 特性区：更宽容器与更大的卡片间距（更舒适） */
section.grid{ max-width:980px; gap:24px }
section.grid .feature{ padding:20px }

/* 宽屏下固定三列，匹配三篇 article */
@media (min-width: 960px){
  section.grid{ grid-template-columns:repeat(3, 1fr) }
}

/* 修复 Hero 居中规则（补齐选择器） */
section.card.hero{
  text-align:center;
  max-width:820px;
  margin:0 auto;
  margin-bottom:28px;
  min-height:calc(100vh - 200px);
  display:grid;
  align-content:center;
  justify-items:center;
  padding:26px 22px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.1) blur(4px);
}
html[data-theme="dark"] section.card.hero{background:rgba(28,27,31,.50)}

/* Hero 输入与按钮胶囊风格 */
section.card.hero .row{justify-content:center}
section.card.hero input[type=text]{
  flex:0 1 560px; min-width:360px; height:48px; font-size:16px;
  border-radius:999px; padding:0 18px;
}
section.card.hero .btn{height:48px; padding:0 22px; border-radius:999px}
section.card.hero p.muted{max-width:640px; margin:6px auto 12px}

/* 首页特性区块：使用 article.feature（居中且填充网格） */
section.grid{max-width:980px; margin:0 auto; justify-items:stretch; align-items:stretch; text-align:center}
section.grid .feature{border:1px solid var(--md-surface-variant); border-radius:14px; padding:20px; background:var(--md-surface); text-align:center; width:100%; height:100%; display:flex; flex-direction:column}
section.grid .feature h3{margin:0 0 6px; font-size:16px; color:var(--md-on-surface)}
section.grid .feature p{margin:0; color:var(--md-on-surface-variant)}

/* 首页特性区块居中（统一宽度与文本对齐，并拉伸填充网格） */
section.grid{ max-width:980px; margin:0 auto; justify-items:stretch; align-items:stretch; text-align:center }
section.grid .item{ text-align:left; }
section.grid .item .title{ font-size:16px; }

/* 全局毛玻璃与间距优化 */
/* Header 毛玻璃（保持品牌色） */
header{background:rgba(15,118,110,.82); backdrop-filter:saturate(1.1) blur(6px); -webkit-backdrop-filter:saturate(1.1) blur(6px)}

/* Card 毛玻璃与统一间距 */
.card{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.1) blur(6px); -webkit-backdrop-filter:saturate(1.1) blur(6px);
  border:1px solid rgba(0,0,0,.08);
  padding:22px; margin-bottom:22px;
}
html[data-theme="dark"] .card{background:rgba(28,27,31,.55); border-color:rgba(255,255,255,.08)}

/* 首页特性卡片（feature）毛玻璃与间距，确保等宽等高 */
section.grid .feature{
  background:rgba(255,255,255,.66);
  backdrop-filter:saturate(1.1) blur(4px); -webkit-backdrop-filter:saturate(1.1) blur(4px);
  border:1px solid rgba(0,0,0,.06);
  padding:20px;
  width:100%; height:100%; display:flex; flex-direction:column;
}
html[data-theme="dark"] section.grid .feature{background:rgba(28,27,31,.45); border-color:rgba(255,255,255,.06)}

/* 全局栅格与行间距优化 */
.grid{gap:16px}
.row{gap:12px}

/* 居中工具类（水平/垂直/文本） */
.center-block{ display:block; margin-left:auto; margin-right:auto }
.center-content{ display:flex; align-items:center; justify-content:center }
.center-grid{ display:grid; place-items:center }
.text-center{ text-align:center }
/* 视窗垂直居中辅助容器 */
.vh-center{ min-height:60vh; display:grid; place-items:center }

main.container{margin:22px auto}