/* ============================================================
   汇锦 · 玻璃磨砂主题层  glass.css
   ------------------------------------------------------------
   加载顺序：site.css → toolkit.css → glass.css（本文件最后）
   原则：只覆盖"面"的质感（背景 / 卡片 / 输入框 / 弹层），
        一律不动宽度、间距、栅格 —— 布局仍然由前两个文件决定。
   想退回原样式：把页面里的这一行 <link> 删掉即可。
   ============================================================ */

:root{
  /* 玻璃三要素：底料（半透明白）、边线（上亮下暗）、高光 */
  --g-fill-1: rgba(255,255,255,.075);
  --g-fill-2: rgba(255,255,255,.028);
  --g-line:   rgba(255,255,255,.13);
  --g-line-2: rgba(255,255,255,.085);
  --g-blur:   22px;
  --g-sat:    132%;
  --g-shadow: 0 22px 50px -24px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.22);
  --g-inset:  inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.035);
}

/* ---------- 一、底：要能透出颜色，磨砂才立得住 ---------- */
body{
  background:
    radial-gradient(1150px 660px at 4% -12%,  rgba(74,222,128,.15), transparent 60%),
    radial-gradient(1050px 600px at 96% -4%,  rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 720px at 16% 50%,   rgba(74,222,128,.045), transparent 66%),
    radial-gradient(860px 660px at 88% 62%,   rgba(56,189,248,.050), transparent 66%),
    radial-gradient(820px 640px at 50% 108%,  rgba(192,132,252,.10), transparent 62%),
    #080A0E;
  background-attachment: fixed;
}

/* 两团缓慢漂移的色光：玻璃的背后得有东西可糊 */
body::before,
body::after{
  content:""; position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(90px); will-change:transform;
}
body::before{
  width:46vw; height:46vw; left:-10vw; top:-12vw;
  background:radial-gradient(circle,rgba(74,222,128,.24),rgba(74,222,128,0) 68%);
  animation:gDriftA 30s ease-in-out infinite alternate;
}
body::after{
  width:40vw; height:40vw; right:-8vw; top:6vh;
  background:radial-gradient(circle,rgba(56,189,248,.22),rgba(56,189,248,0) 68%);
  animation:gDriftB 36s ease-in-out infinite alternate;
}
@keyframes gDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,5vh,0) scale(1.12)}}
@keyframes gDriftB{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-5vw,7vh,0) scale(.94)}}

/* 磨砂颗粒：让平面有"糙"的手感，否则只是半透明色块 */
html::after{
  content:""; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* 原来那层氛围光压暗一点，别和色光打架 */
.glow{opacity:.6}
.grid-bg{opacity:.55}

/* ---------- 二、玻璃面：卡片 ---------- */
.tk-card{
  position:relative;
  background:
    linear-gradient(115deg, rgba(255,255,255,.070) 0%, rgba(255,255,255,.014) 24%, rgba(255,255,255,0) 44%),
    radial-gradient(90% 70% at 102% 106%, rgba(56,189,248,.075), rgba(56,189,248,0) 62%),
    radial-gradient(130% 92% at 8% -28%, rgba(255,255,255,.125), rgba(255,255,255,0) 58%),
    linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.032) 46%, rgba(255,255,255,.016) 100%);
  border:1px solid rgba(255,255,255,.15);
  border-top-color:rgba(255,255,255,.20);
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 24px 54px -26px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(1.06);
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(1.06);
}

/* 卡片上沿的一道细高光，模拟玻璃切边 */
.tk-card::after{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 22%,rgba(255,255,255,.55) 78%,transparent);
  opacity:.45;
}

/* 账号条 / 产出清单 / 历史条目：二级玻璃，比主卡更薄更暗 */
.tk-acct{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--g-line-2);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.tk-gives{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--g-line-2);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.tk-gives .g-chip{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.10);
}
.tk-hist-item{
  background:rgba(255,255,255,.028);
  border-color:var(--g-line-2);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.tk-hist-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}

/* ---------- 三、玻璃面：输入 ---------- */
.tk-field input,
.tk-field textarea,
.tk-field select{
  background:rgba(6,8,12,.38);
  border:1px solid rgba(255,255,255,.105);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.42), inset 0 -1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.tk-field input::placeholder,
.tk-field textarea::placeholder{color:rgba(160,168,180,.55)}
.tk-field input:hover,
.tk-field textarea:hover,
.tk-field select:hover{border-color:rgba(255,255,255,.17)}
.tk-field input:focus,
.tk-field textarea:focus,
.tk-field select:focus{
  background:rgba(8,11,16,.55);
  border-color:rgba(74,222,128,.55);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35), 0 0 0 3px rgba(74,222,128,.11), 0 0 22px -6px rgba(74,222,128,.35);
}

/* ---------- 四、玻璃面：按钮与表单条 ---------- */
.tk-formbar{
  border-bottom:1px dashed rgba(255,255,255,.10);
}
.tk-formbar button,
.tk-acct button:not(.pri),
.tk-out-head button,
.tk-hist-head button{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:background .15s,border-color .15s,color .15s;
}
.tk-formbar button:hover,
.tk-acct button:not(.pri):hover,
.tk-out-head button:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border-color:rgba(74,222,128,.42);
}

/* 主按钮：实心但带一层玻璃釉 */
.btn-primary,
.tk-acct button.pri{
  background:linear-gradient(180deg,#63E896 0%,#4ADE80 52%,#3BC96C 100%);
  border:1px solid rgba(120,240,170,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px -10px rgba(74,222,128,.75);
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover,
.tk-acct button.pri:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 12px 30px -10px rgba(74,222,128,.9);
}

/* ---------- 五、牌匾：朱砂玻璃 ---------- */
.tk-plaque{
  background:
    radial-gradient(120% 90% at 18% -18%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, rgba(196,62,53,.88) 0%, rgba(154,51,43,.86) 55%, rgba(126,38,32,.90) 100%);
  border:1px solid rgba(231,203,146,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 0 0 1px rgba(231,203,146,.30),
    inset 0 -14px 30px -18px rgba(0,0,0,.75),
    0 16px 40px -14px rgba(120,24,18,.75);
  -webkit-backdrop-filter:blur(6px) saturate(150%);
  backdrop-filter:blur(6px) saturate(150%);
  text-shadow:0 1px 0 rgba(0,0,0,.42), 0 0 24px rgba(231,203,146,.20);
}

/* ---------- 六、产出区 / 常见问题 / 相关工具 ---------- */
.tk-out{border-top:1px solid rgba(255,255,255,.09)}
.tk-out-head .tag{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
.tk-out-head .tag.real{
  background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.40);
  box-shadow:0 0 16px -6px rgba(74,222,128,.7);
}
.tk-doc pre{background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.09)}
.tk-doc table{background:rgba(255,255,255,.012)}
.tk-doc th{background:rgba(255,255,255,.055)}

.tk-faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
  border:1px solid var(--g-line-2);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .16s,background .16s;
}
.tk-faq details[open],
.tk-faq details:hover{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
}

.tk-rel a{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
  border:1px solid var(--g-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 10px 26px -20px #000;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
.tk-rel a:hover{
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.026));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 16px 34px -20px rgba(0,0,0,.9);
}

/* ---------- 七、货架卡（tools.html） ---------- */
.tool-card{
  background:
    linear-gradient(115deg, rgba(255,255,255,.060) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(90% 70% at 104% 108%, rgba(56,189,248,.070), rgba(56,189,248,0) 62%),
    radial-gradient(120% 90% at 12% -26%, rgba(255,255,255,.115), rgba(255,255,255,0) 56%),
    linear-gradient(158deg, rgba(255,255,255,.080) 0%, rgba(255,255,255,.030) 48%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-top-color:rgba(255,255,255,.19);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 22px 46px -26px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  backdrop-filter:blur(18px) saturate(155%);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.tool-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 30px 60px -26px rgba(0,0,0,1), 0 0 34px -18px rgba(74,222,128,.55);
}
/* 封面上半部：让牌匾浮在一层更亮的磨砂上 */
.tool-cover{
  background:
    radial-gradient(58% 44% at 50% 60%, rgba(210,69,59,.20), rgba(210,69,59,0) 70%),
    radial-gradient(42% 32% at 50% 82%, rgba(201,163,92,.12), rgba(201,163,92,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.10));
  border-bottom:1px solid rgba(255,255,255,.075);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
}
.tool-cover .tc-cat{
  background:rgba(0,0,0,.24);
  border-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.tool-cover .tc-seal{
  background:
    radial-gradient(120% 90% at 18% -18%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, rgba(196,62,53,.90), rgba(138,43,36,.92));
  border-color:rgba(231,203,146,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 0 0 1px rgba(231,203,146,.28),
    0 12px 28px -12px rgba(120,24,18,.8);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.tool-tags span{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.10);
}
.tool-meta{border-top-color:rgba(255,255,255,.10)}
.tool-body .sum{color:rgba(180,187,198,.95)}

/* ---------- 七·B 三个自带界面的老工具页（#tp 作用域） ---------- */
#tp .intro-card,
#tp .val-card,
#tp .fit-card,
#tp .proof-card,
#tp .q-card,
#tp .stat-cell,
#tp .tier-card,
#tp .svc-card,
#tp .case-link,
#tp .tool-shell,
#tp .diagram{
  background:
    linear-gradient(115deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 44%),
    radial-gradient(90% 70% at 102% 106%, rgba(56,189,248,.06), rgba(56,189,248,0) 62%),
    linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 46%, rgba(255,255,255,.014) 100%);
  border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 20px 46px -28px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}

/* ---------- 八、导航 / 弹层 ---------- */
.nav{
  background:rgba(10,13,18,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.tk-mask{background:rgba(4,6,10,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tk-modal{
  background:
    radial-gradient(120% 90% at 12% -20%, rgba(255,255,255,.12), rgba(255,255,255,0) 58%),
    linear-gradient(160deg,rgba(28,34,44,.92),rgba(16,20,26,.94));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 30px 70px -20px #000;
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  backdrop-filter:blur(26px) saturate(160%);
}

/* ---------- 九、降级：不支持 backdrop-filter 就换成实底，别糊成一片 ---------- */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .tk-card{background:linear-gradient(158deg,#1A1F27,#12161C)}
  .tk-faq details,.tk-rel a,.tk-acct{background:#151A21}
  .tk-modal{background:#151A21}
  body::before,body::after{display:none}
}

/* ---------- 十、手机：糊层降档，省电也省帧 ---------- */
@media (max-width:720px){
  :root{--g-blur:14px}
  body::before,body::after{filter:blur(56px);animation:none;opacity:.8}
  html::after{opacity:.035}
  .tk-card{border-radius:15px}
  .tk-card::after{left:10px;right:10px;opacity:.32}
  .tk-plaque{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 0 0 1px rgba(231,203,146,.28),
      0 10px 26px -12px rgba(120,24,18,.75);
  }
}

/* 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce){
  body::before,body::after{animation:none}
}