/* =====================================================
   012.tw 網址導航 · 未來科技 HUD 主題（深色霓虹 / 玻璃擬態）
   類名與 nav.php / nav.js 保持不變，純換膚。
   ===================================================== */
:root{
  --bg:#04070f;
  --bg2:#0a1120;
  --panel:rgba(12,22,44,.72);
  --panel2:rgba(17,30,58,.6);
  --line:rgba(56,189,248,.22);
  --line2:rgba(167,139,250,.25);
  --text:#e6f1ff;
  --muted:#8fa6c8;
  --brand:#22d3ee;
  --brand2:#a78bfa;
  --mag:#f472b6;
  --lime:#a3e635;
  --danger:#fb7185;
  --grad:linear-gradient(135deg,#22d3ee,#a78bfa);
  --grad2:linear-gradient(135deg,#f472b6,#a78bfa);
  --radius:16px;
  --glow:0 0 0 1px rgba(34,211,238,.14),0 10px 34px rgba(2,6,23,.55),0 0 24px rgba(34,211,238,.12);
  --glow-strong:0 0 0 1px rgba(34,211,238,.5),0 12px 40px rgba(2,6,23,.6),0 0 34px rgba(34,211,238,.35);
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(34,211,238,.10),transparent 60%),
    radial-gradient(1000px 600px at -10% 20%,rgba(167,139,250,.10),transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2) 60%,#05070f);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
img{border:0;max-width:100%}
::selection{background:rgba(34,211,238,.35)}

/* ---------- 頂欄 ---------- */
.nh-top{position:sticky;top:0;z-index:200;
  background:rgba(5,10,22,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.nh-container{max-width:1200px;margin:0 auto;padding:0 16px}
.nh-top-in{display:flex;align-items:center;gap:16px;min-height:60px;padding:6px 0;position:relative;flex-wrap:wrap;row-gap:6px}
.nh-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:.5px;color:#fff;flex:none;white-space:nowrap}
.nh-logo .dot{width:36px;height:36px;border-radius:11px;background:var(--grad);color:#03121c;display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 0 18px rgba(34,211,238,.6),inset 0 0 8px rgba(255,255,255,.35)}
.nh-logo .dom{font-family:var(--font-mono);color:#7dd3fc}
.nh-logo em{font-style:normal;background:linear-gradient(90deg,#67e8f9,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(34,211,238,.35))}
.nh-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nh-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;color:#c7d9f5;font-weight:600;position:relative;transition:.25s}
.nh-nav a::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(135deg,rgba(34,211,238,.9),rgba(167,139,250,.9));opacity:0;transition:.25s;z-index:-1}
.nh-nav a:hover,.nh-nav a.on{color:#02121d}
.nh-nav a:hover::before,.nh-nav a.on::before{opacity:1;box-shadow:0 0 22px rgba(34,211,238,.5)}
.nh-nav a.hot{color:var(--mag)}

/* ---------- 工具頁導覽收納：更多工具（桌機 hover／鍵盤 focus 展開，手機直接展開） ---------- */
.nh-more{position:relative;display:inline-flex;align-items:center}
.nh-more-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:0;border-radius:999px;background:none;
  color:#c7d9f5;font:inherit;font-weight:600;cursor:pointer;position:relative;transition:.25s}
.nh-more-btn::before{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;opacity:0;transition:.25s;
  background:linear-gradient(135deg,rgba(34,211,238,.9),rgba(167,139,250,.9))}
.nh-more-btn:hover,.nh-more:focus-within .nh-more-btn{color:#02121d}
.nh-more-btn:hover::before,.nh-more:focus-within .nh-more-btn::before{opacity:1;box-shadow:0 0 22px rgba(34,211,238,.5)}
.nh-more-btn i{font-style:normal;font-size:10px;line-height:1;opacity:.85;transition:transform .25s}
.nh-more:hover .nh-more-btn i,.nh-more:focus-within .nh-more-btn i{transform:rotate(180deg)}
.nh-more-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:700;display:none;flex-direction:column;gap:2px;
  min-width:190px;padding:8px;background:rgba(8,15,32,.98);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 24px rgba(34,211,238,.15);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nh-more-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}  /* 滑過空隙時不中斷 hover */
.nh-more:hover .nh-more-menu,.nh-more:focus-within .nh-more-menu{display:flex;animation:nhmore .18s ease}
@keyframes nhmore{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nh-nav .nh-more-menu a,.nh-nav .nh-more-menu a:hover,.nh-nav .nh-more-menu a.on{
  display:block;padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:600;white-space:nowrap;color:#c7d9f5}
.nh-nav .nh-more-menu a::before{display:none}
.nh-nav .nh-more-menu a:hover{background:rgba(34,211,238,.14);color:#fff}
.nh-nav .nh-more-menu a.on{background:linear-gradient(135deg,rgba(34,211,238,.9),rgba(167,139,250,.9));color:#02121d}
@media(max-width:1320px) and (min-width:901px){
  .nh-more-btn{padding:7px 10px;font-size:13px;gap:4px}
}
@media(max-width:900px){
  .nh-more{display:block;width:100%;position:static}
  .nh-more-btn{display:flex;width:100%;justify-content:center;padding:8px 12px;border-radius:10px;
    background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.28);color:#7dd3fc;font-size:13px}
  .nh-more-btn i{display:none}
  .nh-nav .nh-more-menu{position:static;display:flex;min-width:0;margin-top:6px;padding:6px;border-radius:12px;
    background:rgba(5,10,22,.6);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nh-nav .nh-more-menu::before{display:none}
  .nh-nav .nh-more-menu a{padding:8px 10px;font-size:13px}
}

/* 工具頁導覽現在有 9 個項目：中等寬度先縮小間距，避免擠壓 logo 或換行 */
@media(max-width:1320px) and (min-width:901px){
  .nh-nav{gap:2px}
  .nh-nav a{padding:7px 10px;font-size:13px;font-weight:600;gap:4px}
}
.nh-toggle{display:none}
.nh-burger{display:none;width:42px;height:42px;margin-left:auto;border:1px solid var(--line);border-radius:12px;background:rgba(12,22,44,.8);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nh-burger span{width:18px;height:2px;background:#7dd3fc;border-radius:2px;transition:.3s;box-shadow:0 0 6px rgba(34,211,238,.6)}

/* ---------- 英雄區 ---------- */
.nh-hero{padding:28px 0 26px;position:relative;z-index:30;color:#fff;
  background:
    linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px),
    linear-gradient(120deg,#071029 0%,#0b1c3a 55%,#1a0f33 100%);
  background-size:44px 44px,44px 44px,auto;
  border-bottom:1px solid var(--line)}
/* 裝飾光暈改放在獨立圖層裡裁切：原本 .nh-hero 自己的 overflow:hidden 會把搜尋引擎選單一起裁掉，
   z-index 也要抬高，否則選單會被下方的卡片蓋住。 */
.nh-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nh-hero-bg:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-260px;right:-120px;
  background:radial-gradient(circle,rgba(34,211,238,.28),transparent 65%);filter:blur(6px);animation:orbA 9s ease-in-out infinite alternate}
.nh-hero-bg:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;bottom:-260px;left:-140px;
  background:radial-gradient(circle,rgba(167,139,250,.25),transparent 65%);filter:blur(6px);animation:orbB 11s ease-in-out infinite alternate}
@keyframes orbA{to{transform:translate(-40px,30px) scale(1.08)}}
@keyframes orbB{to{transform:translate(50px,-30px) scale(1.05)}}
.nh-hero .nh-container{position:relative;z-index:2}
.nh-hero h1{margin:0 0 6px;font-size:clamp(22px,3.2vw,36px);letter-spacing:1.5px;font-weight:900;
  background:linear-gradient(90deg,#fff,#a5f3fc 40%,#c4b5fd 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.35))}
.nh-hero p{margin:0 0 14px;color:#b9cbe9;letter-spacing:.3px;font-size:14px;opacity:.92}
.nh-search{display:flex;position:relative;z-index:5;max-width:680px;background:rgba(10,18,38,.85);border:1px solid var(--line);border-radius:999px;padding:6px;backdrop-filter:blur(8px);transition:.3s;box-shadow:0 0 0 rgba(34,211,238,0)}
.nh-search:focus-within{border-color:var(--brand);box-shadow:0 0 26px rgba(34,211,238,.4);transform:translateY(-2px)}
.nh-search input{flex:1;border:0;outline:none;background:transparent;font-size:16px;padding:0 18px;color:var(--text)}
.nh-search .ns-go{border:0;border-radius:999px;background:var(--grad);color:#02121c;font-size:15px;font-weight:800;padding:0 28px;height:44px;cursor:pointer;transition:.25s;box-shadow:0 0 18px rgba(34,211,238,.4)}
.nh-search .ns-go:hover{filter:brightness(1.15);box-shadow:0 0 30px rgba(34,211,238,.7)}

/* ---------- 區塊卡片 ---------- */
.nh-section{max-width:1200px;margin:26px auto 0;padding:0 16px}
.nh-quick{display:flex;gap:10px;flex-wrap:wrap}
.q-chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;color:#d5e4fb;backdrop-filter:blur(8px);transition:.25s}
.q-chip:hover{transform:translateY(-3px);color:#02121c;background:var(--grad);border-color:transparent;box-shadow:0 0 22px rgba(34,211,238,.5)}
.q-chip b{width:20px;height:20px;border-radius:6px;background:rgba(34,211,238,.16);color:#7dd3fc;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--font-mono)}
.q-chip:hover b{background:rgba(2,18,28,.2);color:#02121c}

.nh-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(12px);overflow:hidden;box-shadow:var(--glow)}
.nh-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.9),rgba(167,139,250,.9),transparent);opacity:.7}
.nh-card-hd{display:flex;align-items:center;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.nh-card-hd h2{margin:0;font-size:18px;display:flex;align-items:center;gap:8px;color:#eaf6ff}
.nh-card-hd h2:before{content:"";width:5px;height:20px;border-radius:4px;background:var(--grad);box-shadow:0 0 10px rgba(34,211,238,.8)}
.nh-card-hd .hd-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nh-card-hd .hint{font-size:12px;color:var(--muted)}
.nh-card-hd .tbtn{border:1px solid var(--line);background:rgba(12,22,44,.7);color:#b9d7ff;font-size:13px;font-weight:700;border-radius:999px;padding:6px 15px;cursor:pointer;transition:.25s;line-height:1.4}
.nh-card-hd .tbtn.add{background:var(--grad);color:#02121c;border-color:transparent;box-shadow:0 0 16px rgba(34,211,238,.4)}
.nh-card-hd .tbtn.on{background:var(--grad);color:#02121c;border-color:transparent;box-shadow:0 0 16px rgba(34,211,238,.4)}
.nh-card-hd .tbtn:hover{transform:translateY(-2px);border-color:var(--brand);color:#fff;box-shadow:0 0 14px rgba(34,211,238,.35)}
.nh-card-hd .tbtn.add:hover{filter:brightness(1.12)}

/* ---------- 品牌 ---------- */
.nh-brand{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:16px 18px 18px;min-height:92px}
.b-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border:1px solid rgba(56,189,248,.14);border-radius:14px;transition:.28s;text-align:center;background:rgba(8,14,30,.4);cursor:grab;touch-action:pan-y}
.b-chip img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(34,211,238,.35))}
.b-chip .big{display:inline-flex;width:44px;height:44px;border-radius:13px;align-items:center;justify-content:center;font-size:21px;font-weight:800;color:#03121c;background:var(--grad);box-shadow:0 0 14px rgba(34,211,238,.55);font-family:var(--font-mono)}
.b-chip .nm{font-size:12px;color:#a9c3ea;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-chip:hover{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.65);transform:translateY(-4px);box-shadow:0 0 22px rgba(34,211,238,.35)}
.b-chip:hover .nm{color:#fff;font-weight:700;text-shadow:0 0 10px rgba(34,211,238,.6)}
.b-chip .b-del{position:absolute;top:-5px;right:-3px;width:20px;height:20px;line-height:18px;border-radius:50%;background:rgba(251,113,133,.2);color:#ffb3c1;font-size:13px;font-weight:900;text-align:center;opacity:0;pointer-events:none;transition:.2s;z-index:3;border:1px solid rgba(251,113,133,.4)}
.b-chip .b-del:hover{background:var(--danger);color:#fff}
.b-chip.dragging{opacity:.45;transform:scale(.9)}
#brandGrid.drag-over .b-chip:not(.dragging){box-shadow:0 0 0 2px rgba(34,211,238,.6),0 0 18px rgba(34,211,238,.3)}
/* 調整模式：顯示刪除與左右移動鈕（手機可用） */
.b-chip .b-mv{position:absolute;bottom:-7px;width:22px;height:22px;line-height:20px;border-radius:50%;background:rgba(34,211,238,.18);color:#9fe8ff;font-size:11px;font-weight:900;text-align:center;border:1px solid rgba(34,211,238,.45);opacity:0;pointer-events:none;transition:.2s;z-index:3;cursor:pointer}
.b-chip .b-mv.l{left:-7px}
.b-chip .b-mv.r{right:-7px}
.b-chip .b-mv:hover{background:#22d3ee;color:#02121c}
.nh-brand.editing .b-chip{cursor:pointer;border-style:dashed}
.nh-brand.editing .b-chip:hover{transform:none}
/* 僅「被選取」的圖示顯示 ◀ ▶ × */
.nh-brand.editing .b-chip.sel{border-style:solid;border-color:rgba(34,211,238,.85);box-shadow:0 0 0 2px rgba(34,211,238,.45),0 0 18px rgba(34,211,238,.35)}
.nh-brand.editing .b-chip.sel .b-del,
.nh-brand.editing .b-chip.sel .b-mv{opacity:1;pointer-events:auto}
#brandEmpty{padding:6px 18px 18px;color:var(--muted);font-size:13px}

/* ---------- 熱門分類卡片 ---------- */
.nh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px;margin-top:22px}
.cat-card{display:flex;flex-direction:column;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;backdrop-filter:blur(10px);transition:.3s}
.cat-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(34,211,238,.6),transparent 35%,transparent 70%,rgba(167,139,250,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;transition:.3s;pointer-events:none}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--glow-strong)}
.cat-card:hover::before{opacity:1}
.cat-card .tt{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.cat-card .tt h3{margin:0;font-size:16px;display:flex;align-items:center;gap:7px;color:#eaf6ff}
.cat-card .tt .go{font-size:12px;color:#67e8f9;opacity:0;transform:translateX(-6px);transition:.25s;text-shadow:0 0 8px rgba(34,211,238,.8)}
.cat-card:hover .tt .go{opacity:1;transform:none}
.cat-card ul{list-style:none;margin:0;padding:0 8px 10px;display:flex;flex-direction:column}
.cat-card li a{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;color:#b6c6e4;transition:.2s}
.cat-card li a:hover{background:rgba(34,211,238,.12);color:#fff;padding-left:12px;text-shadow:0 0 8px rgba(34,211,238,.5)}
.cat-card li a:before{content:"";width:5px;height:5px;border-radius:50%;background:#3b82c4;box-shadow:0 0 6px #3b82c4;flex:none;transition:.2s}
.cat-card li a:hover:before{background:var(--brand);box-shadow:0 0 8px var(--brand)}
.cat-card .more{margin:auto 8px 12px;text-align:center}
.cat-card .more a{display:inline-block;width:100%;padding:7px 0;border-radius:10px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:#7dd3fc;font-weight:700;font-size:13px;transition:.25s}
.cat-card .more a:hover{background:var(--grad);color:#02121c;border-color:transparent;box-shadow:0 0 16px rgba(34,211,238,.5)}

/* ---------- 分類導覽 chips ---------- */
.chip-cloud{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px 18px}
.cat-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(56,189,248,.22);background:rgba(10,18,38,.55);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:#bfd2f0;transition:.25s}
.cat-chip:hover{background:var(--grad);color:#02121c;border-color:transparent;transform:translateY(-2px);box-shadow:0 0 16px rgba(34,211,238,.45)}
.cat-chip .n{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(34,211,238,.16);color:#7dd3fc;align-items:center;justify-content:center;font-size:11px;font-family:var(--font-mono)}
.cat-chip:hover .n{background:rgba(2,18,28,.22);color:#02121c}

/* ---------- 分類頁 ---------- */
.crumb{padding:16px 0 4px;color:#7f9cc9;font-size:13px}
.crumb a{color:#67e8f9}
.grp{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:16px}
.grp-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;backdrop-filter:blur(10px);transition:.25s;box-shadow:var(--glow)}
.grp-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.5);box-shadow:var(--glow-strong)}
.grp-card h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px;color:#eaf6ff}
.grp-card h3:before{content:"";width:4px;height:16px;border-radius:4px;background:var(--grad);box-shadow:0 0 8px rgba(34,211,238,.7)}
.grp-card .cnt{margin-left:auto;font-size:11px;color:#67e8f9;border:1px solid rgba(34,211,238,.3);border-radius:999px;padding:0 7px;font-family:var(--font-mono)}
.grp-card ul{list-style:none;margin:0;padding:0;columns:2;column-gap:10px}
.grp-card li{break-inside:avoid}
.grp-card li a{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:7px;color:#b6c6e4;font-size:13.5px;transition:.18s}
.grp-card li a:hover{background:rgba(34,211,238,.12);color:#fff;transform:translateX(3px)}
.grp-card li a:before{content:"›";color:#3b82c4;flex:none;font-weight:700}
@media(max-width:560px){.grp{grid-template-columns:1fr}.grp-card ul{columns:1}}

/* ---------- 標題分隔 ---------- */
.nh-sec-h{display:flex;align-items:center;gap:10px;margin:38px auto 0;max-width:1200px;padding:0 16px}
.nh-sec-h .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.6),transparent);box-shadow:0 0 6px rgba(34,211,238,.4)}
.nh-sec-h .tx{font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#dff3ff;text-shadow:0 0 12px rgba(34,211,238,.5)}
.nh-sec-h .tx:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--grad);transform:rotate(45deg);box-shadow:0 0 8px rgba(34,211,238,.8)}

/* ---------- 頁腳 ---------- */
.nh-foot{margin-top:46px;background:rgba(3,7,16,.9);border-top:1px solid var(--line);color:#7f9cc9;font-size:13px}
.nh-foot .in{max-width:1200px;margin:0 auto;padding:26px 16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.nh-foot a{color:#9bd4f5}
.nh-foot a:hover{color:#fff;text-shadow:0 0 8px rgba(34,211,238,.8)}
.nh-foot .bd{border:1px solid rgba(56,189,248,.3);color:#67e8f9;padding:1px 9px;border-radius:999px;font-size:12px;font-family:var(--font-mono);text-shadow:0 0 8px rgba(34,211,238,.6)}

/* ---------- 回到頂部 ---------- */
#toTop{position:fixed;right:20px;bottom:24px;width:46px;height:46px;border:1px solid rgba(34,211,238,.6);border-radius:50%;background:rgba(8,16,34,.9);color:#67e8f9;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s;z-index:300;box-shadow:0 0 18px rgba(34,211,238,.4)}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--grad);color:#02121c;box-shadow:0 0 28px rgba(34,211,238,.7)}

/* ---------- 滾動顯現 ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.is-hide{display:none!important}

/* ---------- 新增品牌彈窗 ---------- */
.bm-mask{position:fixed;inset:0;background:rgba(2,6,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:900;display:none;align-items:center;justify-content:center;padding:16px}
.bm-mask.on{display:flex}
.bm-card{background:linear-gradient(160deg,rgba(16,30,60,.96),rgba(9,15,34,.96));border:1px solid var(--line);border-radius:20px;width:min(430px,100%);padding:24px;animation:bmIn .25s ease;box-shadow:0 0 40px rgba(34,211,238,.15)}
@keyframes bmIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
.bm-card h3{margin:0 0 4px;font-size:19px;color:#eaf6ff}
.bm-card .sub{color:var(--muted);font-size:13px;margin:0 0 6px}
.bm-card label{display:block;font-size:13px;font-weight:700;margin:12px 0 5px;color:#9fb9e0}
.bm-card input{width:100%;border:1px solid rgba(56,189,248,.3);border-radius:11px;padding:9px 13px;font-size:14px;outline:none;color:var(--text);background:rgba(5,10,22,.7);transition:.2s}
.bm-card input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(34,211,238,.15),0 0 14px rgba(34,211,238,.25)}
.bm-card .err{display:none;color:var(--danger);font-size:12.5px;margin-top:10px}
.bm-card .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.bm-card button{border:0;border-radius:999px;padding:9px 20px;font-weight:700;cursor:pointer;font-size:14px}
.bm-card .ok{background:var(--grad);color:#02121c;box-shadow:0 0 16px rgba(34,211,238,.4)}
.bm-card .ok:hover{filter:brightness(1.12);box-shadow:0 0 26px rgba(34,211,238,.6)}
.bm-card .cancel{background:rgba(20,34,64,.7);color:#9fb9e0;border:1px solid rgba(56,189,248,.25)}

/* ---------- 手機 ---------- */
@media(max-width:900px){
  .nh-top-in{height:56px}
  .nh-burger{display:inline-flex}
  .nh-nav{position:absolute;top:calc(100% + 6px);left:8px;right:8px;background:rgba(8,15,32,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 0 30px rgba(34,211,238,.2);flex-direction:column;gap:4px;padding:10px;display:none;z-index:500;backdrop-filter:blur(12px)}
  .nh-toggle:checked ~ .nh-nav{display:flex;animation:nhav .25s ease}
  @keyframes nhav{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nh-nav a{justify-content:center;border-radius:10px}
  .nh-toggle:checked ~ .nh-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nh-toggle:checked ~ .nh-burger span:nth-child(2){opacity:0}
  .nh-toggle:checked ~ .nh-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nh-hero{padding:34px 0 30px}
  .nh-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .nh-brand{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .nh-card-hd .hint{display:none}
  .b-chip{min-height:88px;justify-content:flex-start;width:100%}
}
@media(max-width:640px){
  /* 手機版熱門分類：一排兩張 */
  .nh-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-card .tt{padding:12px 12px 6px}
  .cat-card .tt h3{font-size:15px;gap:6px}
  .cat-card li a{font-size:13px;padding:4px 6px}
  .cat-card ul{padding:0 4px 8px}
  .cat-card .more{margin:auto 4px 10px}
}
@media(max-width:480px){
  .nh-hero h1{font-size:21px}
  .nh-hero p{font-size:12.5px}
  .nh-search .ns-go{width:56px;padding:0;font-size:0}
  .nh-search .ns-go:after{content:"搜";font-size:15px;color:#02121c}
  .nh-brand{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));padding:12px}
  .b-chip{min-height:84px;justify-content:flex-start}
  .b-chip img,.b-chip .big{width:34px;height:34px}
  .b-chip .big{font-size:16px}
  .b-chip .nm{font-size:11px;line-height:1.2}
  .nh-cards{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- 搜索引擎選擇：自訂下拉（取代原本的原生 select）---------- */
.nh-eng{position:relative;flex:none}
.ne-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 8px;border:0;border-right:1px solid rgba(56,189,248,.25);background:transparent;color:#7dd3fc;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.25s}
.ne-btn:hover,.ne-btn[aria-expanded="true"]{color:#fff}
.ne-ico{width:22px;height:22px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;font-family:var(--font-mono);background:rgba(56,189,248,.22);box-shadow:0 0 10px rgba(34,211,238,.25)}
.ne-ico.e-google{background:linear-gradient(135deg,#4285f4,#34a853)}
.ne-ico.e-bing{background:linear-gradient(135deg,#008373,#00b7c3)}
.ne-ico.e-yahoo{background:linear-gradient(135deg,#6001d2,#a855f7)}
.ne-car{opacity:.65;transition:transform .25s}
.ne-btn[aria-expanded="true"] .ne-car{transform:rotate(180deg)}
.ne-menu{position:absolute;top:calc(100% + 12px);left:0;z-index:80;min-width:174px;padding:6px;border:1px solid var(--line);border-radius:16px;background:rgba(8,14,30,.985);box-shadow:0 18px 44px rgba(2,8,20,.7),inset 0 0 0 1px rgba(34,211,238,.1);animation:neIn .18s ease}
.ne-menu[hidden]{display:none}
@keyframes neIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ne-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;color:#cfe3ff;font-size:13.5px;font-weight:600;cursor:pointer;outline:none;transition:.2s}
.ne-opt:hover,.ne-opt:focus{background:rgba(56,189,248,.14);color:#fff}
.ne-opt.on{background:rgba(34,211,238,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(34,211,238,.4)}
.ne-opt .ne-nm{flex:1;white-space:nowrap}
.ne-tick{opacity:0;color:#67e8f9;font-size:12px;font-weight:800;transition:.2s}
.ne-opt.on .ne-tick{opacity:1}

/* ---------- 站內過濾 ---------- */
.cards-filter{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 16px;margin-bottom:16px;backdrop-filter:blur(8px);transition:.25s}
.cards-filter:focus-within{border-color:var(--brand);box-shadow:0 0 16px rgba(34,211,238,.3)}
.cards-filter .cf-lab{color:#67e8f9;font-size:12px;font-weight:700;font-family:var(--font-mono);white-space:nowrap;text-shadow:0 0 8px rgba(34,211,238,.6)}
.cards-filter input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text);font-size:14px}
.cards-filter input::placeholder{color:#5c7298}
.cards-filter .cf-clear{width:26px;height:26px;border-radius:50%;border:1px solid rgba(56,189,248,.35);background:transparent;color:#7dd3fc;cursor:pointer;font-size:15px;line-height:1;display:none;flex:none;transition:.2s}
.cards-filter .cf-clear.show{display:inline-flex;align-items:center;justify-content:center}
.cards-filter .cf-clear:hover{background:var(--danger);border-color:transparent;color:#fff}
@media(max-width:480px){
  .ne-btn{padding:0 8px;gap:6px}
  .ne-cap{display:none}
  .ne-menu{min-width:152px}
}