:root{
  --sidebar-width:120px;
  --sidebar-expanded:280px;
  --accent:#064bff; /* 更强的蓝（更饱和，约 +50%） */
  --muted:#6b7280;
  --card-bg: #ffffff;
  --page-bg: #f6f8fb;
  --sidebar-glass: rgba(6,75,255,0.20); /* 半透明亮蓝，颜色更浓 */
  --sidebar-glass-2: rgba(6,75,255,0.28);
  --area-bg: rgba(22,115,255,0.04);
  --area-accent: rgba(22,115,255,0.08);
}
*{box-sizing:border-box}
body{font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; color:#1f2937; margin:0; background-color:var(--page-bg)}

/* 背景拼接图（使用开源占位图服务） */
body::before{
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* fallback subtle tint when JS/CSS stacking not supported */
  background: linear-gradient(180deg, rgba(6,75,255,0.02), rgba(6,75,255,0.02));
  opacity: .12;
  filter: blur(0px) saturate(.95);
}

/* stacked full-screen backgrounds inserted into DOM (.bg-stack) */
.bg-stack{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:visible}
.bg-stack .bg-item{width:100%; height:100vh; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0.08; filter:blur(6px); background-image: url('/static/activity_background.png');}
.bg-stack .bg-item{position:absolute; left:0}
.bg-stack .bg-item:nth-child(1){top:0}
.bg-stack .bg-item:nth-child(2){top:100vh}
.bg-stack .bg-item:nth-child(3){top:200vh}
.bg-stack .bg-item:nth-child(4){top:300vh}
.bg-stack .bg-item:nth-child(5){top:400vh}
.bg-stack .bg-item:nth-child(6){top:500vh}

/* prevent background items from overlapping interactive content on small screens */
@media (max-width:900px){
  .bg-stack{display:none}
}
.page{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-width);
  background: linear-gradient(180deg, rgba(6,75,255,0.08), rgba(6,75,255,0.10));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:#042044; padding:14px 14px; transition:width .22s ease; position:sticky; top:0; height:100vh; overflow:hidden; z-index:20;
  display:flex; flex-direction:column; align-items:flex-start;
  border-right: 1px solid rgba(22,115,255,0.06);
}
.sidebar .logo{color:var(--accent); font-weight:700;}
.city-nav a{color:rgba(3,10,24,0.88)}
.sidebar.collapsed{width:48px}
.sidebar .logo{font-weight:700; letter-spacing:0.06em; margin-bottom:18px; font-size:14px}
.city-nav{flex:1; width:100%;}
.city-nav ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; align-items:center}
.city-nav a{display:block; width:100%; padding:10px 12px; color:rgba(3,10,24,0.9); text-decoration:none; font-size:15px; border-radius:8px; text-align:left; transition:all .18s}
.city-nav a:hover{background:rgba(6,75,255,0.06); transform:none}
.city-nav a.active{background:rgba(6,75,255,0.14); color:var(--accent); font-weight:700}
.toggle{background:transparent;border:none;color:rgba(255,255,255,.7);font-size:18px;padding:8px;cursor:pointer}

.content{flex:1;padding:0 28px; max-width:1400px; margin:0 auto}
.hero{background:transparent; padding:22px 0 8px;margin-bottom:14px}
.hero{background:transparent; padding:28px 0 12px;margin-bottom:22px}
.hero-inner{display:flex; align-items:center; gap:20px}
.hero-title{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Microsoft YaHei', Arial; font-weight:800; font-size:34px; margin:0; letter-spacing:0.01em; color:var(--accent); position:relative}
.hero-title::before{content:''; position:absolute; left:-18px; top:8px; width:6px; height:28px; background:var(--accent); border-radius:4px}
.hero-title::after{content:''; display:block; width:48px; height:6px; background:linear-gradient(90deg,var(--accent), #60b0ff); border-radius:4px; margin-top:8px}
.hero .lead{color:var(--muted);margin:6px 0 0;font-size:15px}

/* small badge near title (optional) */
.hero-badge{display:inline-block; background:var(--area-bg); color:var(--accent); padding:6px 10px; border-radius:999px; font-weight:700; margin-right:12px; font-size:13px}

@media (max-width:900px){
  .hero-title{font-size:22px}
  .hero-title::before{top:6px;height:20px;left:-12px}
  .hero-title::after{width:36px;height:4px}
  .hero .lead{font-size:13px}
}


.cities{display:grid;grid-template-columns:1fr; gap:18px;padding-bottom:48px}

.city-section{display:grid; grid-template-columns:1fr; gap:12px}
.city-info.card{display:flex; gap:18px; align-items:center; padding:0; border-radius:12px; overflow:hidden; border:1px solid rgba(3,10,24,.04); box-shadow: 0 12px 40px rgba(8,18,40,.08)}
.card-media{width:180px; height:120px; background-size:cover; background-position:center; flex-shrink:0}
.card-body{padding:16px}
.city-desc{color:var(--muted); margin:0; font-size:13px}

.activities-wrapper{background:var(--card-bg); padding:12px; border-radius:10px; border:1px solid rgba(3,10,24,.04)}
.activities-heading{margin:0 0 8px 0; font-size:15px}

/* 优雅表格风格 */
.activities-table{width:100%; border-collapse:separate; border-spacing:0 8px; table-layout:fixed}
.activities-table thead th{display:none}
.activities-table tbody tr{background:var(--card-bg); border-radius:10px}
.activities-table td{padding:10px 12px; vertical-align:middle; font-size:13px}
.activities-table tbody tr{box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02), 0 6px 18px rgba(8,18,40,0.04); border-radius:10px}
.activities-table tbody tr td{background:transparent}
.activities-table .col-time{padding-left:12px}
.activities-table .col-time{width:140px; min-width:90px; max-width:180px; font-weight:700; color:var(--accent); background:transparent; border-radius:8px}
.activities-table .col-title{width:22%; max-width:320px}
.activities-table .col-meta{width:16%; max-width:240px}
.activities-table .col-content{width:calc(100% - 140px - 22% - 16%)}
.activities-table .col-title{font-weight:600}
.activities-table .col-meta{color:var(--muted); font-size:13px}
/* removed row striping */
.activities-table tbody tr:hover td{background:var(--area-accent);} /* remove translate/float effect */

/* 时间样式：大数字日期 / 月日，时间在下方小字 */
.periods{display:flex; flex-direction:column; gap:6px}
.period-line{display:flex; flex-direction:column; align-items:flex-start}
.period-main{font-size:14px; font-weight:700; color:var(--accent); line-height:1}
.period-sub{display:none}
.period-main.raw{font-weight:600; color:var(--accent)}

/* small screens: reduce time column width */
@media (max-width:600px){
  .activities-table .col-time{width:96px}
  .period-main{font-size:13px}
}

/* allow wrapping and let rows grow naturally to fit content */
.activities-table td{white-space:normal; word-break:break-word; vertical-align:middle}

/* content column: allow unlimited wrapping so row height expands */
.activities-table .col-content{white-space:normal; overflow:visible}

.activities-table td{height:auto}

/* ensure wrapper shows horizontal scroll on very small screens */
.activities-wrapper{overflow-x:auto}

/* 导航样式更明显 */
.city-nav a{font-size:14px; color:rgba(3,10,24,0.96); padding:10px; display:inline-block}

/* 拉满主体 */
.container{max-width:1200px}

/* 图片卡片样式：城市图片 + 名称叠加 */
.image-card{position:relative; border-radius:8px; overflow:hidden; background: linear-gradient(180deg, rgba(6,75,255,0.12), rgba(6,75,255,0.08)); height: calc(100vh / 12); display:flex; align-items:center}
.image-card .city-image{display:none}
.image-card .city-overlay{position:relative; padding:0 20px}
.image-card h2{color:var(--accent); margin:0; font-size:22px; font-weight:700}

/* Make the city card clickable without default link styles */
.city-link{display:block; color:inherit; text-decoration:none}
.city-link:focus{outline:2px solid rgba(6,75,255,0.12); outline-offset:2px}

/* hide toggle button (no collapse) */
.sidebar .toggle{display:none}

.activities{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.activity{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:8px;transition:background .12s}
.activity:hover{background:rgba(11,20,38,.03)}
.act-time{min-width:56px;background:linear-gradient(180deg,var(--accent),#60b0ff);color:#fff;padding:8px 10px;border-radius:8px;font-weight:700;text-align:center}
.act-title{font-weight:600}
.act-meta{font-size:13px;color:var(--muted);margin-top:4px}

.grid-placeholder{height:1px}

/* Responsive */
@media (max-width: 900px){
  .city-card{grid-template-columns:1fr;}
  .card-media{min-height:160px}
  .sidebar{position:fixed; left:0; top:0; transform:translateX(0);}
  .content{padding-left:88px;padding-right:16px}
}

@media (max-width:600px){
  .sidebar{display:flex;flex-direction:row; height:auto; width:100%; padding:10px 12px; align-items:center}
  .city-nav ul{flex-direction:row; overflow:auto; padding:6px 0;}
  .city-nav a{white-space:nowrap; font-size:13px}
  .content{padding:12px}
}