/* ====== 52 短网址生成 · 葡萄紫 + 电光蓝 · 链接卡片风 ====== */
.tsk.lnk{
  --tsk-bg:#f6f4fd;
  --tsk-card:#ffffff;
  --tsk-card-2:#faf8ff;
  --tsk-ink:#1d1733;
  --tsk-sub:#5d5479;
  --tsk-faint:#918aa6;
  --tsk-line:#e7e1f6;
  --tsk-line-2:#f1ecfb;
  --tsk-brand:#7048e8;
  --tsk-brand-2:#3b82f6;
  --tsk-brand-soft:#f1ecff;
  --tsk-brand-ink:#5f3dc4;
  --tsk-ok:#178a5a;
  --tsk-ok-soft:#e6f8f0;
  --tsk-bad:#d63b5f;
  --tsk-bad-soft:#fdebed;
  --tsk-shadow-sm:0 1px 2px rgba(29,23,51,.05),0 8px 18px rgba(29,23,51,.05);
  --tsk-shadow:0 2px 8px rgba(29,23,51,.08),0 22px 50px rgba(29,23,51,.10);
  background:
    radial-gradient(680px 300px at 92% -10%,rgba(112,72,232,.12),transparent 62%),
    radial-gradient(520px 260px at -8% 6%,rgba(59,130,246,.10),transparent 60%),
    var(--tsk-bg);
}
:root[data-theme="dark"] .tsk.lnk{
  --tsk-bg:#120f1d;
  --tsk-card:#1c1830;
  --tsk-card-2:#171327;
  --tsk-ink:#efeafd;
  --tsk-sub:#b5accc;
  --tsk-faint:#847b9c;
  --tsk-line:#31304b;
  --tsk-line-2:#262338;
  --tsk-brand:#b197fc;
  --tsk-brand-2:#74b4ff;
  --tsk-brand-soft:rgba(177,151,252,.13);
  --tsk-brand-ink:#c9b6ff;
  --tsk-ok:#4cd9a0;
  --tsk-ok-soft:rgba(76,217,160,.13);
  --tsk-bad:#ff8fa8;
  --tsk-bad-soft:rgba(255,143,168,.13);
  --tsk-shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 18px rgba(0,0,0,.3);
  --tsk-shadow:0 2px 8px rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.38);
  background:
    radial-gradient(680px 300px at 92% -10%,rgba(177,151,252,.14),transparent 62%),
    radial-gradient(520px 260px at -8% 6%,rgba(116,180,255,.10),transparent 60%),
    var(--tsk-bg);
}

.lnk-hero{display:grid;grid-template-columns:minmax(0,1fr) 394px;gap:30px;padding:30px 0 24px;align-items:stretch;}
.lnk-hero-l{display:flex;flex-direction:column;}
.lnk-hero-l>.tsk-hs{flex:1 1 auto;}
.lnk-hero-l .tsk-h1 b{
  background:linear-gradient(96deg,var(--tsk-brand),var(--tsk-brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lnk-sec-sub{font-size:12px;font-weight:600;color:var(--tsk-faint);}

/* ---- 生成面板 ---- */
.lnk-panel{
  background:var(--tsk-card);
  border:1px solid var(--tsk-line);
  border-radius:16px;
  box-shadow:var(--tsk-shadow);
  overflow:hidden;
}
.lnk-panel-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  background:linear-gradient(120deg,var(--tsk-brand-soft),transparent);
  border-bottom:1px solid var(--tsk-line);
}
.lnk-panel-hd b{font-size:13px;letter-spacing:.03em;}
.lnk-panel-hd i{
  font-style:normal;
  font:700 9.5px/1 var(--tsk-num);
  letter-spacing:.18em;
  color:var(--tsk-brand-ink);
  padding:4px 7px;
  border:1px solid var(--tsk-line);
  border-radius:4px;
}
.lnk-panel-body{padding:14px 18px 16px;}
.lnk-panel-body label{
  display:block;
  margin-bottom:5px;
  font-size:11.5px;
  font-weight:800;
  color:var(--tsk-sub);
}
.lnk-ta,
.lnk-inp{
  width:100%;
  border:1px solid var(--tsk-line);
  border-radius:9px;
  background:var(--tsk-card-2);
  color:var(--tsk-ink);
  outline:none;
  transition:border-color .16s,box-shadow .16s;
}
.lnk-ta{
  padding:10px 12px;
  font:600 12.5px/1.8 var(--tsk-num);
  resize:vertical;
}
.lnk-inp{
  height:36px;
  padding:0 11px;
  font:600 12.5px/36px var(--tsk-num);
}
.lnk-inp:focus,.lnk-ta:focus{
  border-color:var(--tsk-brand);
  box-shadow:0 0 0 3px var(--tsk-brand-soft);
}
.lnk-ta::placeholder,.lnk-inp::placeholder{color:var(--tsk-faint);}
.lnk-hint{margin-top:6px;font-size:10.5px;line-height:1.7;color:var(--tsk-faint);}
.lnk-two{
  display:grid;
  grid-template-columns:1fr 96px;
  gap:10px;
  margin-top:11px;
}
.lnk-len{margin-top:12px;}
.lnk-len>span{
  display:block;
  margin-bottom:5px;
  font-size:11.5px;
  font-weight:800;
  color:var(--tsk-sub);
}
.lnk-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.lnk-len-btn{
  padding:7px 0;
  border:1px solid var(--tsk-line);
  border-radius:7px;
  background:var(--tsk-card-2);
  color:var(--tsk-sub);
  font:700 11.5px/1.3 var(--tsk-num);
  cursor:pointer;
  transition:.15s;
}
.lnk-len-btn:hover{border-color:var(--tsk-brand);color:var(--tsk-brand-ink);}
.lnk-len-btn.on{
  background:var(--tsk-brand-soft);
  border-color:var(--tsk-brand);
  color:var(--tsk-brand-ink);
}
.lnk-err{
  margin-top:11px;
  padding:9px 11px;
  border-radius:8px;
  background:var(--tsk-bad-soft);
  border:1px solid rgba(214,59,95,.24);
  color:var(--tsk-bad);
  font-size:11.5px;
  line-height:1.75;
}
.lnk-acts{display:flex;gap:8px;margin-top:14px;}
.lnk-acts .tsk-btn-main{
  flex:1;
  background:linear-gradient(120deg,var(--tsk-brand),var(--tsk-brand-2));
  color:#fff;
}
.lnk-ghost{color:var(--tsk-sub);}
.lnk-foot{
  margin-top:11px;
  padding-top:10px;
  border-top:1px dashed var(--tsk-line);
  font-size:10.5px;
  line-height:1.7;
  color:var(--tsk-faint);
}

/* ---- 结果 ---- */
.lnk-result{
  margin:2px 0 30px;
  padding:20px 22px 22px;
  background:var(--tsk-card);
  border:1px solid var(--tsk-line);
  border-radius:16px;
  box-shadow:var(--tsk-shadow);
}
.lnk-result-hd{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:14px;
  border-bottom:1px dashed var(--tsk-line);
}
.lnk-result-t{font-size:15px;font-weight:800;margin:0;}
.lnk-result-t span{
  display:inline-block;
  min-width:24px;
  padding:1px 7px;
  border-radius:99px;
  background:var(--tsk-brand-soft);
  color:var(--tsk-brand-ink);
  font:800 12px/1.6 var(--tsk-num);
  text-align:center;
}
.lnk-result-acts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;}
.lnk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(318px,1fr));
  gap:12px;
  margin-top:16px;
}
.lnk-item{
  position:relative;
  padding:16px 17px 14px;
  border:1px solid var(--tsk-line);
  border-radius:13px;
  background:var(--tsk-card-2);
  overflow:hidden;
}
.lnk-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--tsk-brand),var(--tsk-brand-2));
}
.lnk-item-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.lnk-code{
  font:800 15px/1.4 var(--tsk-num);
  letter-spacing:.08em;
  color:var(--tsk-brand-ink);
  word-break:break-all;
}
.lnk-mini{
  padding:4px 9px;
  border:1px solid var(--tsk-line);
  border-radius:6px;
  background:var(--tsk-card);
  color:var(--tsk-sub);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.lnk-mini:hover{border-color:var(--tsk-brand);color:var(--tsk-brand-ink);}
.lnk-body{
  display:grid;
  grid-template-columns:1fr 78px;
  gap:12px;
  margin-top:11px;
  align-items:start;
}
.lnk-short{
  font:700 12px/1.65 var(--tsk-num);
  color:var(--tsk-ink);
  word-break:break-all;
}
.lnk-origin{margin-top:7px;font-size:11px;line-height:1.65;color:var(--tsk-faint);word-break:break-all;}
.lnk-origin b{font-weight:700;color:var(--tsk-sub);}
.lnk-qr{
  width:78px;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--tsk-line);
  border-radius:9px;
  padding:5px;
  overflow:hidden;
}
.lnk-qr.is-fail{
  font-size:9px;
  line-height:1.4;
  color:#b0455c;
  text-align:center;
  padding:6px;
}
.lnk-qr canvas,.lnk-qr img{display:block;width:100% !important;height:100% !important;}
.lnk-item-foot{
  display:flex;
  gap:7px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px dashed var(--tsk-line);
}
.lnk-warn{
  margin-top:13px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--tsk-brand-soft);
  font-size:11.5px;
  line-height:1.8;
  color:var(--tsk-sub);
}

/* ---- 规则表 ---- */
.lnk-table-wrap{
  overflow-x:auto;
  border:1px solid var(--tsk-line);
  border-radius:12px;
  background:var(--tsk-card);
  box-shadow:var(--tsk-shadow-sm);
}
.lnk-table{width:100%;min-width:620px;border-collapse:collapse;}
.lnk-table th,.lnk-table td{
  padding:11px 15px;
  text-align:left;
  font-size:12.5px;
  line-height:1.75;
  border-bottom:1px solid var(--tsk-line-2);
}
.lnk-table thead th{
  background:var(--tsk-card-2);
  font:800 10.5px/1.4 var(--tsk-num);
  letter-spacing:.08em;
  color:var(--tsk-faint);
}
.lnk-table tbody tr:last-child td{border-bottom:0;}
.lnk-k{font-weight:800;color:var(--tsk-ink);white-space:nowrap;}
.lnk-pill{
  display:inline-block;
  padding:2px 9px;
  border-radius:99px;
  background:var(--tsk-brand-soft);
  color:var(--tsk-brand-ink);
  font:700 11px/1.7 var(--tsk-num);
}

/* ---- 部署代码 ---- */
.lnk-deploy{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:11px;}
.lnk-dep-card{
  border:1px solid var(--tsk-line);
  border-radius:12px;
  background:var(--tsk-card);
  box-shadow:var(--tsk-shadow-sm);
  overflow:hidden;
}
.lnk-dep-hd{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:12px 15px;
  border-bottom:1px solid var(--tsk-line);
  background:var(--tsk-card-2);
}
.lnk-dep-hd b{font-size:12.5px;}
.lnk-dep-hd span{font-size:10.5px;color:var(--tsk-faint);text-align:right;}
.lnk-dep-card pre{
  margin:0;
  padding:13px 15px 15px;
  overflow-x:auto;
  background:transparent;
  font:600 11.5px/1.8 var(--tsk-num);
  color:var(--tsk-sub);
  white-space:pre;
}

/* ---- 场景 ---- */
.lnk-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:11px;}
.lnk-case{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  padding:16px 17px;
  background:var(--tsk-card);
  border:1px solid var(--tsk-line);
  border-radius:12px;
  box-shadow:var(--tsk-shadow-sm);
}
.lnk-case>span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--tsk-brand-soft);
  font-size:18px;
}
.lnk-case b{font-size:13px;}
.lnk-case p{margin-top:4px;font-size:12px;line-height:1.8;color:var(--tsk-sub);}

@media (max-width:900px){
  .lnk-hero{grid-template-columns:1fr;gap:22px;}
  .lnk-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .lnk-acts{flex-wrap:wrap;}
  .lnk-acts .tsk-btn-main{flex:1 1 100%;}
  .lnk-two{grid-template-columns:1fr;}
  .lnk-result-acts{margin-left:0;width:100%;}
  .lnk-body{grid-template-columns:1fr 68px;}
  .lnk-qr{width:68px;height:68px;}
}
@media print{
  .lnk-hero-r,.lnk-result-acts{display:none;}
  .tsk.lnk{background:#fff;}
}
