/**
 * ================================================
 * 法律提示：本程序/代码仅限合法用途使用，您可以修改自用，请保留版权
 * ================================================
 * 使用限制：禁止用于非法用途，作者不承担任何使用责任
 * ================================================
 * Copy right 2026 网博士网络工作室， 保留所有权利。
 * ================================================
 * 官方网址: www.网博士.com   联系：QQ: 570830288
 * ================================================
 */
/*
 * 卡密工具页样式
 * /assets/css/cardstools.css
 *
 * 只服务 /template/default/cardstools.php 这一个单页（?mod=cardstools）。
 * 主色走站点的 --c1 / --c2 / --c-dir（后台「模板设置」改主色这里跟着变），
 * 不另写一套颜色；类名统一 ct- 前缀，跟其它页面不会打架。
 *
 * 断点：≥900px 输入/结果左右并排，<900px 上下堆叠；<768px 标签走两列网格，
 * 避免整页出现横向滚动条。
 */

/* ---------- 外壳 ---------- */
.ct-wrap{max-width:1180px;margin:0 auto;padding:22px 16px 60px;}

/* ---------- 顶部横幅 ---------- */
.ct-hero{
  position:relative;overflow:hidden;padding:26px 26px 24px;border-radius:18px;
  color:#fff;background:linear-gradient(var(--c-dir,135deg),var(--c1,#E4393C),var(--c2,#FF7A5C));
  box-shadow:0 16px 38px rgba(var(--c1-rgb,228,57,60),.22);
}
/* 右上角那团浅色圆只是装饰，不要吃鼠标事件 */
.ct-hero::after{
  content:"";position:absolute;top:-90px;right:-70px;width:250px;height:250px;
  border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none;
}
.ct-hero__t{margin:0;font-size:22px;line-height:1.3;font-weight:700;}
.ct-hero__s{margin:8px 0 0;font-size:13px;line-height:1.7;opacity:.9;}
.ct-hero__tip{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  padding:6px 12px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.18);
}
.ct-hero__tip b{font-weight:600;}

/* ---------- 功能标签 ----------
   原来是 999px 胶囊 + 9px 15px 内边距 + 13px 字，十个排下来一大片，太抢戏；
   改成小圆角（8px）的小方块：内边距收到 6px 12px、字号小一号 12.5px，
   整颗从 36px 高降到 30px 上下，选中态仍然用主色实心区分。 */
.ct-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
.ct-tab{
  border:0;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;line-height:1.4;
  color:#5A6472;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ct-tab:hover{color:var(--c1,#E4393C);}
.ct-tab.is-active{
  color:#fff;background:linear-gradient(var(--c-dir,135deg),var(--c1,#E4393C),var(--c2,#FF7A5C));
  box-shadow:0 4px 10px rgba(var(--c1-rgb,228,57,60),.22);
}
/*
 * 字号得另起一条、用「父容器 + 自己」两级选择器才生效：
 * home-refresh.css 里有 .fk-page button{font-size:inherit}（权重 0,1,1），
 * 比这里单个类的 .ct-tab / .ct-mini / .ct-btn（0,1,0）高，
 * 会把字号拉回继承来的 16px——之前那三个按钮看着「字格外大」就是这个原因。
 */
.ct-tabs .ct-tab{font-size:12.5px;}          /* 功能标签：小一号 */
.ct-box__act .ct-mini{font-size:11.5px;}     /* 复制 / 回填输入 / 清空：小一号 */
.ct-foot .ct-btn{font-size:14px;}            /* 开始执行 / 重置：回到这份样式表本来写的 14px */

/* ---------- 每个工具的面板 ---------- */
.ct-panels{margin-top:16px;}
.ct-panel{
  display:none;padding:20px;border-radius:16px;background:#fff;
  box-shadow:0 6px 22px rgba(16,24,40,.07);border:1px solid #EDF1F5;
}
.ct-panel.is-active{display:block;animation:ctIn .22s ease;}
@keyframes ctIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ct-hint{
  margin:0 0 16px;padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.7;
  color:#5F6B78;background:var(--c1-paper,#FEF3F3);border:1px solid var(--c1-line,#F7D9DA);
}

/* 参数行：一列放不下自动换行，窄屏每行一个 */
.ct-opts{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.ct-field{flex:1 1 200px;min-width:0;}
.ct-field--sm{flex:0 1 132px;}
.ct-field > span{display:block;margin-bottom:6px;font-size:12px;color:#7A8593;}
.ct-field input[type=text],.ct-field input[type=number]{
  width:100%;height:40px;padding:0 12px;font-size:14px;color:#2B3440;
  border:1px solid #DCE3EA;border-radius:10px;background:#fff;box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ct-field input:focus{outline:0;border-color:var(--c1,#E4393C);box-shadow:0 0 0 3px rgba(var(--c1-rgb,228,57,60),.12);}
.ct-field input::placeholder{color:#AEB7C2;}

/* 多选：数字 / 小写 / 大写 */
.ct-opts > .ct-checks{flex:1 1 100%;}   /* 勾选组单独占一行，跟上面的输入框不对齐更好读 */
.ct-checks{display:flex;flex-wrap:wrap;gap:10px 18px;padding-bottom:10px;}
.ct-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#5A6472;cursor:pointer;user-select:none;}
.ct-check input{
  width:16px;height:16px;margin:0;accent-color:var(--c1,#E4393C);cursor:pointer;flex:0 0 auto;
}

/* ---------- 输入 / 结果 ---------- */
.ct-io{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px;}
/* 只有一个框的面板（随机生成、第二个结果框）：占满整行，留出一半空着不好看 */
.ct-io--single{grid-template-columns:1fr;margin-top:14px;}
.ct-box{border:1px solid #E4EAF0;border-radius:12px;overflow:hidden;background:#FBFCFD;}
.ct-box__hd{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F5F8FB;border-bottom:1px solid #E4EAF0;}
.ct-box__hd h3{margin:0;font-size:13px;font-weight:600;color:#3B4553;}
.ct-box__meta{margin-left:auto;font-size:12px;color:#8A94A0;white-space:nowrap;}
.ct-box__act{display:flex;gap:6px;margin-left:auto;}
/* 复制 / 回填输入 / 清空：跟着标签一起小一号（12px → 11.5px），
   圆角也收成 6px，跟上面小圆角的标签一个调子 */
.ct-mini{
  padding:3px 8px;font-size:11.5px;line-height:1.5;color:#6B7583;background:#fff;
  border:1px solid #DCE3EA;border-radius:6px;cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.ct-mini:hover{color:var(--c1,#E4393C);border-color:var(--c1-line,#F7D9DA);}
.ct-box textarea{
  display:block;width:100%;min-height:190px;padding:12px;border:0;resize:vertical;
  font-family:Consolas,Menlo,"Courier New",monospace;font-size:13px;line-height:1.7;
  color:#2B3440;background:transparent;box-sizing:border-box;
}
.ct-box textarea:focus{outline:0;}
.ct-box textarea::placeholder{color:#B7BFC9;font-family:inherit;}

/* ---------- 底部按钮 ---------- */
.ct-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;}
.ct-btn{
  min-width:104px;height:40px;padding:0 18px;border:1px solid #DCE3EA;border-radius:10px;cursor:pointer;
  font-size:14px;color:#5A6472;background:#fff;transition:all .18s ease;
}
.ct-btn:hover{border-color:var(--c1-line,#F7D9DA);color:var(--c1,#E4393C);}
.ct-btn--primary{
  border:0;color:#fff;font-weight:500;
  background:linear-gradient(var(--c-dir,135deg),var(--c1,#E4393C),var(--c2,#FF7A5C));
  box-shadow:0 8px 18px rgba(var(--c1-rgb,228,57,60),.24);
}
.ct-btn--primary:hover{color:#fff;filter:brightness(1.05);box-shadow:0 10px 22px rgba(var(--c1-rgb,228,57,60),.3);}
.ct-foot__note{margin-left:auto;font-size:12px;color:#98A2AD;}

/* ---------- 提示气泡 ---------- */
.ct-toast{
  position:fixed;left:50%;bottom:38px;z-index:9999;transform:translate(-50%,14px);
  padding:10px 18px;border-radius:10px;font-size:13px;color:#fff;
  background:rgba(38,44,54,.94);box-shadow:0 12px 30px rgba(16,24,40,.28);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.ct-toast.is-show{opacity:1;transform:translate(-50%,0);}
.ct-toast.is-err{background:rgba(206,54,60,.96);}

/* ---------- 自适应 ---------- */
@media (max-width:900px){
  .ct-io{grid-template-columns:1fr;}   /* 输入/结果改成上下 */
  .ct-box textarea{min-height:150px;}
}
@media (max-width:767px){
  .ct-wrap{padding:16px 12px 44px;}
  .ct-hero{padding:20px 18px;border-radius:14px;}
  .ct-hero__t{font-size:19px;}
  .ct-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}  /* 两列网格，不横滑 */
  /* 手机上十个标签走两列网格，纵向留多一点（7px）手指才点得准，字号跟电脑端一致 */
  .ct-tab{padding:7px 8px;text-align:center;}
  .ct-panel{padding:14px;border-radius:14px;}
  .ct-field,.ct-field--sm{flex:1 1 100%;}
  .ct-btn{flex:1 1 auto;min-width:0;}
  .ct-foot__note{margin-left:0;flex:1 1 100%;}
}