/* static/css/ai_nav.css */
/* ================= ✨ AI 路牌专属样式 ✨ ================= */

/* 左侧菜单栏 */
.nav-sidebar { width: 220px; background: #111; height: calc(100vh - 70px); position: fixed; left: 0; top: 70px; border-right: 1px solid #222; overflow-y: auto; padding-top: 20px; z-index: 100; }
.nav-sidebar::-webkit-scrollbar { width: 4px; }
.nav-sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.nav-sidebar-item { padding: 12px 25px; cursor: pointer; color: #888; transition: 0.3s; font-size: 14px; }
.nav-sidebar-item:hover, .nav-sidebar-item.active { color: #00c6ff; background: rgba(0, 198, 255, 0.1); border-right: 3px solid #00c6ff; font-weight: bold; }

/* 右侧内容区 */
.nav-main-content { margin-left: 220px; padding: 30px 40px; min-height: calc(100vh - 70px); }
.nav-section-title { scroll-margin-top: 90px; font-size: 18px; margin-bottom: 25px; padding-left: 12px; border-left: 4px solid #00c6ff; font-weight: bold; color: #fff; }

/* 卡片网格布局 */
.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 60px; }
.nav-card { background: #161616; border: 1px solid #222; border-radius: 12px; padding: 18px; text-decoration: none; color: inherit; transition: 0.3s; display: flex; align-items: flex-start; gap: 14px; }
.nav-card:hover { border-color: #00c6ff; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }

/* 图标与文字 */
.nav-card-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display:flex; align-items:center; justify-content:center; border: 1px solid #333; color: #fff; font-size: 20px; font-weight: bold; background: linear-gradient(135deg, #6610f2, #00c6ff); position: relative; overflow: hidden; }
.nav-card-info { flex: 1; min-width: 0; text-align: left; }
.nav-card-info h4 { margin: 0 0 6px 0; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-card-info p { margin: 0; font-size: 12px; color: #777; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 针对动态抓取图标的优化 */
.fallback-letter { font-size: 20px; font-weight: bold; color: #fff; z-index: 1; }