/* ============================================================
   讯捷工作台 · 前台样式 v6「清新自然绿」
   设计语言：自然光渐变氛围 / 玻璃拟态 / 嫩绿投影 / 微动效
   ============================================================ */
:root{
  --ink:#1c2a1e; --text:#33443a; --muted:#6a7a5e; --faint:#9fb08e;
  --bg:#f1f8e7; --card:#ffffff;
  --border:rgba(78,146,60,.12); --border-strong:rgba(78,146,60,.24);
  --brand:#78a35a; --brand-2:#6b914f; --brand-3:#5d8844;
  --grad:linear-gradient(135deg,#8fbd68 0%,#78a35a 55%,#5d8844 100%);
  --grad-deep:linear-gradient(120deg,#2f6b1e 0%,#3f8c26 52%,#5d8844 100%);
  /* 四色点缀（圆角图标 / 标签统一派生） */
  --c-leaf:#78a35a; --c-teal:#3fb68b; --c-green:#10b981; --c-amber:#f59e0b;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(52,96,42,.05),0 8px 24px rgba(80,140,60,.08);
  --shadow-hover:0 6px 14px rgba(80,140,60,.10),0 22px 48px rgba(100,150,70,.18);
  --shadow-grad:0 8px 22px rgba(120,163,90,.40);
  --ring:0 0 0 4px rgba(120,163,90,.16);
  --amber:#f59e0b; --danger:#dc2626;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);font-size:14px;line-height:1.65;min-height:100vh;
  background:
    linear-gradient(180deg,#eef6e2 0%,#f2f9e7 36%,#eef7dc 70%,#e7f3d3 100%) fixed,
    var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  position:relative;overflow-x:hidden;
}
/* 自然光氛围背景：多层缓慢漂移的柔光（嫩绿 / 青绿 / 草绿） */
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(14px)}
body::before{
  width:820px;height:820px;top:-320px;right:-200px;
  background:
    radial-gradient(circle at 38% 40%,rgba(143,189,104,.26),transparent 60%),
    radial-gradient(circle at 72% 68%,rgba(63,182,139,.16),transparent 62%);
  animation:auroraA 36s ease-in-out infinite alternate;
}
body::after{
  width:760px;height:760px;top:30%;left:-300px;
  background:
    radial-gradient(circle at 42% 42%,rgba(120,163,90,.22),transparent 60%),
    radial-gradient(circle at 78% 30%,rgba(150,196,110,.16),transparent 62%);
  animation:auroraB 42s ease-in-out infinite alternate;
}
@keyframes auroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,60px) scale(1.12)}}
@keyframes auroraB{from{transform:translate(0,0) scale(1.05)}to{transform:translate(60px,80px) scale(.95)}}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(120,163,90,.26)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b6d59b,#cbe0b1);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a9d88a,#c6e6a4);background-clip:content-box;border:2px solid transparent}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes starPop{50%{transform:scale(1.3) rotate(-12deg)}}
@keyframes favIn{0%{opacity:0;transform:translateY(-8px) scale(.98);background:linear-gradient(135deg,rgba(120,163,90,.16),rgba(150,196,110,.14))}
  60%{background:linear-gradient(135deg,rgba(120,163,90,.10),rgba(150,196,110,.07))}
  100%{opacity:1;transform:none;background:transparent}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===== A 区：顶栏（深邃极光渐变） ===== */
.site-header{position:sticky;top:0;z-index:100;overflow:hidden;background:var(--grad-deep)}
.site-header::before{content:"";position:absolute;width:560px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);top:-210px;right:-80px;pointer-events:none}
.site-header::after{content:"";position:absolute;width:520px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,196,110,.46),transparent 62%);bottom:-220px;left:-90px;pointer-events:none}
.site-header .header-inner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.header-inner{position:relative;max-width:1500px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:700;color:#fff;
  letter-spacing:-.02em;white-space:nowrap;transition:all .3s var(--ease);flex:0 0 auto;
  padding:7px 20px 7px 7px;border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand:hover{background:#fff;color:#2f6b1e;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
/* 品牌即首页：当前在首页时白底反色高亮 */
.brand.active{background:#fff;color:#2f6b1e;border-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.20)}
.brand:hover .brand-name,.brand.active .brand-name{text-shadow:none}
.brand-name{text-shadow:0 1px 12px rgba(20,46,10,.35)}
/* Logo 位：白绿釉面玻璃方块 + 绿色闪电（品牌徽标），点击胶囊即回首页 */
.brand .logo{position:relative;width:38px;height:38px;border-radius:12px;overflow:hidden;
  background:linear-gradient(145deg,#ffffff 0%,#f1fce1 46%,#c9e8a4 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(72,116,36,.24),
    0 5px 14px rgba(37,74,18,.40),0 0 0 1px rgba(255,255,255,.10),0 0 18px rgba(190,240,128,.42);
  display:flex;align-items:center;justify-content:center;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.brand .logo::before{content:"";position:absolute;top:-15%;bottom:-15%;left:0;width:55%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  transform:translateX(-230%) skewX(-18deg);animation:logoShine 5.2s var(--ease) infinite;pointer-events:none}
.brand .logo-bolt{position:relative;display:block;width:21px;height:21px;
  filter:drop-shadow(0 1px 1px rgba(63,100,20,.28));
  animation:logoFloat 4.8s ease-in-out infinite}
.brand:hover .logo{transform:rotate(-4deg) scale(1.05);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(72,116,36,.24),
    0 7px 18px rgba(37,74,18,.42),0 0 26px rgba(208,250,140,.75)}
.brand:hover .logo-bolt{animation:logoPop .5s var(--ease)}
@keyframes logoShine{0%,55%{transform:translateX(-230%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes logoPop{40%{transform:scale(1.18)}}
/* 横排搜索：水平居中于顶栏（窄屏由媒体查询改为第二行通栏） */
.top-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:440px;max-width:46vw;
  display:flex;align-items:center;gap:5px;height:38px;padding:0 5px 0 13px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}
.top-search:focus-within{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.10),0 8px 22px rgba(20,46,10,.22)}
.top-search .ts-ico{font-size:13px;opacity:.92;flex:0 0 auto}
.top-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:13px;letter-spacing:.01em}
.top-search input::placeholder{color:rgba(255,255,255,.72)}
.top-search button{flex:0 0 auto;border:none;border-radius:999px;background:#fff;color:#2f6b1e;height:28px;padding:0 16px;
  font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.16);transition:all .28s var(--ease)}
.top-search button:hover{background:var(--grad);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.24)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap}
/* 右侧：收藏密码 + 退出合一胶囊 */
.user-combo{display:flex;align-items:center;max-width:270px;gap:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:999px;padding:4px 5px 4px 14px;
  transition:background .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.user-combo:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.38);box-shadow:0 6px 16px rgba(20,46,10,.20)}
.user-combo .uc-ico{flex:0 0 auto;font-size:13px;line-height:1;opacity:.95;margin-right:6px}
.user-combo .uc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:11px;padding-right:11px;
  border-right:1px solid rgba(255,255,255,.24);
  font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.01em}
.user-combo .uc-exit{flex:0 0 auto;border:none;border-radius:999px;height:28px;padding:0 15px;
  background:rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:all .28s var(--ease)}
.user-combo .uc-exit:hover{background:#fff;color:#2f6b1e;transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.20)}
.user-combo .uc-exit:active{transform:translateY(0)}
.btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:600;
  transition:all .28s var(--ease);white-space:nowrap;border:1px solid transparent;cursor:pointer}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{background:#fff;color:#2f6b1e;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* ===== 主体：B 区 + 工具区 ===== */
.site-body{max-width:1500px;margin:0 auto;padding:28px 24px 44px;display:flex;gap:22px;align-items:flex-start}
/* B 区固定不动（≥901px）：fixed 定位 + 跟随 sticky 顶栏高度，任何滚动下收藏卡/统计卡都钉在原位 */
.site-sidebar{width:248px;flex:0 0 248px}
@media(min-width:901px){
  .site-sidebar{position:fixed;top:calc(var(--header-h,72px) + 10px);left:max(24px,calc(50% - 726px));z-index:50;
    max-height:calc(100vh - var(--header-h,72px) - 18px);overflow-y:auto;scrollbar-width:thin}
  .site-main{margin-left:270px}
}
.site-main{flex:1;min-width:0}
.scard{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;animation:fadeUp .6s var(--ease) both}
.scard-h{padding:15px 16px;font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(248,252,243,.92),rgba(255,255,255,0))}
.scard-h>span:first-child{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;
  background:linear-gradient(135deg,#d5e7bb,#eefae0);box-shadow:inset 0 0 0 1px rgba(120,163,90,.18),0 3px 8px rgba(120,163,90,.16)}
.scard-h .fav-star{border-radius:9px!important;background:linear-gradient(135deg,#fde68a,#fbbf24)!important;
  box-shadow:inset 0 0 0 1px rgba(217,119,6,.30),0 3px 9px rgba(245,158,11,.35)!important}
.scard-b{padding:10px}
.side-nav a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:13px;font-size:14.5px;color:#54704a;
  margin:3px 0;transition:background .26s var(--ease),color .26s var(--ease),transform .26s var(--ease),box-shadow .26s var(--ease)}
.side-nav a:hover{background:#edf6e2;color:var(--brand);transform:translateX(3px)}
.side-nav a.active{background:linear-gradient(135deg,rgba(120,163,90,.15),rgba(150,196,110,.12));color:#2f6b1e;font-weight:600;
  box-shadow:inset 3px 0 0 var(--brand-2)}
.side-nav .cnt{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;
  background:#eef5e6;border-radius:999px;padding:1px 8px;transition:.26s var(--ease)}
.side-nav a:hover .cnt,.side-nav a.active .cnt{background:#fff;color:#2f6b1e}
/* B 区：收藏条目共用的圆角方块图标 */
.side-nav .fi{width:38px;height:38px;border-radius:11px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;font-size:17px;
  background:linear-gradient(135deg,#c3dcaa,#e3f6d0);box-shadow:inset 0 0 0 1px rgba(120,163,90,.18),0 3px 8px rgba(120,163,90,.20);
  transition:transform .26s var(--ease)}
.side-nav a:hover .fi{transform:scale(1.08) rotate(-2deg)}
.side-nav a.active .fi{box-shadow:inset 0 0 0 1px rgba(120,163,90,.26),0 4px 12px rgba(120,163,90,.26)}
.side-nav .fav-item:nth-child(4n+2) .fi{background:linear-gradient(135deg,#bce8d4,#9fdcc0);box-shadow:inset 0 0 0 1px rgba(63,182,139,.22),0 3px 8px rgba(63,182,139,.20)}
.side-nav .fav-item:nth-child(4n+3) .fi{background:linear-gradient(135deg,#a5cb86,#86b766);box-shadow:inset 0 0 0 1px rgba(16,185,129,.22),0 3px 8px rgba(16,185,129,.20)}
.side-nav .fav-item:nth-child(4n) .fi{background:linear-gradient(135deg,#fed7aa,#fdba74);box-shadow:inset 0 0 0 1px rgba(245,158,11,.24),0 3px 8px rgba(245,158,11,.20)}
.side-nav .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
/* 新收藏高亮（新项追加在列表底部） */
.fav-item.just-added{animation:favIn .9s var(--ease) both}
/* 收藏列表底部拖动提示 */
.fav-tip{margin-top:8px;padding-top:9px;border-top:1px dashed var(--border);text-align:center;font-size:12px;color:var(--faint);
  letter-spacing:.02em;user-select:none}
/* 收藏空态 */
.fav-empty{padding:20px 10px!important}
.fav-empty .ico{font-size:36px;margin-bottom:8px;animation:floaty 5s ease-in-out infinite}
.fav-empty p{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.fav-empty span{font-size:12.5px;color:var(--faint);line-height:1.7}

/* B 区底部：本站工具统计卡（与收藏卡独立，深绿渐变醒目） */
.site-stat{position:relative;margin-top:18px;overflow:hidden;padding:20px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:linear-gradient(158deg,#3d8b24 0%,#2e6a1c 58%,#265915 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 30px rgba(38,85,21,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.site-stat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% -12%,rgba(214,255,178,.4),transparent 55%),radial-gradient(90% 80% at 0% 115%,rgba(255,255,255,.16),transparent 60%)}
.site-stat::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;left:-60px;bottom:-70px;pointer-events:none;
  background:radial-gradient(circle,rgba(190,240,128,.45),transparent 70%)}
.site-stat .stat-top{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:rgba(255,255,255,.95);
  letter-spacing:.16em;text-indent:.16em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:4px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-stat .stat-num{position:relative;font-size:52px;font-weight:800;color:#fff;line-height:1.08;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  text-shadow:0 3px 12px rgba(0,0,0,.30),0 0 22px rgba(255,255,255,.16)}
.site-stat .stat-txt{position:relative;font-size:14px;font-weight:700;color:rgba(255,255,255,.92);letter-spacing:.06em;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px 15px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ===== 首页分类分组区块：分类在上、工具在下 ===== */
.cat-section{margin-bottom:36px;scroll-margin-top:calc(var(--header-h,72px) + 16px)}
.cat-section:last-child{margin-bottom:6px}
.cat-sec-h{display:flex;align-items:center;gap:10px;padding:0 4px 14px;transition:transform .34s var(--ease)}
.cat-sec-h:hover{transform:translateX(4px)}
.cat-sec-h .csi{width:38px;height:38px;border-radius:12px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;font-size:18px;
  background:linear-gradient(135deg,#c3dcaa,#e3f6d0);
  box-shadow:inset 0 0 0 1px rgba(120,163,90,.20),0 4px 12px rgba(120,163,90,.22);
  transition:transform .34s var(--ease)}
.cat-section.c2 .cat-sec-h .csi{background:linear-gradient(135deg,#bce8d4,#9fdcc0);box-shadow:inset 0 0 0 1px rgba(63,182,139,.22),0 4px 12px rgba(63,182,139,.22)}
.cat-section.c3 .cat-sec-h .csi{background:linear-gradient(135deg,#a5cb86,#86b766);box-shadow:inset 0 0 0 1px rgba(16,185,129,.22),0 4px 12px rgba(16,185,129,.22)}
.cat-section.c4 .cat-sec-h .csi{background:linear-gradient(135deg,#fed7aa,#fdba74);box-shadow:inset 0 0 0 1px rgba(245,158,11,.26),0 4px 12px rgba(245,158,11,.22)}
.cat-sec-h:hover .csi{transform:scale(1.08) rotate(-3deg)}
.cat-sec-h h2{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cat-sec-h .cnt{font-size:11.5px;color:#3f8c26;background:#d5e7bb;border-radius:999px;padding:2px 9px;font-weight:600;font-variant-numeric:tabular-nums;transition:.26s var(--ease)}
.cat-sec-h:hover .cnt{background:#3f8c26;color:#fff}
/* 默认折叠隐藏的卡片（超出每类展示上限；须放在 .tool-card 规则之后生效，故用更高优先级选择器） */
.tool-card.cat-folded{display:none}
/* 工具视图（首页分组布局）：整组分类区块隐藏，只保留顶部工具 iframe */
body.tool-viewing .cat-section{display:none}
/* 「展开全部」：小卡片形式，大小与工具卡片相当、字号偏大 */
.cat-more{display:flex;align-items:center;justify-content:center;gap:8px;min-height:82px;
  border:1px dashed var(--border-strong);border-radius:16px;background:rgba(255,255,255,.74);
  color:#4d6a44;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
  transition:all .34s var(--ease)}
.cat-more:hover{border-color:var(--brand-2);color:var(--brand);background:#fff;transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.cat-more .cnt{font-size:12.5px;color:#3f8c26;background:#d5e7bb;border-radius:999px;padding:2px 10px;font-weight:700;font-variant-numeric:tabular-nums;transition:.26s var(--ease)}
.cat-more:hover .cnt{background:var(--grad);color:#fff}

/* SEO 隐藏式标题 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 收藏条目：置顶 / 移除按钮（悬停浮现，触屏常显） */
.fav-item .fp,.fav-item .fx{margin-left:4px;color:#b8c4a6;cursor:pointer;font-style:normal;width:22px;height:22px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:all .22s var(--ease);flex:0 0 22px;
  opacity:0;transform:scale(.85)}
.fav-item .fx{margin-left:auto;font-size:14px}
.fav-item .fp{font-size:13px}
.side-nav a:hover .fp,.side-nav a:hover .fx{opacity:1;transform:scale(1)}
.fav-item .fx:hover{color:#fff;background:var(--danger)}
.fav-item .fp:hover{background:#e2efd0;transform:scale(1.1)}
@media(hover:none){.fav-item .fp,.fav-item .fx{opacity:.55;transform:none}}
/* 收藏拖拽排序 */
body[data-logged="1"] #sidebar-favs .fav-item{cursor:grab}
body[data-logged="1"] #sidebar-favs .fav-item:active{cursor:grabbing}
.fav-item.dragging{opacity:.4;transform:scale(.97)}
.fav-item.dragging .fp,.fav-item.dragging .fx{display:none}

/* ===== 工具卡片（横向小卡：圆角方块图标 + 标题/描述） ===== */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.tool-card{position:relative;
  background:linear-gradient(158deg,#ffffff 0%,#ffffff 55%,#f1f8e7 100%);
  border:1px solid var(--border);border-radius:16px;
  padding:14px 44px 14px 14px;display:flex;align-items:center;gap:13px;text-align:left;min-height:82px;
  box-shadow:var(--shadow);transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
  animation:fadeUp .6s var(--ease) both;overflow:hidden}
.tool-grid .tool-card:nth-child(1){animation-delay:.03s}.tool-grid .tool-card:nth-child(2){animation-delay:.08s}
.tool-grid .tool-card:nth-child(3){animation-delay:.13s}.tool-grid .tool-card:nth-child(4){animation-delay:.18s}
.tool-grid .tool-card:nth-child(5){animation-delay:.23s}.tool-grid .tool-card:nth-child(6){animation-delay:.28s}
.tool-grid .tool-card:nth-child(7){animation-delay:.33s}.tool-grid .tool-card:nth-child(8){animation-delay:.38s}
.tool-grid .tool-card:nth-child(n+9){animation-delay:.43s}
/* hover 柔光晕 */
.tool-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .34s var(--ease);
  background:radial-gradient(280px circle at 12% 0,rgba(120,163,90,.14),transparent 62%)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:rgba(120,163,90,.42)}
.tool-card:hover::before{opacity:1}
.tool-txt{flex:1;min-width:0}
.tool-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:23px;
  background:linear-gradient(135deg,#c3dcaa,#e3f6d0);
  box-shadow:inset 0 0 0 1px rgba(120,163,90,.20),0 4px 12px rgba(120,163,90,.24);transition:transform .34s var(--ease)}
.tool-card:nth-child(4n+2) .tool-icon{background:linear-gradient(135deg,#bce8d4,#9fdcc0);box-shadow:inset 0 0 0 1px rgba(63,182,139,.22),0 4px 12px rgba(63,182,139,.24)}
.tool-card:nth-child(4n+3) .tool-icon{background:linear-gradient(135deg,#a5cb86,#86b766);box-shadow:inset 0 0 0 1px rgba(16,185,129,.22),0 4px 12px rgba(16,185,129,.24)}
.tool-card:nth-child(4n) .tool-icon{background:linear-gradient(135deg,#fed7aa,#fdba74);box-shadow:inset 0 0 0 1px rgba(245,158,11,.26),0 4px 12px rgba(245,158,11,.24)}
.tool-card:hover .tool-icon{transform:scale(1.07) rotate(-3deg)}
.tool-name{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-desc{margin-top:3px;font-size:12px;color:var(--muted);height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;line-height:1.5}
.tool-fav{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;color:#b6c2a4;background:#f2f7ea;transition:all .28s var(--ease);user-select:none;z-index:2}
.tool-fav:hover{color:var(--amber);background:#fff4dd;transform:scale(1.12)}
.tool-fav.on{color:var(--amber);background:#fff1d2;animation:starPop .45s var(--ease)}
.tool-hot{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#fb7185,#f43f5e);border-radius:999px;padding:1.5px 7px;
  box-shadow:0 3px 8px rgba(244,63,94,.32)}

/* 工具内嵌 iframe */
.tool-frame-wrap{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;animation:fadeUp .6s var(--ease) both}
.tool-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border)}
.tool-head-l{display:flex;align-items:baseline;gap:10px;min-width:0}
.tool-head-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  font-size:15px;background:linear-gradient(135deg,#eff7e4,#e2f0d2);box-shadow:inset 0 0 0 1px rgba(120,163,90,.18);transform:translateY(2px)}
.tool-head-desc{min-width:0;flex:0 1 auto;color:var(--faint);font-size:12.5px;font-weight:400;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-head-desc::before{content:"·";margin-right:10px;color:var(--faint)}
.tool-head-title{margin:0;min-width:0;display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-head-title::before{content:"";flex:0 0 auto;width:4px;height:16px;border-radius:99px;background:var(--grad)}
.tool-fbtn{pointer-events:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(120,163,90,.28);border-radius:999px;
  padding:9px 20px;font-size:14px;font-weight:600;color:#3f8c26;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 20px rgba(52,96,42,.18);transition:all .32s var(--ease);cursor:pointer;text-decoration:none;letter-spacing:.01em;margin:0}
.tool-fbtn:hover{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-grad)}
.tool-fbtn:active{transform:translateY(0)}
.tool-fbtn.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-grad)}
.tool-fbtn.on:hover{color:#fff;opacity:.94}
.tool-frame{display:block;width:100%;height:auto;min-height:380px;border:none;background:#fff}

/* 页脚 */
.site-footer{max-width:1500px;margin:0 auto;padding:28px 24px 38px;text-align:center;color:var(--faint);font-size:12px;
  position:relative}
.site-footer::before{content:"";display:block;width:120px;height:3px;border-radius:99px;background:var(--grad);margin:0 auto 22px;opacity:.55}
.site-footer a{color:var(--muted);font-weight:500;transition:color .14s}
.site-footer a:hover{color:var(--brand)}
.empty{padding:56px 20px;text-align:center;color:var(--muted);font-size:13px}
.empty .ico{font-size:40px;margin-bottom:10px;opacity:.95;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ===== 登录弹窗 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(23,42,18,.5);z-index:200;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-mask.show{display:flex}
.modal{position:relative;width:396px;max-width:92vw;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:22px;padding:36px 32px 30px;text-align:center;
  box-shadow:0 28px 72px rgba(24,46,18,.42);animation:pop .42s var(--ease);overflow:hidden;border:1px solid rgba(255,255,255,.6)}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad)}
.modal::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(150,196,110,.16),transparent 65%);top:-150px;right:-100px}
@keyframes pop{from{transform:scale(.94) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal .m-ico{position:relative;width:60px;height:60px;margin:2px auto 13px;border-radius:17px;
  background:linear-gradient(135deg,#e4ecd8,#d5e7bb);
  display:flex;align-items:center;justify-content:center;font-size:27px;
  box-shadow:inset 0 0 0 1px rgba(120,163,90,.16),0 8px 20px rgba(120,163,90,.16)}
.modal h3{position:relative;font-size:18.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.modal p{position:relative;color:var(--muted);font-size:12.5px;margin-bottom:18px;line-height:1.7}
.modal input{position:relative;width:100%;height:47px;border:1px solid var(--border);border-radius:13px;padding:0 16px;font-size:15px;outline:none;
  text-align:center;transition:all .28s var(--ease);background:#f2f7ea;color:var(--ink)}
.modal input:focus{background:#fff;border-color:rgba(120,163,90,.55);box-shadow:var(--ring)}
.modal input::placeholder{color:var(--faint)}
.modal .btn{position:relative;width:100%;justify-content:center;margin-top:14px;padding:13px;font-size:14px;font-weight:600;border-radius:13px;
  background:var(--grad);color:#fff;box-shadow:var(--shadow-grad)}
.modal .btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(93,136,68,.5)}
.modal .btn:active{transform:translateY(0)}
.modal .m-close{position:absolute;right:14px;top:13px;font-size:20px;color:var(--faint);cursor:pointer;width:32px;height:32px;z-index:3;
  border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .24s var(--ease)}
.modal .m-close:hover{background:#ecf6e0;color:#2f6b1e;transform:rotate(90deg)}
.modal .m-tip{position:relative;margin-top:13px;font-size:11.5px;color:var(--faint)}

/* ===== 置顶弹窗（紧凑版：输入位置数字） ===== */
.modal-pin{padding:32px 30px 24px}
.modal-pin::before{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.modal-pin .m-ico{background:linear-gradient(135deg,#fef3c7,#fde68a);
  box-shadow:inset 0 0 0 1px rgba(217,119,6,.20),0 8px 20px rgba(245,158,11,.24)}
.modal-pin input[type=number]{font-size:17px;font-weight:700;letter-spacing:.06em;-moz-appearance:textfield;appearance:textfield}
.modal-pin input[type=number]::-webkit-outer-spin-button,
.modal-pin input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.toast{position:fixed;top:calc(var(--header-h,72px) + 16px);left:50%;transform:translateX(-50%) translateY(-10px);
  background:linear-gradient(135deg,rgba(47,107,30,.97),rgba(63,132,38,.97));color:#fff;
  padding:11px 22px;border-radius:999px;font-size:12.5px;font-weight:500;z-index:300;opacity:0;transition:all .45s var(--ease);pointer-events:none;
  box-shadow:0 12px 32px rgba(40,90,30,.36);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 响应式 ===== */
/* 901–1280：居中搜索会与品牌胶囊/用户区相撞，头部折成两行（行2 通栏搜索），主体保持桌面布局 */
@media(min-width:901px) and (max-width:1280px){
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 24px;row-gap:10px}
  .brand{order:1}
  .header-right{margin-left:auto;order:3}
  .top-search{position:static;transform:none;order:4;width:auto;max-width:none;flex:1 1 100%;height:38px;padding:0 6px 0 14px}
}
@media(max-width:900px){
  body::before,body::after{display:none}
  .site-body{flex-direction:column;gap:14px;padding:16px}
  .site-sidebar{width:100%;flex:none;position:static;max-height:none}
  /* 头部换行：第一行品牌(含首页)+用户，第二行通栏搜索 */
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:10px}
  .brand{order:1}
  .header-right{margin-left:auto;order:3}
  .top-search{position:static;transform:none;order:4;width:auto;flex:1 1 100%;left:auto;right:auto;max-width:none;height:38px;padding:0 6px 0 14px}
  .tool-frame{min-height:340px}
}
@media(max-width:520px){
  .brand{font-size:15px}
  .brand .logo{width:32px;height:32px;border-radius:10px}
  .brand .logo-bolt{width:18px;height:18px}
  .user-combo{max-width:185px;padding-left:11px}
  .user-combo .uc-name{font-size:12px;margin-right:9px;padding-right:9px}
  .user-combo .uc-exit{height:26px;padding:0 12px}
  .tool-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
  .tool-card{min-height:72px;padding:11px 38px 11px 11px;gap:11px}
  .tool-icon{width:42px;height:42px;flex-basis:42px;font-size:20px;border-radius:12px}
  .tool-name{font-size:13.5px}
  .tool-desc{height:34px;font-size:11.5px}
  .modal{padding:30px 22px 24px}
  .site-footer{padding:22px 16px 28px}
}