/* ═══════════════════════════════════════════
   外贸物流导航 v4 · 参考图对齐样式
   ═══════════════════════════════════════════ */

/* ===== 设计令牌 ===== */
:root{
  --purple:#7c3aed;--purple-light:#a855f7;
  --blue:#2f7ff0;--cyan:#23c4e6;
  --ink:#eaf2ff;--ink-2:#a9bcd8;--ink-3:#6b7d94;
  --card-bg:rgba(255,255,255,.06);
  --card-border:rgba(255,255,255,.10);
  --card-hover-bg:rgba(255,255,255,.11);
  --pill-bg:rgba(255,255,255,.06);
  --pill-border:rgba(255,255,255,.08);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --shadow-card:0 2px 12px rgba(0,0,0,.18);
  --font:'PingFang SC','Microsoft YaHei','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink);
  overflow:hidden;
  background:linear-gradient(160deg,#1a1a2e 0%,#16213e 45%,#0f0f23 100%);
  background-attachment:fixed;
}
/* 背景统一画在固定底层（支持模糊度 --bg-blur，负 inset 防止模糊边缘露白） */
body.has-bg::before{
  content:'';position:fixed;inset:-40px;z-index:-1;
  background-image:var(--bg);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(var(--bg-blur,0px));
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--purple);outline-offset:2px;
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(150,170,200,.22);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(150,170,200,.36)}
::-webkit-scrollbar-track{background:transparent}

/* 全局深色遮罩 */
.scrim{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,12,24,.55) 0%, rgba(10,12,24,.25) 40%, rgba(10,12,24,.55) 100%)}

/* ===== 滚动容器 ===== */
.topbar{position:relative;z-index:1;height:100vh;overflow-y:auto}

/* ══════════════════════════════════════
   ① 顶栏：添加网址 + 分类标签
   ══════════════════════════════════════ */
.topbar-inner{
  position:sticky;top:0;z-index:30;
  padding:10px clamp(16px,3vw,28px) 10px;
  background:transparent;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* 添加网址按钮（并入导航栏，作为第一个元素；紫色胶囊，与第一排标签同高） */
.btn-apply{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:7px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;
  border:none;box-shadow:0 4px 14px rgba(124,58,237,.35);
  transition:filter .18s ease,transform .18s ease;white-space:nowrap;
}
.btn-apply:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* 分类导航（图标胶囊 · 按钮+标签作为一个整体全屏居中；分类多自动换行，按钮始终左一） */
.cat-tabs{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:3px 0;width:100%;
}
.cat-tabs::-webkit-scrollbar{display:none}
/* 让标签容器不产生盒子，按钮+标签直接混排在 .cat-tabs 中作为一个整体居中 */
.cat-tabs-list{display:contents}
.cat-tab{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:7px 15px;border-radius:999px;
  background:transparent;border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.55);font-size:13px;font-weight:600;letter-spacing:.01em;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  white-space:nowrap;cursor:pointer;line-height:1.3;
}
.cat-tab .tab-icon{font-size:14px;line-height:1;flex-shrink:0}
.cat-tab:hover{color:rgba(255,255,255,.80);background:rgba(255,255,255,.05)}
.cat-tab.active{
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(124,58,237,.38);
}

/* ══════════════════════════════════════
   ② 时间 + 日期/天气 行
   ══════════════════════════════════════ */
/* 时间 + 日期/天气：整体居中，两胶囊严格等宽（均分容器，宽度≈原时间框宽度） */
.info-row{
  display:flex;align-items:stretch;justify-content:center;
  gap:24px;padding:18px clamp(20px,4vw,40px) 0;
  max-width:660px;margin:0 auto;width:100%;
}

/* 左侧：大时间胶囊（高度随右侧日期框自动等高，文字垂直居中） */
.time-pill{
  display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 0;min-width:0;
  padding:6px 20px;border-radius:var(--radius-md);
  background:var(--pill-bg);border:1px solid var(--pill-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.time-text{
  font-family:'Bahnschrift','Segoe UI',system-ui,sans-serif;
  font-size:52px;font-weight:300;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;line-height:1;
  color:var(--ink);
}

/* 右侧：日期+天气胶囊（与时间胶囊等宽等高） */
.date-weather-pill{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  flex:1 1 0;min-width:0;
  padding:9px 20px 11px;border-radius:var(--radius-md);
  background:var(--pill-bg);border:1px solid var(--pill-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.dw-date{
  font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;line-height:1.3;
}
.dw-weather{
  display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);line-height:1.3;
}
.w-icon{font-size:18px;flex-shrink:0}
.w-temp{font-weight:700;color:var(--ink)}
.w-detail{color:var(--ink-2)}
.w-extra{color:var(--ink-2);font-size:12px;margin-left:auto}

/* ══════════════════════════════════════
   ③ 搜索栏（引擎下拉 + 输入 + AI按钮）
   ══════════════════════════════════════ */
.search-section{
  max-width:800px;margin:18px auto 0;width:100%;
  padding:0 clamp(20px,4vw,40px);
}
.search-wrap{
  display:flex;align-items:center;gap:0;
  background:var(--pill-bg);border:1px solid var(--pill-border);
  border-radius:999px;overflow:hidden;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.search-wrap:focus-within{
  border-color:rgba(124,58,237,.4);
  box-shadow:0 0 0 3px rgba(124,58,237,.10);
}

/* 引擎下拉 */
.engine-select{
  display:flex;align-items:center;gap:6px;
  padding:0 14px 0 18px;height:100%;
  cursor:pointer;user-select:none;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.08);
  min-width:72px;
}
.eng-label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.eng-arrow{color:var(--ink-3);transition:transform .2s ease}
.engine-select:hover .eng-arrow{transform:translateY(1px)}

/* 搜索输入框 */
.search-input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  padding:14px 10px;font-size:14.5px;color:var(--ink);font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.search-input::placeholder{color:rgba(255,255,255,.45);letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.search-clear{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:6px;color:var(--ink-3);
  background:rgba(255,255,255,.08);transition:background .15s ease,color .15s ease;
}
.search-clear:hover{background:rgba(255,255,255,.15);color:var(--ink-2)}
.search-clear[hidden]{display:none}

/* AI/搜索按钮 */
.search-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 22px;height:100%;min-height:46px;
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  flex-shrink:0;transition:filter .18s ease,transform .18s ease;
}
.search-btn:hover{filter:brightness(1.08);transform:scale(1.02)}
.search-btn:active{transform:scale(.98)}

/* ══════════════════════════════════════
   ③ 标题（时间下方、搜索栏上方）
   ══════════════════════════════════════ */
/* 标题（在自身区块内上下居中，与搜索栏留间隙） */
.hero-title{
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px 0 0;
  min-height:76px;
  max-width:980px;margin:0 auto;width:100%;
}
.hero-title h1{
  color:#fff;font-size:48px;font-weight:800;
  letter-spacing:.08em;text-shadow:0 2px 20px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.35);
}

/* ══════════════════════════════════════
   ⑤ 内容区 / 网址卡片（全屏铺开排列）
   ══════════════════════════════════════ */
.content{
  max-width:none;width:100%;
  margin:20px auto 0;
  /* 留白自适应：大屏 100px，窄屏按 10vw 收缩，最低 24px */
  padding:0 clamp(24px,10vw,100px) 60px;
}

/* 骨架屏 */
.skeleton{display:flex;flex-direction:column;gap:24px}
.sk-block{padding:20px}
.sk-cat-head{width:120px;height:16px;border-radius:4px;margin-bottom:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.04),rgba(255,255,255,.12));
  background-size:200% 100%;animation:shimmer 1.3s infinite}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px 16px}
.sk-card{height:54px;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.03),rgba(255,255,255,.07));
  background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.no-result{display:none;background:var(--card-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:38px 20px;text-align:center;
  color:var(--ink-2);font-size:14px;letter-spacing:.04em;margin-bottom:24px;box-shadow:var(--shadow-card)}
.no-result.show{display:block}

/* 分类区块 */
.cat-section{margin-bottom:44px}
.cat-section[hidden]{display:none}
.cat-section.enter{animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 分类头（彩色图标 + 名称） */
.cat-head{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:12px;padding-left:2px;
}
.cat-icon-badge{
  width:22px;height:22px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.cat-head h2{font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:.02em}

/* 网址卡片网格（参考图风格：扁卡片 · 大间距 · 一行约9个） */
.link-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px 16px;
}
.link-card{
  position:relative;display:flex;align-items:center;gap:11px;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  padding:12px 14px 12px 12px;
  color:var(--ink);
  transition:background .18s ease,border-color .18s ease,transform .15s ease,box-shadow .15s ease;
  box-shadow:var(--shadow-card);
}
.link-card:hover{
  background:var(--card-hover-bg);
  border-color:rgba(124,58,237,.35);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.link-card[hidden]{display:none}

/* 卡片图标（小方块，参考图尺寸） */
.monogram{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:700;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.link-card:hover .monogram{transform:scale(1.06)}
.monogram img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* 卡片名称 */
.link-name{
  font-size:13.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;letter-spacing:.01em;
}
/* 搜索高亮 */
.link-name mark.hl{
  background:rgba(124,58,237,.30);color:#fff;
  border-radius:3px;padding:0 2px;
  box-shadow:0 0 0 1px rgba(124,58,237,.45)
}

/* 页脚 */
.content-footer{
  display:table;margin:20px auto 0;
  color:rgba(255,255,255,.45);font-size:12px;letter-spacing:.03em;line-height:1.6;
}
.content-footer .beian-link{color:rgba(255,255,255,.45);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);transition:opacity .15s ease}
.content-footer .beian-link:hover{opacity:.8}
.content-footer .foot-home{color:rgba(255,255,255,.45);text-decoration:none;transition:opacity .15s ease}
.content-footer .foot-home:hover{opacity:.7;text-decoration:underline}

/* ══════════════════════════════════════
   模态框 / Toast / 返回顶部 / 登录
   ══════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(7,12,24,.50);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-card{position:relative;width:100%;max-width:420px;background:#fff;border-radius:18px;padding:30px 28px 26px;
  box-shadow:0 20px 50px rgba(6,16,36,.46);animation:rise .22s ease;color:#23384f}
.modal-close{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:9px;color:#6b7d90;font-size:17px;line-height:1}
.modal-close:hover{background:#f0f4f9;color:#23384f}
.modal-card h3{font-size:18px;font-weight:800;margin-bottom:4px;color:#1f3a5f}
.modal-card .m-sub{font-size:13px;color:#6b7d90;margin-bottom:20px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#23384f}
.field input,.field select,.field textarea{width:100%;padding:10px 13px;border:1px solid #d7e0ea;border-radius:10px;
  font-size:14px;font-family:inherit;color:#23384f;background:#fbfcfe;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{resize:vertical;min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.12);outline:none}
.modal-submit{width:100%;padding:12px;border-radius:12px;margin-top:6px;background:linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#fff;font-size:15px;font-weight:600;box-shadow:0 4px 14px rgba(124,58,237,.30);transition:filter .18s ease}
.modal-submit:hover{filter:brightness(1.08)}

.toast{position:fixed;left:50%;bottom:38px;transform:translateX(-50%) translateY(16px);
  background:rgba(15,15,25,.92);color:#fff;padding:11px 22px;border-radius:999px;font-size:14px;
  opacity:0;pointer-events:none;z-index:200;transition:opacity .25s ease,transform .25s ease;box-shadow:0 8px 24px rgba(0,0,0,.40)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.to-top{position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:60;
  width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff;
  box-shadow:0 8px 22px rgba(124,58,237,.42);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.9);
  transition:opacity .25s ease,transform .25s ease}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{filter:brightness(1.08);transform:translateY(-2px)}

.btn-login{
  position:fixed;left:clamp(12px,2vw,20px);bottom:16px;z-index:40;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:6px;background:transparent;border:none;
  color:var(--ink-2);font-size:15px;line-height:1;opacity:.3;transition:opacity .18s ease,transform .15s ease;
}
.btn-login:hover{opacity:1;transform:translateY(-1px)}

/* 待审核提醒 */
.pending-banner{position:fixed;left:clamp(12px,2vw,24px);top:50%;z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:7px;width:104px;padding:14px 9px;border-radius:16px;
  background:linear-gradient(165deg,#ff7a45 0%,#f53b2e 55%,#d91f1f 100%);color:#fff;text-align:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);opacity:0;pointer-events:none;
  transform:translateY(-50%) scale(.92) translateX(-10px);
  transition:opacity .28s ease,transform .28s ease,box-shadow .28s ease;
  box-shadow:0 12px 32px rgba(224,38,31,.45);animation:pbGlow 1.8s ease-in-out infinite}
.pending-banner.show{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1) translateX(0)}
.pending-banner .pb-icon{font-size:24px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.pending-banner .pb-text{font-size:12.5px;font-weight:800;line-height:1.4;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.pending-banner .pb-btn{display:inline-block;margin-top:2px;padding:6px 14px;border-radius:999px;
  background:#fff;color:#d91f1f;font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.22);transition:transform .15s ease,background .15s ease}
.pending-banner .pb-btn:hover{transform:translateY(-1px) scale(1.04);background:#fff4f0}
@keyframes pbGlow{0%,100%{box-shadow:0 12px 32px rgba(224,38,31,.45)}50%{box-shadow:0 12px 42px rgba(255,122,69,.85)}}

/* ══════════════════════════════════════
   响应式
   ══════════════════════════════════════ */
@media (max-width:900px){
  .time-text{font-size:40px}
  .info-row{gap:16px;padding:12px 20px 0}
  .search-section{padding:0 20px}
  .hero-title{padding:20px 0 6px}
  .hero-title h1{font-size:38px}
  .link-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 12px}
  .cat-head h2{font-size:14px}
  .link-name{font-size:12.5px}
  .pending-banner{width:84px;padding:11px 7px;border-radius:13px}
  .pending-banner .pb-icon{font-size:19px}
  .pending-banner .pb-text{font-size:11px}
}
@media (max-width:720px){
  .info-row{flex-direction:column;align-items:stretch;gap:10px;padding:10px 16px 0}
  .time-pill{justify-content:center}
  .date-weather-pill{align-items:center}
  .dw-weather{flex-wrap:wrap}
  .time-text{font-size:36px}
  .hero-title h1{font-size:clamp(22px,6vw,32px)}
  .search-section{padding:0 16px}
  .content{padding:0 16px 44px}
  .link-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .topbar-inner{padding:8px 12px 8px}
  .btn-apply{padding:6px 13px;font-size:12px}
  .cat-tab{padding:6px 12px;font-size:12px}
  .to-top{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}