/* ==========================================================================
   全站统一顶部导航 —— 唯一样式来源
   --------------------------------------------------------------------------
   使用方：
     1) view/tpl/tom/*.html              —— PHP 服务端渲染（require nav.html）
     2) public/tools/工具别名/index.html  —— 静态资源，导航由 assets/js/xy-navbar.js 注入
   任何页面都不得再自行定义 .xy-navbar 系列样式，否则会再次分叉出不一致版本。
   主色 #1677ff，与工具箱首页 /tools/ 保持一致。

   注意：本文件注释中不要出现 "星号+斜杠" 的组合（会提前闭合注释，
        导致紧随其后的规则被整条丢弃），路径用文字描述即可。
   ========================================================================== */

.xy-navbar{
    /* 主题入口：如需换色只改这里 */
    --xy-primary:#1677ff;
    --xy-primary-hover:#4096ff;
    --xy-primary-light:#e6f4ff;
    --xy-text:#1f2937;
    --xy-text-secondary:#6b7280;
    --xy-bg:#f5f7fb;
    --xy-nav-height:64px;

    /* 用 fixed 而非 sticky：工具页的 body 存在 display:flex / max-width / padding 等
       各种布局，sticky 会被父容器约束成内容宽度（girls_video 曾因此只有 772px 宽）。
       fixed 相对视口定位，全站宽度与位置绝对一致。
       顶部间距由 body 的 padding-top 补偿：前台在 header.html 设置，
       工具页由 xy-navbar.js 注入时自动累加。 */
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--xy-nav-height);
    background:rgba(255,255,255,0.92);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(229,231,235,0.6);
    z-index:1000;
    transition:box-shadow .2s;
}
.xy-navbar.xy-navbar-scrolled{ box-shadow:0 1px 12px rgba(15,23,42,0.08); }

.xy-navbar-inner{
    max-width:1200px;
    margin:0 auto;
    height:100%;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.xy-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--xy-text);
    font-weight:800;
    font-size:19px;
    flex-shrink:0;
    text-decoration:none;
}
.xy-brand:hover{ color:var(--xy-text); text-decoration:none; }
.xy-brand-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--xy-primary),#69b1ff);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.xy-nav-links{
    display:flex;
    gap:4px;
    align-items:center;
    overflow-x:auto;
    scrollbar-width:none;
}
.xy-nav-links::-webkit-scrollbar{ display:none; }

/* 导航图标统一为内联 SVG：前台与工具页共用，不依赖图标字体 */
.xy-nav-ico{
    width:17px;
    height:17px;
    flex-shrink:0;
    display:block;
}
.xy-brand-icon .xy-nav-ico{ width:20px; height:20px; }
.xy-btn .xy-nav-ico{ width:15px; height:15px; }

.xy-nav-link{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 13px;
    border-radius:8px;
    color:var(--xy-text-secondary);
    font-size:14px;
    white-space:nowrap;
    transition:all .15s;
    text-decoration:none;
}
.xy-nav-link:hover{ background:var(--xy-bg); color:var(--xy-text); text-decoration:none; }
.xy-nav-link.active{ color:var(--xy-primary); background:var(--xy-primary-light); font-weight:600; }

.xy-nav-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.xy-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:none;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    border-radius:8px;
    padding:8px 16px;
    transition:all .15s;
    text-decoration:none;
}
.xy-btn-sm{ padding:6px 12px; font-size:13px; }
.xy-btn-primary{ background:var(--xy-primary); color:#fff; }
.xy-btn-primary:hover{ background:var(--xy-primary-hover); color:#fff; }
.xy-btn-outline{ background:#fff; color:var(--xy-primary); border:1px solid var(--xy-primary); }
.xy-btn-outline:hover{ background:var(--xy-primary-light); color:var(--xy-primary); }

/* ===== 移动端 ===== */
@media(max-width:768px){
    .xy-navbar-inner{ padding:0 14px; gap:12px; }
    .xy-nav-link{ padding:8px 10px; }
    .xy-nav-link span{ display:none; }
    /* 手机端 brand 与右侧按钮组均 flex-shrink:0，会挤压导航项；
       隐藏右侧按钮组把空间还给导航项：未登录经「用户中心」进登录页，
       已登录经「用户中心」进个人中心（菜单内有退出）。 */
    .xy-nav-links{ flex:1 1 auto; min-width:0; justify-content:flex-start; }
    .xy-nav-right{ display:none; }
}
/* 极窄屏（<360px）收起品牌文字，确保导航项完整展示 */
@media(max-width:359px){
    .xy-brand-text{ display:none; }
}