/* ==========================================================================
   ui.css · 融财轩前台共享层
   只放三页共用的东西：设计 token、统一顶栏、底栏 tabbar、toast、通用小件。
   页面自己的样式表一律写在它之后，靠后加载覆盖这里，避免历史样式回归。
   零依赖，零外链。
   ========================================================================== */

:root{
  /* ---- 主色 ---- */
  --c-primary:#2563eb;
  --c-primary-dark:#1d4ed8;
  --c-primary-10:rgba(37,99,235,.10);
  --c-primary-bg:#f1f6fd;
  /* ---- 文字 ---- */
  --c-ink:#131523;
  --c-text:#525866;
  --c-sub:#5a607f;
  --c-muted:#8b90a0;
  /* ---- 底色 / 描边 ---- */
  --c-bg:#f5f5f5;
  --c-card:#ffffff;
  --c-line:#edf1ff;
  --c-line-2:#e8ebf3;
  /* ---- 字号 ---- */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-24:24px; --fs-28:28px; --fs-34:34px;
  /* ---- 圆角 ---- */
  --r-4:4px; --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-14:14px; --r-16:16px; --r-pill:999px;
  /* ---- 阴影 ---- */
  --sh-1:0 1px 2px rgba(19,21,35,.04);
  --sh-2:0 8px 24px rgba(19,21,35,.08);
  --sh-focus:0 0 0 3px rgba(37,99,235,.12);
  /* ---- 间距 ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* ---- 动效 ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:64px;

  /* ---- 旧变量名别名（历史样式依赖，不要删） ---- */
  --p:var(--c-primary,#2563eb);
  --pd:var(--c-primary-dark,#1d4ed8);
  --p10:var(--c-primary-10,rgba(37,99,235,.1));
  --pt:var(--c-primary-bg,#f1f6fd);
  --bg:var(--c-bg,#f5f5f5);
  --card:var(--c-card,#fff);
  --t:var(--c-ink,#131523);
  --s:var(--c-text,#525866);
  --m:var(--c-muted,#8b90a0);
  --bd:var(--c-line,#edf1ff);
  --bd2:var(--c-line-2,#e8ebf3);
  --r:var(--r-12,12px);
  --primary:var(--c-primary,#2563eb);
  --primary-dark:var(--c-primary-dark,#1d4ed8);
  --primary-10:var(--c-primary-10,rgba(37,99,235,.1));
  --primary-transparent:var(--c-primary-bg,#f1f6fd);
  --bg-page:var(--c-bg,#f5f5f5);
  --bg-card:var(--c-card,#fff);
  --title:var(--c-ink,#131523);
  --text:var(--c-text,#525866);
  --secondary:var(--c-sub,#5a607f);
  --muted:var(--c-muted,#8b90a0);
  --border:var(--c-line,#edf1ff);
  --border-2:var(--c-line-2,#e8ebf3);
}

/* ==========================================================================
   统一顶栏 .ui-top
   结构由 UI.mountTopbar() 生成，这里只管样子
   ========================================================================== */
.ui-top{
  height:var(--header-h);flex:0 0 auto;position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-6);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ui-top.is-scrolled{border-bottom-color:var(--c-line);background:rgba(255,255,255,.94)}
.ui-top__inner{display:flex;align-items:center;gap:var(--sp-4);width:100%;max-width:1320px;margin:0 auto;min-width:0}

/* 品牌 */
.ui-brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.ui-brand__mark{
  width:32px;height:32px;border-radius:var(--r-10);flex:0 0 auto;
  background:linear-gradient(140deg,#2563eb,#4f8bff);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:-.5px;
  box-shadow:0 4px 10px rgba(37,99,235,.26);
}
.ui-brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ui-brand__name{font-size:var(--fs-15);font-weight:700;color:var(--c-ink);white-space:nowrap}
.ui-brand__sub{font-size:10px;color:var(--c-muted);letter-spacing:.8px;white-space:nowrap}

/* 导航胶囊 */
.ui-nav{display:flex;align-items:center;gap:2px;margin-left:var(--sp-2);min-width:0}
.ui-nav a{
  height:34px;padding:0 14px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;font-size:var(--fs-14);color:var(--c-sub);
  white-space:nowrap;transition:background .18s var(--ease),color .18s;
}
.ui-nav a:hover{background:#f2f5fb;color:var(--c-primary)}
.ui-nav a.is-active{background:var(--c-primary-bg);color:var(--c-primary);font-weight:700}

/* 右侧动作区 */
.ui-acts{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}
.ui-ic{
  width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--c-sub);position:relative;transition:background .18s,color .18s;
}
.ui-ic:hover{background:#f2f5fb;color:var(--c-primary)}
.ui-ic svg{width:18px;height:18px;display:block}
.ui-ic__num{
  position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--c-primary);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  border:2px solid #fff;box-sizing:content-box;
}
.ui-ic__num[hidden]{display:none}
.ui-btn{
  height:36px;padding:0 15px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-13);font-weight:600;transition:transform .16s var(--ease),background .18s,box-shadow .18s;
  white-space:nowrap;
}
.ui-btn:active{transform:scale(.97)}
.ui-btn--primary{background:var(--c-primary);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.22)}
.ui-btn--primary:hover{background:var(--c-primary-dark)}
.ui-btn--ghost{background:#fff;color:var(--c-ink);border:1px solid var(--c-line-2)}
.ui-btn--ghost:hover{border-color:#c9d7fb;color:var(--c-primary)}
.ui-btn svg{width:15px;height:15px;display:block}
.ui-menu{display:none}

/* 右侧自定义操作槽（各页自己塞按钮；小屏可被页面隐藏） */
.ui-slot{display:inline-flex;align-items:center;gap:8px}

/* 搜索展开层（桌面点图标 / ⌘K 也能开） */
.ui-search{
  position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--c-line);box-shadow:var(--sh-2);
  padding:var(--sp-3) var(--sp-6);
  display:none;z-index:1;
}
.ui-search.open{display:block;animation:uiDrop .2s var(--ease)}
@keyframes uiDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ui-search__box{
  max-width:1320px;margin:0 auto;height:44px;border-radius:var(--r-pill);
  background:var(--c-bg);display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;
}
.ui-search__box:focus-within{background:#fff;box-shadow:inset 0 0 0 1px #c9d7fb,var(--sh-focus)}
.ui-search__box svg{width:17px;height:17px;color:var(--c-muted);flex:0 0 auto}
.ui-search__box input{flex:1;border:none;outline:none;background:none;font-size:var(--fs-15);color:var(--c-ink);min-width:0}
.ui-search__box input::placeholder{color:var(--c-muted)}
.ui-search__hint{max-width:1320px;margin:8px auto 0;font-size:var(--fs-12);color:var(--c-muted)}

/* 移动端抽屉 */
.ui-scrim{
  position:fixed;inset:0;background:rgba(19,21,35,.34);z-index:75;
  opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s;
}
.ui-scrim.open{opacity:1;visibility:visible}
.ui-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(78vw,304px);background:#fff;z-index:76;
  transform:translateX(-102%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3);
  box-shadow:12px 0 40px rgba(19,21,35,.14);
}
.ui-drawer.open{transform:none}
.ui-drawer__head{display:flex;align-items:center;gap:10px;padding:6px 8px var(--sp-4)}
.ui-drawer__head .ui-brand__name{font-size:var(--fs-16)}
.ui-drawer__close{margin-left:auto;width:32px;height:32px;border-radius:var(--r-8);display:grid;place-items:center;color:var(--c-muted)}
.ui-drawer__close:hover{background:var(--c-bg)}
.ui-drawer nav{display:flex;flex-direction:column;gap:2px}
.ui-drawer nav a{
  height:44px;padding:0 12px;border-radius:var(--r-10);display:flex;align-items:center;
  font-size:var(--fs-15);color:var(--c-ink);
}
.ui-drawer nav a:hover{background:var(--c-bg)}
.ui-drawer nav a.is-active{background:var(--c-primary-bg);color:var(--c-primary);font-weight:700}
.ui-drawer__label{font-size:var(--fs-11);color:var(--c-muted);letter-spacing:1px;padding:var(--sp-4) 12px 6px}

/* ==========================================================================
   底部 tabbar（≤860px 才出现，资源页 / 详情页与首页一致）
   ========================================================================== */
.ui-tabbar{display:none}
@media (max-width:860px){
  .ui-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:60px;z-index:45;
    background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--c-line);padding-bottom:env(safe-area-inset-bottom);
  }
  .ui-tabbar a,.ui-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;color:var(--c-muted);height:100%;
  }
  .ui-tabbar svg{width:21px;height:21px;display:block}
  .ui-tabbar .is-active{color:var(--c-primary);font-weight:600}
}

/* ==========================================================================
   通用小件
   ========================================================================== */
.ui-toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,16px);
  background:rgba(19,21,35,.92);color:#fff;font-size:var(--fs-13);
  padding:10px 18px;border-radius:var(--r-pill);z-index:95;
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);
  max-width:min(86vw,420px);text-align:center;line-height:1.5;
}
.ui-toast.show{opacity:1;transform:translate(-50%,0)}

/* 分类色小圆点 / 竖条，列表页与详情页共用 */
.ui-dot{width:8px;height:8px;border-radius:3px;flex:0 0 auto;display:inline-block}
.ui-pill{
  font-size:var(--fs-11);line-height:1;padding:4px 8px;border-radius:var(--r-6);
  background:#f2f4f8;color:var(--c-sub);font-weight:600;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap;
}
.ui-pill--ok{background:#e8f7f4;color:#0f766e}
.ui-pill--free{background:#eef4ff;color:#1d4ed8}
.ui-pill--wait{background:#fff6e8;color:#b45309}
.ui-pill--cat{background:var(--c-primary-bg);color:var(--c-primary)}

/* 骨架屏：首屏 fetch 期间占位，避免白屏 */
@keyframes uiShimmer{0%{background-position:-360px 0}100%{background-position:360px 0}}
.ui-sk{
  background:#f1f3f8;border-radius:var(--r-6);
  background-image:linear-gradient(90deg,#f1f3f8 0%,#e9edf5 40%,#f1f3f8 80%);
  background-size:720px 100%;background-repeat:no-repeat;
  animation:uiShimmer 1.25s linear infinite;
}

@media (max-width:860px){
  .ui-top{padding:0 var(--sp-4);gap:var(--sp-2)}
  .ui-nav{display:none}
  .ui-menu{display:grid}
  .ui-brand__sub{display:none}
  .ui-search{padding:var(--sp-3) var(--sp-4)}
}
@media (max-width:640px){
  .ui-top{height:56px;padding:0 var(--sp-3)}
  .ui-brand__mark{width:30px;height:30px;border-radius:9px;font-size:12px}
  .ui-brand__name{font-size:var(--fs-14)}
  .ui-acts{gap:2px}
  .ui-ic{width:34px;height:34px}
  .ui-btn{padding:0 12px;font-size:var(--fs-12)}
}
@media (prefers-reduced-motion:reduce){
  .ui-top,.ui-nav a,.ui-ic,.ui-btn,.ui-drawer,.ui-scrim,.ui-toast{transition-duration:.001ms !important}
  .ui-sk{animation:none}
}

/* 搜索关键词高亮 */
mark.hl{background:#fff1b8;color:inherit;border-radius:3px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}