/* ============================================================


   十七免费个人源 - 首页（应用中心）样式


   移动优先 / 深色 / 卡片网格


   ============================================================ */





:root{


  --bg:#0a0c10;


  --bg-soft:#0f1218;


  --card:#14171e;


  --card-hover:#1a1e27;


  --line:rgba(255,255,255,.07);


  --line-strong:rgba(255,255,255,.12);


  --text:#e8ecf4;


  --text-dim:#98a2b3;


  --text-mute:#667085;


  --primary:#3b82f6;


  --primary-soft:rgba(59,130,246,.14);


  --green:#22c55e;


  --amber:#f59e0b;


  --radius:16px;


  --shadow:0 8px 28px rgba(0,0,0,.45);


}





*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }





html,body{


  margin:0; padding:0;


  background:var(--bg);


  color:var(--text);


  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;


  -webkit-font-smoothing:antialiased;


  font-size:15px;


  line-height:1.5;


}





body{


  background:


    radial-gradient(900px 420px at 50% -160px, rgba(59,130,246,.16), transparent 70%),


    var(--bg);


  min-height:100vh;


}





img{ display:block; max-width:100%; }


a{ color:inherit; text-decoration:none; }





.wrap{ max-width:1080px; margin:0 auto; padding:0 16px; }





/* ---------- 顶部条 ---------- */


.topbar{


  position:sticky; top:0; z-index:50;


  backdrop-filter:saturate(180%) blur(14px);


  -webkit-backdrop-filter:saturate(180%) blur(14px);


  background:rgba(10,12,16,.78);


  border-bottom:1px solid var(--line);


}


.topbar-inner{


  max-width:1080px; margin:0 auto;


  padding:10px 16px;


  display:flex; align-items:center; gap:10px;


}


.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }


.brand-logo{


  width:34px; height:34px; border-radius:10px; flex:none;


  background:linear-gradient(135deg,#3b82f6,#8b5cf6);


  display:flex; align-items:center; justify-content:center;


  font-size:16px; color:#fff;


  box-shadow:0 4px 12px rgba(59,130,246,.35);


  overflow:hidden;


}


.brand-logo img{ width:100%; height:100%; object-fit:cover; }


.brand-name{


  font-size:16px; font-weight:700; letter-spacing:.2px;


  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;


}


.brand-sub{ font-size:11px; color:var(--text-mute); margin-top:-2px; }





.topbar-actions{ display:flex; align-items:center; gap:8px; flex:none; }


.icon-btn{


  height:34px; padding:0 12px; border-radius:10px;


  border:1px solid var(--line-strong);


  background:rgba(255,255,255,.03);


  color:var(--text); font-size:13px; font-weight:600;


  display:inline-flex; align-items:center; gap:6px;


  cursor:pointer; white-space:nowrap;


  transition:.18s;


}


.icon-btn:hover{ background:rgba(255,255,255,.07); }


.icon-btn.primary{


  background:var(--primary); border-color:transparent; color:#fff;


  box-shadow:0 6px 18px rgba(59,130,246,.3);


}


.icon-btn.primary:hover{ background:#2f74e0; }





/* ---------- Hero ---------- */


.hero{ padding:22px 0 6px; }


.hero-title{


  font-size:26px; font-weight:800; letter-spacing:-.4px;


  margin:0 0 6px; line-height:1.2;


}


.hero-desc{ color:var(--text-dim); font-size:13.5px; margin:0 0 14px; }





.hero-stats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }


.stat-pill{


  display:flex; align-items:center; gap:7px;


  padding:9px 13px; border-radius:12px;


  background:var(--card); border:1px solid var(--line);


  font-size:12.5px; color:var(--text-dim);


}


.stat-pill strong{ color:var(--text); font-size:15px; font-weight:700; }


.stat-dot{ width:6px; height:6px; border-radius:50%; background:var(--primary); }


.stat-dot.green{ background:var(--green); }


.stat-dot.amber{ background:var(--amber); }





/* 添加源按钮组 */


.add-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }


.add-btn{


  flex:1 1 140px;


  display:flex; align-items:center; gap:9px;


  padding:11px 12px; border-radius:13px;


  background:var(--card); border:1px solid var(--line);


  transition:.18s;


  cursor:pointer;


}


.add-btn:hover{ background:var(--card-hover); border-color:var(--line-strong); transform:translateY(-1px); }


.add-btn img{ width:28px; height:28px; border-radius:8px; object-fit:cover; }


.add-btn .t{ font-size:13px; font-weight:600; }


.add-btn .s{ font-size:11px; color:var(--text-mute); }





/* ---------- 搜索 ---------- */


.search-box{


  position:relative; margin-bottom:14px;


}


.search-box .fa{


  position:absolute; left:14px; top:50%; transform:translateY(-50%);


  color:var(--text-mute); font-size:14px;


}


.search-input{


  width:100%; height:46px; padding:0 44px 0 40px;


  border-radius:14px; border:1px solid var(--line);


  background:var(--card); color:var(--text);


  font-size:14.5px; outline:none;


  transition:.18s;


  appearance:none;


}


.search-input::placeholder{ color:var(--text-mute); }


.search-input:focus{ border-color:rgba(59,130,246,.55); background:#11151c; box-shadow:0 0 0 4px rgba(59,130,246,.1); }





/* ---------- 分类 chips ---------- */


.chips{


  display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px;


  scrollbar-width:none; -ms-overflow-style:none;


}


.chips::-webkit-scrollbar{ display:none; }


.chip{


  flex:none; padding:8px 14px; border-radius:11px;


  background:var(--card); border:1px solid var(--line);


  color:var(--text-dim); font-size:13px; font-weight:600;


  cursor:pointer; transition:.16s; white-space:nowrap;


}


.chip:hover{ color:var(--text); border-color:var(--line-strong); }


.chip.active{


  background:var(--primary-soft); border-color:rgba(59,130,246,.45);


  color:#93b4f7;


}


.chip .n{ opacity:.55; font-weight:500; margin-left:4px; font-size:11.5px; }





/* ---------- 应用网格 ---------- */


.app-grid{


  display:grid;


  grid-template-columns:repeat(2, minmax(0,1fr));


  gap:10px;


  padding-bottom:8px;


}


@media (min-width:560px){ .app-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; } }


@media (min-width:820px){ .app-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }





.app-card{


  position:relative;


  display:flex; align-items:center; gap:11px;


  padding:11px;


  border-radius:14px;


  background:var(--card);


  border:1px solid var(--line);


  cursor:pointer;


  transition:.18s;


  overflow:hidden;


  min-width:0;


  min-height:76px;


}


.app-card:hover{ background:var(--card-hover); border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow); }


.app-card:active{ transform:scale(.985); }





.app-icon{


  width:52px; height:52px; border-radius:13px; flex:none;


  object-fit:cover;


  background:#1c2029;


  box-shadow:0 2px 8px rgba(0,0,0,.35);


}


.app-info{ min-width:0; flex:1; }


.app-name{


  font-size:13.5px; font-weight:600; line-height:1.35;


  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;


}


.app-meta{


  margin-top:5px; display:flex; align-items:center; gap:6px;


  font-size:11.5px; color:var(--text-mute);


  white-space:nowrap; overflow:hidden;


}


.app-meta .ver{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; }


.badge{


  display:inline-flex; align-items:center;


  font-size:10px; font-weight:700; padding:1.5px 5px; border-radius:5px;


  letter-spacing:.2px; flex:none;


}


.badge.free{ background:rgba(34,197,94,.15); color:#4ade80; }


.badge.pay{ background:rgba(245,158,11,.15); color:#fbbf24; }





/* 空状态 */


.empty{


  text-align:center; padding:56px 0; color:var(--text-mute);


}


.empty .fa{ font-size:38px; opacity:.35; margin-bottom:10px; }





/* ---------- 页脚 ---------- */


.page-footer{


  margin-top:26px; padding:22px 0 34px;


  border-top:1px solid var(--line);


  text-align:center; color:var(--text-mute); font-size:12px; line-height:2;


}


.page-footer a{ color:var(--text-dim); }





/* ---------- 底部弹窗 ---------- */


.sheet-mask{


  position:fixed; inset:0; z-index:100;


  background:rgba(0,0,0,.6);


  backdrop-filter:blur(2px);


  display:none;


}


.sheet-mask.show{ display:block; animation:fadeIn .18s ease; }


@keyframes fadeIn{ from{opacity:0} to{opacity:1} }





.sheet{


  position:fixed; left:0; right:0; bottom:0; z-index:101;


  max-width:560px; margin:0 auto;


  background:var(--bg-soft);


  border-radius:22px 22px 0 0;


  border:1px solid var(--line-strong); border-bottom:0;


  box-shadow:0 -12px 48px rgba(0,0,0,.6);


  transform:translateY(100%);


  transition:transform .26s cubic-bezier(.2,.9,.3,1);


  padding-bottom:calc(18px + env(safe-area-inset-bottom));


  max-height:82vh; overflow-y:auto;


}


.sheet.show{ transform:translateY(0); }


.sheet-handle{ width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); margin:10px auto 4px; }


.sheet-body{ padding:14px 18px 6px; }





.sheet-app{ display:flex; gap:13px; align-items:flex-start; }


.sheet-app img{ width:66px; height:66px; border-radius:16px; flex:none; background:#1c2029; box-shadow:0 6px 18px rgba(0,0,0,.4); }


.sheet-app .n{ font-size:17px; font-weight:700; line-height:1.3; word-break:break-all; }


.sheet-app .m{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }


.tag{


  font-size:11px; padding:3px 8px; border-radius:7px;


  background:rgba(255,255,255,.06); color:var(--text-dim); font-weight:600;


}


.tag.ok{ background:rgba(34,197,94,.14); color:#4ade80; }


.tag.warn{ background:rgba(245,158,11,.14); color:#fbbf24; }





.sheet-desc{


  margin-top:16px; padding-top:14px;


  border-top:1px solid var(--line);


  font-size:13px; color:var(--text-dim); line-height:1.72;


  white-space:pre-wrap; word-break:break-word;


  max-height:38vh; overflow-y:auto;


}





.sheet-actions{ padding:16px 18px 4px; display:flex; flex-direction:column; gap:9px; }


.btn-lg{


  width:100%; height:48px; border:0; border-radius:14px;


  font-size:15px; font-weight:700; cursor:pointer;


  display:flex; align-items:center; justify-content:center; gap:8px;


  transition:.16s;


}


.btn-lg.main{ background:var(--primary); color:#fff; box-shadow:0 8px 22px rgba(59,130,246,.32); }


.btn-lg.main:active{ transform:scale(.98); }


.btn-lg.ghost{ background:rgba(255,255,255,.05); color:var(--text-dim); border:1px solid var(--line); }





/* 签名工具选择 */


.tools-title{ font-size:13px; color:var(--text-dim); margin:2px 0 12px; }


.tools-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }


.tool{


  display:flex; align-items:center; gap:9px;


  padding:11px; border-radius:13px;


  background:var(--card); border:1px solid var(--line);


  transition:.16s;


}


.tool:hover{ background:var(--card-hover); }


.tool img{ width:30px; height:30px; border-radius:9px; object-fit:cover; }


.tool span{ font-size:13px; font-weight:600; }





/* 返回顶部 */


.to-top{


  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));


  width:40px; height:40px; border-radius:50%;


  background:rgba(30,35,45,.9); border:1px solid var(--line-strong);


  color:var(--text-dim); display:none; align-items:center; justify-content:center;


  cursor:pointer; z-index:60; backdrop-filter:blur(8px);


}


.to-top.show{ display:flex; }





/* 公告 */


.notice{


  margin:0 0 16px; padding:12px 14px; border-radius:13px;


  background:rgba(245,158,11,.08);


  border:1px solid rgba(245,158,11,.22);


  color:#fcd34d; font-size:13px; line-height:1.6;


  display:flex; gap:9px; align-items:flex-start;


}


.notice .fa{ margin-top:2px; flex:none; }





/* ============================================================


   表单 / 卡片（activate.php、kami.php 共用）


   ============================================================ */


.hidden{ display:none !important; }





.form-card{


  background:var(--card); border:1px solid var(--line);


  border-radius:18px; padding:18px; margin-bottom:16px;


}


.form-label{ font-size:13px; color:var(--text-dim); font-weight:600; margin:0 0 8px; display:block; }


.form-label .req{ color:#f87171; margin-left:3px; }


.form-input,.form-select{


  width:100%; height:48px; padding:0 14px;


  border-radius:13px; border:1px solid var(--line);


  background:#11151c; color:var(--text); font-size:15px;


  outline:none; transition:.18s; font-family:inherit;


  appearance:none; -webkit-appearance:none;


}


.form-select{


  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");


  background-repeat:no-repeat; background-position:right 15px center;


  padding-right:38px;


}


.form-input::placeholder{ color:var(--text-mute); font-size:13.5px; }


.form-input:focus,.form-select:focus{ border-color:rgba(59,130,246,.55); box-shadow:0 0 0 4px rgba(59,130,246,.1); }


.field{ margin-bottom:16px; }


.tip{ font-size:12px; color:var(--text-mute); margin-top:7px; line-height:1.6; }


.tip code{ background:rgba(255,255,255,.06); padding:1px 5px; border-radius:5px; color:var(--text-dim); }





.alert{ border-radius:13px; padding:12px 14px; font-size:13.5px; margin-bottom:16px; display:flex; gap:9px; align-items:flex-start; }


.alert.err{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); color:#fca5a5; }


.alert.ok{ background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86efac; }





.result-card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:6px 18px; margin-bottom:16px; }


.result-row{ display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px; }


.result-row:last-child{ border-bottom:0; }


.result-row .k{ color:var(--text-mute); }


.result-row .v{ color:var(--text); font-weight:600; }


.result-row .v.ok{ color:#4ade80; }





/* 卡密展示 */


.key-box{


  background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(139,92,246,.1));


  border:1px solid rgba(59,130,246,.3);


  border-radius:16px; padding:20px; text-align:center; margin-bottom:14px;


}


.key-box .lbl{ font-size:12px; color:var(--text-dim); margin-bottom:10px; letter-spacing:.5px; }


.key-box .val{


  font-size:19px; font-weight:800; letter-spacing:1px;


  color:#93b4f7; word-break:break-all; font-family:ui-monospace,Menlo,Consolas,monospace;


}





/* 进度条 */


.progress{ height:7px; border-radius:4px; background:rgba(255,255,255,.09); overflow:hidden; margin:10px 0 8px; }


.progress-bar{ height:100%; border-radius:4px; background:linear-gradient(90deg,#3b82f6,#60a5fa); transition:width .3s; }





.btn-row{ display:flex; gap:9px; margin-bottom:16px; }


.btn-row .btn-lg{ flex:1; }





.info-list{ margin:0; padding-left:18px; font-size:13px; color:var(--text-dim); line-height:2; }











/* ============================================================


   领卡页 · 进群二维码卡片


   ============================================================ */


.wx-join{


  position:relative; background:var(--card); border:1px solid var(--line);


  border-radius:18px; padding:18px; margin-bottom:16px; overflow:hidden;


}


.wx-join::before{


  content:""; position:absolute; inset:0 0 auto 0; height:1px;


  background:linear-gradient(90deg,transparent,rgba(34,197,94,.55),transparent);


}


.wx-join-head{


  display:flex; align-items:center; gap:8px;


  font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:14px;


}


.wx-join-body{ display:flex; gap:20px; align-items:center; }





.wx-join-poster{


  position:relative; flex:0 0 auto; width:196px;


  border-radius:14px; overflow:hidden;


  border:1px solid var(--line-strong); background:#0d1016;


  cursor:zoom-in; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;


}


.wx-join-poster:hover{ transform:translateY(-2px); border-color:rgba(34,197,94,.45); box-shadow:0 10px 26px rgba(0,0,0,.45); }


.wx-join-poster img{ display:block; width:100%; height:auto; }


.wx-join-zoom{


  position:absolute; right:8px; bottom:8px;


  display:inline-flex; align-items:center; gap:4px;


  padding:3px 9px; border-radius:999px;


  background:rgba(0,0,0,.62); color:#fff; font-size:11px;


  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);


  opacity:0; transform:translateY(4px); transition:.18s ease;


}


.wx-join-poster:hover .wx-join-zoom,


.wx-join-poster:focus-visible .wx-join-zoom{ opacity:1; transform:translateY(0); }





.wx-join-info{ flex:1; min-width:0; padding-top:2px; }


.wx-join-tip{ margin:0 0 14px; font-size:13.5px; line-height:1.85; color:var(--text-dim); }


.wx-join-steps{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }


.wx-join-steps li{ display:flex; align-items:flex-start; gap:10px; font-size:12.8px; line-height:1.7; color:var(--text-mute); }


.wx-join-steps b{ color:var(--text-dim); font-weight:600; }


.wx-join-steps .n{


  flex:0 0 20px; width:20px; height:20px; margin-top:1px;


  display:grid; place-items:center; border-radius:50%;


  background:var(--primary-soft); color:#93c5fd; font-size:11px; font-weight:600;


}





@media (max-width:640px){


  .wx-join-body{ flex-direction:column; align-items:center; }


  .wx-join-poster{ width:100%; max-width:240px; }


  .wx-join-zoom{ opacity:1; transform:none; }


  .wx-join-info{ width:100%; padding-top:0; }


}





/* 二维码放大层 */


.wx-lightbox{


  position:fixed; inset:0; z-index:9999; display:none;


  align-items:center; justify-content:center; padding:24px;


  background:rgba(0,0,0,.86); cursor:zoom-out;


  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);


}


.wx-lightbox.on{ display:flex; }


.wx-lightbox img{


  max-width:min(92vw,480px); max-height:88vh; width:auto; height:auto;


  border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6);


}



/* 宽屏：加大二维码、步骤两列，填满右侧空间 */
@media (min-width:1000px){
  .wx-join-poster{ width:220px; }
  .wx-join-info{ max-width:none; }
  .wx-join-tip{ margin-bottom:16px; }
  .wx-join-steps{ grid-template-columns:1fr 1fr; gap:10px 22px; }
  .wx-join-steps li:last-child{ grid-column:1 / -1; }
}