/*
- 开发时间：2026-07-03
- 更新时间：2026-07-03
- 文件作用：cloudPrompt 顶部导航栏共享样式，3 个页面（提示词 / 1点01 / 工作清单）共用
- 实现原理：水平排列的链接条，当前页 .active 高亮（深蓝底白字，与 .title 主色 #1a237e 一致）；
            响应式：窄屏自动换行；粘性定位吸顶（sticky top:0）方便切换页面
- 如何调用：由 index.html / tasks.html / worklist.html 通过 <link rel="stylesheet" href="nav.css"> 引入
- 所属流程：cloudPrompt 前端导航流程
*/

/* 顶部导航栏容器：吸顶 + 水平排列 + 主色背景 */
.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    background-color: #1a237e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* 导航链接：默认透明底白字，hover 浅色高亮 */
.top-nav .nav-link {
    color: #fff;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.15s;
    white-space: nowrap;
}
/* hover 浅色高亮 */
.top-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
/* 当前页 active：白底深蓝字，醒目区分 */
.top-nav .nav-link.active {
    background-color: #fff;
    color: #1a237e;
    font-weight: bold;
}