:root{
  --bg:#f4f6fb; --bg2:#e9edf6; --card:#ffffff; --card2:#f6f8fd;
  --line:#dde3f0; --txt:#20263a; --sub:#5a6378; --dim:#8b93a9;
  --acc:#3b6bff; --acc2:#6d4dff; --ok:#0d9f6e; --warn:#d97706; --err:#dc2626;
  --mono:"Cascadia Code",Consolas,"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:linear-gradient(165deg,#f8faff 0%,#eef2fb 45%,#e5eaf5 100%);color:var(--txt);
  font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;font-size:14px;line-height:1.6}
/* 背景美化：固定光晕层，让单调的渐变背景更通透有层次 */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 750px at 88% -12%, rgba(109,77,255,.22), transparent 62%),
    radial-gradient(950px 680px at -8% 18%, rgba(59,107,255,.17), transparent 58%),
    radial-gradient(900px 700px at 15% 112%, rgba(13,159,110,.10), transparent 60%),
    radial-gradient(700px 500px at 60% 45%, rgba(13,110,255,.08), transparent 65%);
  background-attachment:fixed}
a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
header{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;
  box-shadow:0 1px 10px rgba(43,56,94,.07)}
.logo{width:38px;height:38px;flex:none;border-radius:6px;object-fit:contain;background:transparent}
header h1{font-size:18px;font-weight:700}
header .sub{font-size:12px;color:var(--sub)}
nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
nav button,nav a{border:1px solid var(--line);background:transparent;color:var(--sub);padding:8px 16px;
  border-radius:10px;cursor:pointer;font-size:13px;transition:.15s;font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center}
nav button:hover,nav a:hover{color:var(--txt);border-color:var(--acc);text-decoration:none}
nav button.active{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(79,124,255,.3)}
main{max-width:1080px;margin:0 auto;padding:24px}
.view{display:none} .view.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;
  box-shadow:0 2px 12px rgba(43,56,94,.05)}
.panel h2{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel h2 .tag{font-size:11px;color:var(--acc);border:1px solid var(--line);background:var(--bg2);
  padding:2px 8px;border-radius:20px;font-weight:500}
textarea{width:100%;background:#fbfcfe;border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:12px;font-family:var(--mono);font-size:13px;resize:vertical;
  min-height:120px;outline:none;transition:border .15s}
textarea:focus{border-color:var(--acc)}
textarea.mono-lg{min-height:180px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btn{border:none;padding:10px 22px;border-radius:10px;cursor:pointer;font-size:14px;font-family:inherit;
  font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:8px}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  box-shadow:0 4px 14px rgba(79,124,255,.28)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:#ffffff;border:1px solid var(--line);color:var(--sub)}
.btn.ghost:hover{color:var(--acc);border-color:var(--acc)}
.btn.small{padding:6px 12px;font-size:12px;font-weight:500}
.btn:disabled{opacity:.5;cursor:not-allowed}
select{background:#ffffff;border:1px solid var(--line);color:var(--txt);padding:9px 12px;
  border-radius:10px;font-size:13px;outline:none;font-family:inherit}
input[type=text]{background:#fbfcfe;border:1px solid var(--line);color:var(--txt);padding:9px 12px;
  border-radius:10px;font-size:13px;outline:none;font-family:var(--mono);width:220px}
input:focus{border-color:var(--acc)}
.hint{font-size:12px;color:var(--dim);margin-top:8px}
/* 结果区 */
.result{display:none} .result.show{display:block;animation:fade .25s ease}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;
  font-weight:600;margin-right:6px}
.badge.type{background:rgba(109,77,255,.10);color:#5b42e6;border:1px solid rgba(109,77,255,.35)}
.badge.ok{background:rgba(13,159,110,.10);color:var(--ok);border:1px solid rgba(13,159,110,.3)}
.badge.err{background:rgba(220,38,38,.08);color:var(--err);border:1px solid rgba(220,38,38,.3)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin:8px 0 14px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.kv .cell{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.kv .cell .k{font-size:11px;color:var(--dim)}
.kv .cell .v{font-size:16px;font-weight:700;color:var(--txt)}
.kv .cell .v.acc{color:var(--acc)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px 0}
.tabs button{background:none;border:none;color:var(--dim);padding:8px 16px;cursor:pointer;font-size:13px;
  border-bottom:2px solid transparent;font-family:inherit}
.tabs button.active{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.pre-wrap{background:#fbfcfe;border:1px solid var(--line);border-radius:10px;padding:14px;
  font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;word-break:break-all;max-height:420px;overflow:auto}
.list-group{margin-top:10px}
.list-group h4{font-size:12px;color:var(--sub);margin:12px 0 6px;display:flex;align-items:center;gap:8px}
.list-group h4 .cnt{background:var(--acc2);color:#fff;font-size:10px;border-radius:10px;padding:1px 8px}
.list-item{background:#ffffff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;
  font-family:var(--mono);font-size:12px;margin-bottom:6px;word-break:break-all;
  display:flex;justify-content:space-between;gap:10px;align-items:center}
.list-item .u{flex:1}
.mini-btn{background:#fbfcfe;border:1px solid var(--line);color:var(--sub);border-radius:6px;
  padding:2px 8px;cursor:pointer;font-size:11px;white-space:nowrap}
.mini-btn:hover{color:var(--acc);border-color:var(--acc)}
.warnings{background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.32);color:var(--warn);
  border-radius:10px;padding:10px 14px;font-size:13px;margin-top:12px}
.error-box{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.3);color:var(--err);
  border-radius:10px;padding:10px 14px;font-size:13px;margin-top:12px}
.spin{display:none;width:16px;height:16px;border:2px solid rgba(32,38,58,.22);border-top-color:#20263a;
  border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.btn.loading .spin{display:inline-block}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#ffffff;color:var(--txt);
  border:1px solid var(--line);padding:10px 22px;border-radius:10px;font-size:13px;z-index:99;
  box-shadow:0 10px 30px rgba(43,56,94,.16);display:none}
/* 加密面板 */
.keygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.keygrid label{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.out-box{display:flex;gap:8px;margin-top:10px;align-items:center}
.out-box textarea{min-height:80px;flex:1}
/* 配置制作 */
.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:880px){.builder-grid{grid-template-columns:1fr}}
.builder-grid .panel{margin-bottom:0}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.field textarea{min-height:76px}
.badge.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.on{background:var(--ok)} .dot.off{background:var(--err)}
footer{text-align:center;color:var(--dim);font-size:12px;padding:20px;border-top:1px solid var(--line);margin-top:20px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* 社群卡片：突出可点击，强化群号 / 公众号名 */
.community-row{
  display:flex;justify-content:center;align-items:stretch;gap:14px;flex-wrap:wrap
}
.community-card {
  padding:10px 18px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#ffffff;
  border:1.5px solid var(--line);
  box-shadow:0 2px 8px rgba(43,56,94,.06);
  text-align:left
}
.community-card:hover {
  transform:translateY(-2px);
  border-color:var(--acc);
  box-shadow:0 6px 18px rgba(79,124,255,.18)
}
.community-card:active { transform:translateY(0) }
.community-card .ico{ font-size:20px;line-height:1 }
.community-card .community-text{ display:flex;flex-direction:column;gap:1px }
.community-card .label{ font-size:11px;color:var(--sub);font-weight:500 }
.community-card .value{ font-size:16px;font-weight:800;letter-spacing:.5px;line-height:1.15 }
/* 配色区分：QQ 蓝 / 微信 绿 */
.community-card.qq .value{ color:var(--acc) }
.community-card.wechat .value{ color:var(--ok) }
.community-card.wechat:hover{
  border-color:var(--ok);
  box-shadow:0 6px 18px rgba(13,159,110,.18)
}
.divider {
  display:inline-block;
  width:1px;
  height:14px;
  background:var(--line);
  margin:0 10px;
  vertical-align:middle
}
/* Easy文字样式 */
.easy-text {
  margin-top:14px;
  display:block;
  font-size:12px;
  color:var(--dim)
}

/* ============ 响应式适配（手机 / 平板） ============ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.btn,nav button,nav a,.mini-btn,.tabs button,.community-card{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* 触控设备：加大点按目标，防误触 */
@media (pointer:coarse){
  .btn{min-height:44px}
  nav button,nav a{min-height:44px;padding:10px 14px}
  .tabs button{min-height:44px}
  .mini-btn{min-height:44px;padding:6px 12px}
  select,input[type=text]{min-height:44px}
  .community-card{padding:10px 14px;min-height:44px}
  .list-item{gap:12px}
}

/* 平板及以下 */
@media (max-width:1024px){
  header{padding:12px 18px}
  main{padding:18px}
}

/* 手机（竖屏） */
@media (max-width:768px){
  header{flex-wrap:wrap;gap:10px;
    padding-top:calc(12px + env(safe-area-inset-top,0px));
    padding-left:max(14px, env(safe-area-inset-left,0px));
    padding-right:max(14px, env(safe-area-inset-right,0px))}
  header h1{font-size:16px}
  nav{flex:1 1 100%;order:3;margin-left:0;gap:8px;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  nav::-webkit-scrollbar{display:none}
  nav button,nav a{flex:none}
  main{padding:14px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .panel{padding:16px;border-radius:12px}
  textarea,input[type=text],select{font-size:16px} /* 防 iOS 聚焦自动缩放 */
  .keygrid input[type=text]{width:100%}
  .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;flex:1}
  .list-item{flex-wrap:wrap}
  .toast{width:max-content;max-width:calc(100vw - 32px);text-align:center;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  footer{display:flex;flex-direction:column;align-items:center;gap:8px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .divider{display:none}
  .pre-wrap{max-height:60vh}
}

/* 小屏手机：主要操作整行铺满 */
@media (max-width:640px){
  .keygrid{grid-template-columns:minmax(0,1fr)}
  .row .btn{flex:1 1 100%;justify-content:center;white-space:nowrap}
  .row select{flex:1 1 100%;width:100%}
  .out-box{flex-direction:column;align-items:stretch}
  .out-box .btn{width:100%;justify-content:center}
  .builder-grid{gap:12px}
}