:root{
  --theme:#63abe3;
  --theme2:#3b82c4;
  --bg:#f5f7fa;
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif}
body{background:var(--bg);display:flex;flex-direction:column;min-height:100vh}

/* 1. 全局居中容器 */
.container{
  width:100%;
  max-width:720px;   /* 电脑端最大宽度 */
  margin:0 auto;
  box-sizing:border-box;
}

/* 2. 媒体查询：电脑端微调 */
@media screen and (min-width:721px){
  body{background:#e9ecef;}   /* PC 背景稍微区分 */
  .card,.module-list{margin-bottom:20px;} /* 卡片间距稍大 */
}
@media (prefers-color-scheme:dark){
  @media screen and (min-width:641px){
    body{background:#0d0d0d;}
  }
}

header{
  height:56px;
  background:linear-gradient(135deg,var(--theme),var(--theme2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.1rem;
  position:sticky;
  top:0;
  z-index:9;
}
main{padding:24px 16px;flex:1}
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:24px;
}
.card h2{margin-bottom:12px;font-size:1.1rem;color:var(--theme)}
input[type=text]{
  width:100%;
  padding:14px 18px;
  border:1px solid #e5e5e5;
  border-radius:var(--radius);
  font-size:1rem;
}
.btn-index{
  width:100%;
  margin-top:16px;
  padding:14px 0;
  border:none;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--theme),var(--theme2));
  color:#fff;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}
.btn-index:active{transform:scale(.96)}
.btn{
  display:inline-block;padding:10px 20px;margin:8px 4px 0 0;border:none;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--theme),var(--theme2));color:#fff;font-size:.9rem;font-weight:600;
  text-decoration:none;text-align:center;cursor:pointer;transition:.3s
}
.btn:active{transform:scale(.96)}
.result video{width:100%;border-radius:var(--radius);margin-top:12px}
.result .dl-btn{
  display:inline-block;
  margin-top:12px;
  padding:10px 20px;
  background:var(--theme);
  color:#fff;
  border-radius:var(--radius);
  text-decoration:none;
}
.fab{
  position:fixed;
  right:20px;
  bottom:30px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--theme),var(--theme2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  font-size:1.4rem;
  cursor:pointer;
  z-index:99;
}
.hidden{display:none}
footer{
  text-align:center;
  padding:12px;
  font-size:.8rem;
  color:#888;
}

@media (prefers-color-scheme:dark){
  :root{--bg:#121212}
  .card{background:#1e1e1e;color:#eee}
  input[type=url]{background:#2a2a2a;border-color:#444;color:#eee}
}
.module-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
}
.module-item:last-child {
  border-bottom: none;
}
.module-item img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-right: 12px;
  object-fit: cover;
}
.module-item div {
  flex: 1;
}
.module-item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.module-item small {
  font-size: 0.85rem;
  color: #666;
}
.btn-small {
  background: linear-gradient(135deg,var(--theme),var(--theme2));
  color: #fff;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  text-decoration: none;
} 
.tip-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444;
}
.tip-card a {
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .tip-card p {
    color: #ccc;
  }
}
.tip{font-size:.85rem;color:#666;margin-top:12px}
textarea{width:100%;border:1px solid #e5e5e5;border-radius:var(--radius);padding:8px;font-size:.85rem;resize:vertical}