/* ========= 移动端自适应优化 ========= */

/* 平板及以下 ≤1024 */
@media (max-width:1024px){
  header .max-w-\[1480px\]{padding-left:20px !important;padding-right:20px !important;padding-top:16px !important;padding-bottom:16px !important}
  main.max-w-\[1480px\]{padding-left:16px !important;padding-right:16px !important;padding-top:24px !important;padding-bottom:32px !important}
  header h1{font-size:19px !important}
  .hp-banner{border-radius:14px}
  .tools-header{flex-wrap:wrap;gap:6px;margin:22px 2px 14px}
}

/* 手机 ≤768 */
@media (max-width:768px){
  /* 顶部导航 */
  header .flex.items-center.justify-between{gap:10px}
  header .w-12.h-12{width:40px !important;height:40px !important;border-radius:12px !important}
  header .w-12.h-12 svg{width:22px !important;height:22px !important}
  header h1{font-size:16px !important;letter-spacing:-.01em}
  header .brand-badge{font-size:9px;padding:2px 6px}
  header p.text-white\/60{font-size:10px !important;margin-top:2px}
  #proxyStatusText,#proxyStatusDot{display:none}
  .session-badge{padding:4px 8px !important;font-size:11px !important}
  .session-badge .avatar{width:20px !important;height:20px !important;font-size:10px !important}
  .settings-btn{padding:6px 8px !important;min-width:auto !important}
  .settings-btn svg{width:16px;height:16px}
  #adminRoleBadge{display:none !important}

  /* 主内容 */
  main.max-w-\[1480px\]{padding:20px 12px 28px !important}
  .hp-banner{height:220px}
  .hp-slide h2{font-size:22px !important;line-height:1.35}
  .hp-slide p{font-size:13px !important}
  .hp-slide{padding:0 22px !important}

  /* 数据统计 2 列 */
  .hp-stats{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .hp-stat{padding:14px 10px}
  .hp-num{font-size:22px !important}
  .hp-lbl{font-size:11px !important}

  /* 公告 + 动态 单列 */
  .hp-grid{grid-template-columns:1fr !important;gap:12px}
  .hp-card{padding:16px !important;border-radius:14px}

  /* 工作台标题 */
  .tools-title{font-size:18px}
  .tools-title::before{width:3px;height:18px}
  .tools-sub{font-size:12px}

  /* 工具卡片 2 列 */
  .hp-tools-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px}
  .hub-card{padding:16px 14px 14px;border-radius:14px}
  .hub-icon{width:44px;height:44px;font-size:22px;border-radius:11px;margin-bottom:10px}
  .hub-name{font-size:14.5px;line-height:1.3}
  .hub-sub{font-size:11px;margin-bottom:6px}
  .hub-desc{font-size:12px;line-height:1.55;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hub-chip{font-size:10px;padding:2px 7px;margin:0 3px 4px 0}
  .hub-card .mb-4{margin-bottom:10px}
  .hub-cta{padding:9px 10px;font-size:12.5px;border-radius:10px}
  .hub-cta svg{width:14px;height:14px}
  .hub-badge{top:10px;right:10px;font-size:9px;padding:2px 7px}
  .hub-card::after{width:150px;height:150px}

  footer.mt-16{margin-top:32px !important;padding-top:20px !important}
  footer p{font-size:11px !important}
}

/* 小屏手机 ≤480 */
@media (max-width:480px){
  header .max-w-\[1480px\]{padding:12px 14px !important}
  header h1{font-size:15px !important}
  header .brand-badge{display:none}
  main.max-w-\[1480px\]{padding:16px 10px 24px !important}

  .hp-banner{height:190px;border-radius:12px}
  .hp-slide h2{font-size:19px !important}
  .hp-slide p{font-size:12px !important}
  .hp-slide-inner{padding:0}

  .hp-num{font-size:20px !important}

  /* 工具卡片：小屏仍保持 2 列，视觉更紧凑 */
  .hp-tools-grid{gap:10px}
  .hub-card{padding:14px 12px 12px}
  .hub-desc{-webkit-line-clamp:2}
  .hub-name{font-size:13.5px}
}

/* 隐藏小屏下过窄的卡片描述 chips（可选） */
@media (max-width:360px){
  .hub-chip:nth-child(n+3){display:none}
}

/* ========= 公告 & 实时动态 移动端专项 ========= */
@media (max-width:768px){
  /* 卡头 */
  .hp-card-head{margin-bottom:12px;padding-bottom:10px}
  .hp-card-title{font-size:15px;gap:6px}
  .hp-card-title .hp-dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(78,168,78,.15)}
  .hp-card-more{font-size:12px}

  /* 公告项：允许换行，日期归位到底部右侧 */
  .hp-ann-item{flex-wrap:wrap;gap:6px 8px;padding:10px 0;align-items:flex-start}
  .hp-ann-item:hover{margin:0 -8px;padding:10px 8px}
  .hp-ann-tag{font-size:10px;padding:2px 6px;order:1}
  .hp-ann-date{font-size:11px;order:2;margin-left:auto}
  .hp-ann-title{order:3;flex:0 0 100%;font-size:13.5px;white-space:normal;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:initial}
  .hp-ann-new{font-size:9px;padding:1px 4px;margin-left:4px}

  /* 实时动态 */
  .hp-feed{height:300px;mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent)}
  .hp-feed-list{gap:8px}
  .hp-feed-item{padding:8px 10px;gap:9px;border-radius:9px;border-left-width:2px;flex-wrap:wrap;align-items:flex-start}
  .hp-feed-avatar{width:28px;height:28px;font-size:11px}
  .hp-feed-body{font-size:12.5px;line-height:1.5;min-width:0;flex:1 1 calc(100% - 40px);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .hp-feed-time{font-size:10.5px;flex:0 0 100%;padding-left:37px;margin-top:-2px;opacity:.7}
}

/* 极小屏 ≤380 */
@media (max-width:380px){
  .hp-ann-tag{font-size:9.5px}
  .hp-ann-title{font-size:13px;-webkit-line-clamp:2}
  .hp-feed-body{font-size:12px}
  .hp-feed{height:270px}
}

/* 公告弹窗手机适配 */
@media (max-width:768px){
  .hp-modal-box{padding:20px 18px !important;max-height:85vh;border-radius:12px}
  .hp-modal-box h3{font-size:17px;line-height:1.4;padding-right:30px}
  .hp-modal-meta{font-size:12px;margin:8px 0 14px}
  .hp-modal-content{font-size:13.5px;line-height:1.7}
  .hp-modal-close{top:10px;right:12px;font-size:24px}
}

/* ========= 全局溢出防护（必须） ========= */
html,body{overflow-x:hidden !important;max-width:100vw;width:100%}
#mainApp{max-width:100vw;overflow-x:hidden}
*{min-width:0}
img,video,canvas,svg{max-width:100%;height:auto}

@media (max-width:768px){
  header,header>div,main{max-width:100vw !important;overflow-x:hidden;box-sizing:border-box}
  header .max-w-\[1480px\],main.max-w-\[1480px\]{width:100% !important;max-width:100% !important}

  /* header 强制紧凑（覆盖 tailwind px-10） */
  header>div.max-w-\[1480px\]{padding:12px 12px !important}
  header .flex.items-center.justify-between{gap:8px !important;flex-wrap:nowrap}
  header .flex.items-center.gap-4:first-child{gap:8px !important;flex:1;min-width:0}
  header .flex.items-center.gap-3{gap:6px !important;flex-shrink:0}
  header h1{font-size:14px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
  header .flex.items-baseline.gap-3{gap:6px !important;flex-wrap:wrap}
  header p.text-white\/60{display:none}
  #sessionNickname{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}

  /* main 收窄 */
  main.max-w-\[1480px\]{padding:14px 12px 28px !important;width:100vw !important}

  /* banner 完全填满，不出血 */
  .hp-banner{width:100%;max-width:100%;box-sizing:border-box;margin-left:0;margin-right:0}

  /* 卡片盒模型统一 */
  .hp-card,.hub-card{width:100%;max-width:100%;box-sizing:border-box;margin:0}
  .hp-stats{width:100%;box-sizing:border-box}
  .hp-stat{min-width:0;box-sizing:border-box}

  /* 公告项强化（提高优先级） */
  #hpAnnouncements .hp-ann-item{display:flex !important;flex-wrap:wrap !important;align-items:center !important;padding:11px 0 !important;gap:6px 8px !important}
  #hpAnnouncements .hp-ann-tag{order:1 !important;font-size:10px !important;padding:2px 6px !important;flex-shrink:0}
  #hpAnnouncements .hp-ann-date{order:2 !important;margin-left:auto !important;font-size:11px !important;flex-shrink:0}
  #hpAnnouncements .hp-ann-title{order:3 !important;flex:0 0 100% !important;width:100% !important;white-space:normal !important;overflow:visible !important;text-overflow:initial !important;font-size:13.5px !important;line-height:1.45 !important;color:var(--hp-ink);
    display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden !important;padding-right:4px}
  #hpAnnouncements .hp-ann-item:hover{margin:0 !important;padding:11px 0 !important;background:transparent}

  /* 实时动态强化 */
  #hpFeed .hp-feed{height:280px !important}
  #hpFeed .hp-feed-item{padding:9px 10px !important;flex-wrap:wrap !important;gap:8px !important}
  #hpFeed .hp-feed-avatar{width:28px !important;height:28px !important;font-size:11px !important;flex-shrink:0}
  #hpFeed .hp-feed-body{flex:1 1 calc(100% - 80px) !important;font-size:12.5px !important;line-height:1.5 !important;min-width:0;word-break:break-word;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #hpFeed .hp-feed-time{font-size:10.5px !important;flex-shrink:0;opacity:.65}
}

@media (max-width:400px){
  header>div.max-w-\[1480px\]{padding:10px !important}
  header h1{font-size:13px !important;max-width:140px}
  .session-badge{padding:3px 6px !important}
  .settings-btn{padding:5px 6px !important}
  main.max-w-\[1480px\]{padding:12px 10px 24px !important}
  #hpAnnouncements .hp-ann-title{font-size:13px !important}
  #hpFeed .hp-feed-time{flex:0 0 100%;padding-left:36px;margin-top:-4px}
}