/* 本文件为局部部署拷贝，源文件位于 ../css/styles.css */
/* 直接复制以确保单目录部署可用 */
/* CSS变量定义 */
:root {
    /* 主题颜色 */
    --primary-color: #3a86ff;
    --secondary-color: #8d99ae;
    --accent-color: #e76f51;
    --success-color: #2a9d8f;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    
    /* 背景颜色 */
    --bg-color: #ffffff;
    --card-bg-color: #ffffff;
    --nav-bg-color: #ffffff;
    
    /* 文本颜色 */
    --text-color: #1e293b;
    --text-muted: #64748b;
    --text-light: #f8fafc;
    
    /* 边框和阴影 */
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* 布局尺寸 */
    --header-height: 60px;
    --container-max-width: 1200px;
    --sidebar-width: 250px;
    --border-radius: 8px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
}

/* 基础重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s ease;
}

a { color: var(--primary-color); text-decoration: none; }
ul, ol { list-style-position: inside; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; }

/* 应用容器 */
.app-container { display:flex; flex-direction:column; min-height:100vh; }

/* 导航栏 */
.main-nav { background: var(--nav-bg-color); box-shadow: var(--shadow); padding:0 var(--spacing); height: var(--header-height); position: sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; transition: background-color .3s ease; }
.logo { display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:700; color: var(--primary-color); }
.logo i { font-size:1.5rem; }
.nav-links { display:flex; gap: var(--spacing); }
.nav-link { color: var(--text-color); padding:8px 12px; border-radius: var(--border-radius); display:flex; align-items:center; gap:8px; transition: background-color .2s ease, color .2s ease; }
.nav-link i { font-size:1.1rem; }
.nav-link:hover, .nav-link.active { color: var(--primary-color); background: rgba(58,134,255,.1); }
.nav-actions { display:flex; gap: var(--spacing-sm); }
.action-btn { background:none; border:none; color: var(--text-color); padding:8px; border-radius: var(--border-radius); display:flex; align-items:center; gap:6px; transition: background-color .2s ease, color .2s ease; }
.action-btn:hover { background: rgba(58,134,255,.1); color: var(--primary-color); }
.mobile-menu-btn { display:none; color: var(--text-color); font-size:1.5rem; cursor:pointer; padding:5px 10px; border-radius: var(--border-radius); transition: background-color .2s ease; z-index:1000; }
.mobile-menu-btn:hover { background: rgba(58,134,255,.1); }

/* 页面容器 */
.page-container { flex:1; padding: var(--spacing) var(--spacing) var(--spacing-lg); max-width: var(--container-max-width); margin:0 auto; width:100%; }
.page { display:none; }
.page.active { display:block; animation: fadeIn .3s ease-in-out; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.page-header { margin-bottom: var(--spacing-md); }
.page-header h1 { font-size:1.8rem; margin-bottom: var(--spacing-sm); color: var(--text-color); }

.trip-info { display:flex; flex-wrap:wrap; gap: var(--spacing); }
.trip-info-item { display:flex; align-items:center; gap:8px; color: var(--text-muted); }
.trip-info-item i { color: var(--primary-color); }

/* 卡片 */
.card { background: var(--card-bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: var(--spacing-md); margin-bottom: var(--spacing-md); transition: background-color .3s ease, box-shadow .3s ease; }
.card h2 { font-size:1.4rem; margin-bottom: var(--spacing); display:flex; align-items:center; gap:8px; }
.card h2 i { color: var(--primary-color); }

/* 时间线 */
.timeline { margin-bottom: var(--spacing-lg); }
.timeline-item { display:flex; gap: var(--spacing); margin-bottom: var(--spacing); position:relative; }
.timeline-item:before { content:''; position:absolute; top:22px; bottom:-20px; left:36px; width:2px; background: var(--border-color); z-index:1; }
.timeline-item:last-child:before { display:none; }
.time { min-width:70px; padding:4px 8px; background: var(--primary-color); color:#fff; border-radius: var(--border-radius); text-align:center; font-weight:500; position:relative; z-index:2; }
.item-content { flex:1; }
.item-content h3 { font-size:1.1rem; margin-bottom:4px; }
.item-content p { color: var(--text-muted); font-size:.95rem; }

/* 两列布局 */
.two-column { display:grid; grid-template-columns:2fr 1fr; gap: var(--spacing-md); }

/* 预算 */
.budget-items { margin-top: var(--spacing-sm); }
.budget-item { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-color); }
.budget-item:last-child { border-bottom:none; }
.budget-item.total { font-weight:bold; margin-top:10px; padding-top:15px; border-top:1px solid var(--border-color); }
.budget-label { color: var(--text-color); }
.budget-value { color: var(--primary-color); font-weight:500; }

/* 贴士 */
.tips-list { list-style:none; }
.tips-list li { display:flex; gap: var(--spacing-sm); margin-bottom: var(--spacing); }
.tips-list li i { color: var(--primary-color); font-size:1.2rem; padding-top:4px; }
.tips-list li h3 { font-size:1rem; margin-bottom:4px; }
.tips-list li p { color: var(--text-muted); font-size:.95rem; }

/* 页脚 */
.main-footer { background: var(--nav-bg-color); color: var(--text-muted); padding: var(--spacing); text-align:center; font-size:.9rem; box-shadow: var(--shadow); margin-top:auto; }

/* 响应式 */
@media (max-width:768px){
    .two-column{ grid-template-columns:1fr; }
    .mobile-menu-btn{ display:block; }
    .nav-links{ position:fixed; top: var(--header-height); left:0; right:0; background: var(--nav-bg-color); flex-direction:column; gap:0; transform: translateY(-150%); box-shadow: var(--shadow); opacity:0; transition: transform .3s ease, opacity .3s ease; z-index:999; display:flex; }
    .nav-links.active{ transform: translateY(0); opacity:1; display:flex; }
    .nav-link{ padding:12px var(--spacing); border-radius:0; border-bottom:1px solid var(--border-color); }
    .nav-actions{ gap:5px; }
    .action-btn span{ display:none; }
    .timeline-item{ flex-direction:column; gap:5px; }
    .timeline-item:before{ display:none; }
    .time{ max-width:100px; }
}

/* 打印 */
@media print{
    .main-nav, .nav-actions, .mobile-menu-btn{ display:none; }
    .page-container{ padding:0; }
    .card{ box-shadow:none; border:1px solid #ddd; }
    .page:not(.active){ display:block; }
    .tabs, .tab-btn, .map-filter-buttons, .map-zoom-controls{ display:none; }
    .tab-pane:not(.active){ display:block !important; }
    .two-column{ grid-template-columns:1fr; }
    body{ font-size:12pt; }
    .page-header h1{ font-size:18pt; }
    .card h2{ font-size:16pt; }
    .main-footer{ margin-top:20pt; border-top:1pt solid #ddd; box-shadow:none; }
}