/* ============================================================
   Rude Tools · Aurora 设计系统
   所有页面共用。改这里 = 全站生效。
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#08090B;
  --surface:rgba(255,255,255,.045);
  --surface-hi:rgba(255,255,255,.075);
  --stroke:rgba(255,255,255,.08);
  --stroke-hi:rgba(255,255,255,.16);
  --text:#F2F3F5;
  --text-2:rgba(242,243,245,.62);
  --text-3:rgba(242,243,245,.36);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:520ms;

  --max:1240px;
  --pad:40px;

  --sans:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
/* hidden 属性必须真的藏住。这里很多元素自己带 display:flex/inline-flex，
   会盖掉 UA 样式的 [hidden]{display:none}，导致「藏起来」的按钮照样显示。 */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* 吸顶导航会盖住锚点目标，留出导航高度 */
[id]{scroll-margin-top:92px}
/* 点「分类」直接跳到筛选条；多留一点空间，让上面的「工具库」标题也露出来，用户知道自己在哪 */
#chips{scroll-margin-top:196px}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
::selection{background:rgba(255,255,255,.16)}
a{color:inherit}
button{font-family:inherit}

/* 横向滚动的窄条：保留滚动能力，但别露出原生滚动条 */
.no-bar{scrollbar-width:none;-ms-overflow-style:none}
.no-bar::-webkit-scrollbar{display:none;height:0;width:0}

/* 不想被折行拆开的小词组（格式名、数字+单位、带斜杠的并列项） */
.nb{white-space:nowrap}

/* 键盘可达性：焦点环 */
:focus-visible{
  outline:2px solid rgba(120,160,255,.85);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Aurora 背景层 ---------- */
.aurora{
  position:fixed; inset:-20% -10% auto -10%; height:120vh;
  pointer-events:none; z-index:0;
  filter:blur(90px) saturate(150%);
  opacity:.55;
}
.aurora i{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen;
  animation:drift 26s var(--ease) infinite alternate;
}
.aurora i:nth-child(1){width:44vw;height:44vw;left:6%;top:2%;background:radial-gradient(circle,#3B5BFF,transparent 68%);}
.aurora i:nth-child(2){width:38vw;height:38vw;left:48%;top:-8%;background:radial-gradient(circle,#00E0C6,transparent 68%);animation-delay:-8s}
.aurora i:nth-child(3){width:40vw;height:40vw;left:72%;top:18%;background:radial-gradient(circle,#FF4D8D,transparent 70%);animation-delay:-15s;opacity:.7}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4vw,6vh,0) scale(1.14)}
}

/* 网格帷幕 */
.grid-veil{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 78%);
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  padding-top:calc(18px + env(safe-area-inset-top, 0px));
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  /* 滚动后导航要盖住下面的内容。用不透明底色（和页面背景同色），
     半透明会从卡片亮色处透出一块直角矩形，看着像渲染错误。
     backdrop-filter 保留作加分项，底子本身已经够实。 */
  background:var(--bg);
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  border-bottom-color:var(--stroke);
}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.02em;font-size:16px;text-decoration:none;color:var(--text)}
/* 页头 logo 用原图裁出的透明人物，不套底框。
   人物主体是深色，在近黑页头上会糊掉，所以在身后补一层极淡的白色柔光弧
   ——用 ::before 画，不参与布局、不挡点击。 */
.brand-mark{
  position:relative;width:36px;height:36px;flex:none;
}
.brand-mark::before{
  content:"";position:absolute;inset:-6px -4px;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 46%, rgba(255,255,255,.16), rgba(255,255,255,.05) 46%, transparent 70%);
  pointer-events:none;
}
.brand-mark::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:url("../logo.png") center/contain no-repeat;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45));
}
.nav-links{display:flex;gap:6px}
.nav-links a{
  color:var(--text-2);text-decoration:none;font-size:13.5px;
  padding:7px 13px;border-radius:9px;
  transition:color .25s,background .25s;
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-cta{
  font-size:13px;font-weight:500;padding:8px 16px;border-radius:9px;
  background:#F2F3F5;color:#08090B;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(255,255,255,.6)}

/* ---------- 容器 ---------- */
.wrap{position:relative;z-index:10;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- 区块标题 ---------- */
.sect-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;margin:118px 0 38px;
}
.sect-head h2{
  font-size:clamp(26px,3.4vw,40px);font-weight:600;
  letter-spacing:-.035em;line-height:1.1;
}
/* ch 是数字「0」的宽度，中文汉字约 1em ≈ 2ch。
   原来写 44ch，等于只给 22 个汉字，句子必然在词中间断（「每个工具都无 / 需安装」）。
   改成 em，34em 容得下整句。 */
.sect-head p{margin-top:11px;font-size:14px;color:var(--text-3);max-width:34em;line-height:1.6}
.sect-index{
  font-size:11px;letter-spacing:.16em;color:var(--text-3);
  text-transform:uppercase;padding-bottom:9px;white-space:nowrap;
}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.chip{
  font-size:13px;cursor:pointer;
  color:var(--text-2);background:var(--surface);
  border:1px solid var(--stroke);border-radius:100px;
  padding:8px 17px;
  transition:color .28s,background .28s,border-color .28s,transform .28s var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--stroke-hi);transform:translateY(-1px)}
.chip.on{background:#F2F3F5;color:#08090B;border-color:#F2F3F5;font-weight:500}
.chip span{opacity:.42;margin-left:7px;font-size:11.5px}
.chip.on span{opacity:.5}

/* ---------- 工具卡片 ---------- */
.grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
}
.card{
  position:relative;overflow:hidden;
  padding:24px 22px 22px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--stroke);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  min-height:196px;
  transition:transform .5s var(--ease),border-color .4s,background .4s,box-shadow .5s;
  transform:translateY(0);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 62%);
  opacity:0;transition:opacity .45s;pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--stroke-hi);
  background:var(--surface-hi);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.card:hover::before{opacity:1}

.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.card-icon{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
  transition:transform .5s var(--ease);
}
.card:hover .card-icon{transform:scale(1.06) rotate(-3deg)}
.card-arrow{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  opacity:0;transform:translateX(-6px) translateY(4px);
  transition:opacity .4s,transform .45s var(--ease);
}
.card:hover .card-arrow{opacity:1;transform:translateX(0) translateY(0)}

.card-name{
  font-size:16px;font-weight:600;letter-spacing:-.018em;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.card-name em{
  font-style:normal;font-size:11px;font-weight:400;
  color:var(--text-3);letter-spacing:.01em;
}
/* 已上线标记：只有真正能跑的工具才带 */
.card-live{
  font-size:9.5px;font-weight:600;letter-spacing:.08em;
  padding:2.5px 7px;border-radius:5px;
  color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  transform:translateY(-2px);
}
.card-desc{
  margin-top:9px;font-size:13.2px;line-height:1.62;
  color:var(--text-2);
  flex:1;
}
.card-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.card-tags i{
  font-style:normal;font-size:10.5px;letter-spacing:.03em;
  color:var(--text-3);padding:3.5px 8px;border-radius:6px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
}

/* ---------- 按钮 ---------- */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;padding:13px 26px;border-radius:12px;
  text-decoration:none;font-weight:500;cursor:pointer;border:none;
  transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s;
}
.btn-primary{background:#F2F3F5;color:#08090B}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(255,255,255,.55)}

/* 不可用态：不要用 opacity 压白色实心块，那样会变成一块脏灰。
   改成透明底 + 描边，视觉上是“安静的灰按钮”，不是坏掉的色块。 */
.btn-primary[aria-disabled="true"],
.btn-primary:disabled{
  background:transparent;
  border:1px solid var(--stroke-hi);
  color:var(--text-3);
  box-shadow:none;
  cursor:not-allowed;
  transform:none !important;
}
.btn-primary[aria-disabled="true"]:hover,
.btn-primary:disabled:hover{
  box-shadow:none;background:transparent;
}
.btn-ghost{color:var(--text);border:1px solid var(--stroke-hi);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}

/* ---------- 空态 ---------- */
.empty{
  grid-column:1/-1;text-align:center;padding:70px 0;
  color:var(--text-3);font-size:14px;
}
.empty b{color:var(--text);font-weight:500}

/* ---------- 页脚 ---------- */
footer{
  position:relative;z-index:10;
  margin-top:96px;padding:44px 0 60px;
  border-top:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-3);
}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:var(--text-3);text-decoration:none;transition:color .25s}
footer a:hover{color:var(--text)}
/* 页脚里用 button 表达“还没做完的链接”，外观与 a 一致 */
footer nav button{
  appearance:none;background:none;border:none;padding:0;cursor:pointer;
  font-size:inherit;font-family:inherit;color:var(--text-3);
  transition:color .25s;
}
footer nav button:hover{color:var(--text)}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- 页面转场 ---------- */
.page-fade{
  animation:pageIn .55s var(--ease) both;
}
@keyframes pageIn{
  from{opacity:0}
  to{opacity:1}
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  :root{--pad:22px}
  .nav{
    padding:15px var(--pad);
    padding-top:calc(15px + env(safe-area-inset-top, 0px));
  }
  .nav-links{display:none}
  .sect-head{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   输入弹层（替代原生 prompt / confirm）
   ============================================================ */
.rt-modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:22px;
  background:rgba(4,5,7,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease);
}
.rt-modal.in{opacity:1}

.rt-modal-card{
  width:100%;max-width:380px;
  padding:26px 26px 20px;
  border-radius:var(--r-lg);
  background:rgba(19,21,25,.97);
  border:1px solid var(--stroke-hi);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.9);
  transform:translateY(10px) scale(.985);
  transition:transform .22s var(--ease);
}
.rt-modal.in .rt-modal-card{transform:none}

.rt-modal-card h3{
  font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--text);
}
.rt-modal-card p{
  margin-top:9px;font-size:13px;line-height:1.7;color:var(--text-3);
}

.rt-modal-input{
  margin-top:18px;width:100%;
  padding:12px 14px;border-radius:var(--r-sm);
  font-family:inherit;font-size:13.5px;color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke-hi);
  outline:none;transition:border-color .18s,background .18s;
}
.rt-modal-input::placeholder{color:var(--text-3)}
.rt-modal-input:focus{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.075);
}
.rt-modal-input.bad{
  border-color:rgba(255,90,95,.55);
  background:rgba(255,90,95,.06);
}

.rt-modal-row{
  margin-top:22px;display:flex;gap:9px;justify-content:flex-end;
}
.rt-modal-row button{
  font-family:inherit;font-size:13px;cursor:pointer;
  padding:10px 18px;border-radius:var(--r-sm);
  border:1px solid var(--stroke-hi);
  background:transparent;color:var(--text-2);
  transition:color .18s,background .18s,border-color .18s;
}
.rt-modal-row button:hover{color:var(--text);background:rgba(255,255,255,.06)}
.rt-modal-row .rt-modal-ok{
  background:#F2F2F4;color:#0B0C0E;border-color:transparent;font-weight:500;
}
.rt-modal-row .rt-modal-ok:hover{background:#fff;color:#0B0C0E}
.rt-modal-row .rt-modal-ok.danger{background:#FF5A5F;color:#fff;border-color:transparent}
.rt-modal-row .rt-modal-ok.danger:hover{background:#FF7378;color:#fff}