/* ================================================================
   落秋阁 移动端全局优化 V1 — MOBILE APP EXPERIENCE
   目标：让所有页面在手机上呈现原生 APP 级的排版体验
   断点策略：860px 主断点 + 640px/520px/430px 细粒度适配
   ================================================================ */

/* ==============================
   一、全局移动端基础
   ============================== */
@media(max-width:860px){

  /* --- 防止水平溢出 --- */
  html, body{ overflow-x:hidden!important; }

  /* --- 字体：移动端使用系统默认中文字体，避免 KaiTi 等装饰字体不显示 --- */
  body, button, input, select, textarea{
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif !important;
  }

  /* --- 输入框和按钮：触控友好最小 44px（Apple HIG 标准）--- */
  input, select, textarea, button{
    min-height: 44px !important;
    font-size: 16px !important; /* 防止 iOS Safari 自动缩放 */
  }

  /* --- 卡片：全宽 + 简洁圆角 --- */
  .card{
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 16px !important;
    padding: 18px 15px !important;
  }

  /* --- Hero 面板 --- */
  .hero-panel{
    border-radius: 16px !important;
    padding: 22px 16px !important;
  }

  /* --- 标题 --- */
  .hero-title{ font-size: 24px !important; letter-spacing: 2px !important; }
  .hero-kicker{ font-size: 10px !important; letter-spacing: 3px !important; }
  .hero-desc{ font-size: 13px !important; }

  /* --- 按钮 --- */
  .gold-btn, .ghost-btn, .danger-btn{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
  }

  /* --- 模态弹窗 --- */
  .modal-card{
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    margin: 16px !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
  }

  /* --- 徽章 --- */
  .badge{ font-size: 11px !important; padding: 4px 10px !important; }

  /* --- 滚动条隐藏（移动端不需要）--- */
  *::-webkit-scrollbar{ width: 0 !important; height: 0 !important; }

  /* --- 安全区底部留白（适配 iPhone 底部横条）--- */
  .page{ padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
  .admin-shell{ padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ==============================
   二、小屏手机优化 (≤640px)
   ============================== */
@media(max-width:640px){

  /* --- 标题进一步缩小 --- */
  .hero-title{ font-size: 22px !important; }
  h2{ font-size: 19px !important; }
  h3{ font-size: 16px !important; }

  /* --- 卡片内边距收紧 --- */
  .card{ padding: 14px 12px !important; }

  /* --- 表单字段 --- */
  .field{ margin: 10px 0 !important; }
  .field label{ font-size: 13px !important; margin-bottom: 5px !important; }
  .field input, .field select, .field textarea{
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }

  /* --- 徽章更小 --- */
  .badge{ font-size: 10px !important; }
  .official-seal{ font-size: 10px !important; padding: 4px 10px !important; }
}

/* ==============================
   三、极小屏手机优化 (≤430px, iPhone SE/mini)
   ============================== */
@media(max-width:430px){

  .page{ padding: 66px 10px 80px 10px !important; }
  .admin-shell{ padding: 66px 10px 80px 10px !important; }
  .card{ padding: 12px 10px !important; border-radius: 14px !important; }
  .hero-panel{ padding: 18px 12px !important; border-radius: 14px !important; }
  .hero-title{ font-size: 20px !important; }
  h2{ font-size: 17px !important; }
  h3{ font-size: 15px !important; }
  .modal-card{ width: calc(100vw - 20px) !important; margin: 10px !important; padding: 16px 14px !important; }
}

/* ==============================
   四、登录页面
   ============================== */
@media(max-width:860px){
  .auth-card{
    width: calc(100vw - 32px) !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }
  .brand h1{ font-size: 34px !important; letter-spacing: 6px !important; }
  .brand p{ font-size: 12px !important; }
  .tabs{ gap: 8px !important; margin-bottom: 16px !important; }
  .tab{ padding: 11px !important; font-size: 14px !important; border-radius: 12px !important; }
}

@media(max-width:430px){
  .auth-card{
    width: calc(100vw - 20px) !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }
  .brand h1{ font-size: 28px !important; letter-spacing: 4px !important; }
}

/* ==============================
   五、首页仪表盘
   ============================== */
@media(max-width:860px){
  /* 快速入口卡片 */
  .quick{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .quick .badge{
    align-self: flex-start !important;
  }

  /* 小贴士卡片 */
  #dailyTip{ border-left-width: 3px !important; }

  /* 排行榜快照 */
  .notice-item{
    padding: 10px 0 !important;
    font-size: 13px !important;
  }
}

/* ==============================
   六、游梦阁（游戏中心）
   ============================== */
@media(max-width:860px){
  .game-card{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .game-card .gold-btn,
  .game-card .ghost-btn{
    width: 100% !important;
    justify-content: center !important;
  }
  .game-tags{
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .game-tags span{
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
}

/* ==============================
   七、闲秋百匣（工具中心）
   ============================== */
@media(max-width:860px){
  .tool-group .tool-summary{
    padding: 14px 16px !important;
  }
  .tool-group .tool-summary h3{
    font-size: 15px !important;
    width: 100% !important;
  }
  .tool-subs{
    padding: 12px 14px !important;
  }
  .tool-row{
    flex-direction: column !important;
    gap: 8px !important;
  }
  .tool-row input, .tool-row select, .tool-row button{
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }
  .tool-ta{ min-height: 70px !important; font-size: 14px !important; }
  .tool-output{ font-size: 13px !important; padding: 10px 12px !important; }
}

/* ==============================
   八、寻知阁（资源搜索）
   ============================== */
@media(max-width:860px){
  .search-hero-box{ gap: 8px !important; }
  .search-hero-box input{
    font-size: 15px !important;
    padding: 12px 14px !important;
  }
  .filter-tabs button{
    font-size: 12px !important;
    padding: 7px 12px !important;
  }
  .result-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* ==============================
   九、个人中心
   ============================== */
@media(max-width:860px){
  .profile-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .profile-main, .profile-side{
    width: 100% !important;
    max-width: none !important;
  }
  .profile-head{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .profile-head .avatar{
    width: 64px !important;
    height: 64px !important;
  }
  .profile-head h1{ font-size: 20px !important; }
  .profile-stats{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .profile-action{
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  .profile-logout{
    width: 100% !important;
    margin-top: 8px !important;
  }
}

@media(max-width:430px){
  .profile-stats{
    grid-template-columns: 1fr !important;
  }
}

/* ==============================
   十、修仙图鉴
   ============================== */
@media(max-width:860px){
  .baike-tabs{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .baike-tabs button{
    flex: 1 1 auto !important;
    min-width: 70px !important;
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
  .baike-card{
    grid-template-columns: 1fr !important;
  }
}

/* ==============================
   十一、仙途排行
   ============================== */
@media(max-width:860px){
  .rank-tabs{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .rank-tabs button{
    flex: 1 1 auto !important;
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
}

/* ==============================
   十二、每日签到
   ============================== */
@media(max-width:860px){
  .checkin-grid{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .checkin-day{
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
}

@media(max-width:430px){
  .checkin-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==============================
   十三、静览阁（收藏/解锁）
   ============================== */
@media(max-width:860px){
  .jinglan-tabs{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .jinglan-tabs button{
    flex: 1 1 auto !important;
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
}

/* ==============================
   十四、快捷导航
   ============================== */
@media(max-width:860px){
  .nav-grid{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .nav-tile{
    flex:0 0 calc(50% - 4px)!important;
    min-width:0!important;
    padding:12px 10px!important;
    border-radius:12px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:4px!important;
  }
  .nav-tile .nav-icon{ font-size:18px!important; }
  .nav-tile .nav-title{ font-size:12px!important; }
  .nav-tile .nav-url{ font-size:9px!important; }
  .nav-cat{ font-size:11px!important; padding-left:2px!important; }
  .nav-block{
    padding: 14px 12px !important;
  }
  .nav-block h3{ font-size: 14px !important; }
}

@media(max-width:430px){
  .nav-tile{
    flex:0 0 100%!important;
  }
}

/* ==============================
   十五、落秋钱庄（积分充值）
   ============================== */
@media(max-width:860px){
  .recharge-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ==============================
   十六、落秋 AI 助手
   ============================== */
@media(max-width:860px){
  .ai-shell{
    max-width: 100% !important;
    height: calc(100vh - 140px) !important;
    padding: 0 4px !important;
  }
  .ai-header h2{ font-size: 22px !important; letter-spacing: 2px !important; }
  .ai-header .ai-sub{ font-size: 10px !important; letter-spacing: 3px !important; }

  /* 聊天气泡 */
  .ai-bubble{
    max-width: 88% !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
  .ai-avatar{
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  /* 输入栏固定底部 */
  .ai-input-bar{
    gap: 6px !important;
    padding: 10px 4px !important;
  }
  .ai-input-bar textarea{
    font-size: 15px !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
  }
  .ai-input-bar button{
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    min-width: 44px !important;
  }
  .ai-send{ white-space: nowrap !important; }

  /* 图片预览 */
  .ai-img-previews{ gap: 6px !important; }
  .ai-img-previews .ai-thumb{
    width: 64px !important;
    height: 48px !important;
  }
}

@media(max-width:430px){
  .ai-shell{ height: calc(100vh - 130px) !important; }
  .ai-header h2{ font-size: 20px !important; }
  .ai-bubble{ max-width: 92% !important; font-size: 13px !important; padding: 8px 12px !important; }
}

/* ==============================
   十七、后台管理 V10 移动端适配
   ============================== */

/* 桌面端隐藏汉堡菜单按钮 */
.admin-menu-toggle{ display:none!important; }

@media(max-width:860px){
  /* 汉堡菜单按钮 */
  .admin-menu-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    border-radius:10px!important;
    background:rgba(214,182,106,.15)!important;
    border:1px solid rgba(214,182,106,.25)!important;
    color:#ecd089!important;
    font-size:20px!important;
    cursor:pointer!important;
    flex-shrink:0!important;
    padding:0!important;
    min-height:0!important;
  }

  /* 顶部导航：改为可横向滚动的标签栏 */
  .admin-top{
    position:fixed!important;
    top:64px!important; /* 在侧边栏下方 */
    left:8px!important;
    right:8px!important;
    z-index:18!important;
    padding:0!important;
    background:linear-gradient(180deg,rgba(255,253,250,.98),rgba(245,240,232,.96))!important;
    border:1px solid rgba(214,182,106,.2)!important;
    border-radius:14px!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 8px!important;
  }
  .admin-logo{
    font-size:13px!important;
    white-space:nowrap!important;
    flex-shrink:0!important;
    padding:0 4px!important;
  }
  .admin-nav{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    gap:4px!important;
    padding:0!important;
    margin:0!important;
    justify-content:flex-start!important;
    flex:1!important;
    min-width:0!important;
  }
  .admin-nav::-webkit-scrollbar{ display:none!important; }
  .admin-nav a{
    flex-shrink:0!important;
    white-space:nowrap!important;
    font-size:12px!important;
    padding:8px 14px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.03)!important;
    border:1px solid rgba(214,182,106,.12)!important;
    color:#c0aa78!important;
    text-decoration:none!important;
    transition:all .15s!important;
  }
  .admin-nav a:hover, .admin-nav a.active{
    background:linear-gradient(135deg,rgba(214,182,106,.2),rgba(156,113,48,.1))!important;
    border-color:rgba(214,182,106,.4)!important;
    color:#ecd089!important;
  }
  .admin-top .muted{
    display:none!important;
  }

  /* 展开导航时显示下拉菜单（点击汉堡按钮）*/
  .admin-top.nav-open{
    flex-wrap:wrap!important;
    height:auto!important;
    max-height:80vh!important;
    overflow-y:auto!important;
    padding:8px!important;
    border-radius:16px!important;
  }
  .admin-top.nav-open .admin-nav{
    flex-direction:column!important;
    width:100%!important;
    overflow-x:hidden!important;
  }
  .admin-top.nav-open .admin-nav a{
    width:100%!important;
    padding:10px 14px!important;
    font-size:13px!important;
    border-radius:10px!important;
    text-align:left!important;
  }
  .admin-top.nav-open .admin-logo{
    width:100%!important;
    padding:6px 10px!important;
    margin-bottom:4px!important;
    border-bottom:1px solid rgba(214,182,106,.15)!important;
  }

  /* 后台内容区 */
  .admin-page{
    padding-top:60px!important; /* 为顶部导航留空间 */
  }
  .admin-hero{
    padding:18px 16px!important;
    border-radius:14px!important;
    margin-bottom:12px!important;
  }
  .admin-hero h1{ font-size:22px!important; }
  .admin-hero small{ font-size:10px!important; }
  .admin-hero.compact{ padding:14px 16px!important; }

  /* 统计卡片 */
  .admin-stats{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }
  .admin-stats .stat-card{
    padding:14px 12px!important;
    border-radius:14px!important;
  }
  .admin-stats .stat-card h3{ font-size:13px!important; }
  .admin-stats .stat-card .num{ font-size:22px!important; }

  /* 内容面板 */
  .admin-panel{
    padding:16px 14px!important;
    border-radius:14px!important;
  }
  .admin-panel h3{ font-size:16px!important; }

  /* 后台表格 */
  .admin-panel table{
    display:block!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    font-size:12px!important;
  }
  .admin-panel table th,
  .admin-panel table td{
    padding:8px 6px!important;
    white-space:nowrap!important;
  }

  /* 后台表单 */
  .admin-panel .field input,
  .admin-panel .field select,
  .admin-panel .field textarea{
    font-size:15px!important;
    padding:10px 12px!important;
  }
  .admin-panel .form-row{
    flex-direction:column!important;
    gap:8px!important;
  }
}

@media(max-width:640px){
  .admin-nav a{ font-size:11px!important; padding:7px 10px!important; }
  .admin-stats{ grid-template-columns:1fr 1fr!important; }
  .admin-hero h1{ font-size:19px!important; }
}

@media(max-width:430px){
  .admin-stats{ grid-template-columns:1fr!important; }
  .admin-nav a{ font-size:10px!important; padding:6px 8px!important; }
}

/* ==============================
   十八、天命系统（原型保留）
   ============================== */
@media(max-width:860px){
  .tianming-shell{
    padding:70px 0 40px 0!important;
  }
  .tianming-shell canvas{
    width:100%!important;
    height:auto!important;
  }
}

/* ==============================
   十九、全局动画优化（移动端减动效）
   ============================== */
@media(max-width:860px) and (prefers-reduced-motion:no-preference){
  .card:hover, .auth-card:hover, .hero-panel:hover{
    transform:none!important;
  }
  .quick:hover, .resource-card:hover, .profile-action:hover{
    transform:none!important;
  }
}
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.001s!important;
    transition-duration:0.001s!important;
  }
}

/* ==============================
   二十、V11 底部标签栏（移动端）
   ============================== */
.mobile-tab-bar{
  display:none!important;
}

@media(max-width:860px){
  .mobile-tab-bar{
    display:flex!important;
    position:fixed!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    z-index:25!important;
    height:calc(64px + env(safe-area-inset-bottom, 0px))!important;
    padding:6px 16px env(safe-area-inset-bottom, 0px)!important;
    background:linear-gradient(180deg,rgba(255,252,248,.94),rgba(240,235,225,.98))!important;
    border-top:1px solid rgba(236,208,137,.14)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    justify-content:space-around!important;
    align-items:center!important;
    gap:0!important;
    box-shadow:0 -8px 32px rgba(0,0,0,.5)!important;
  }

  .mobile-tab{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    padding:4px 0!important;
    text-decoration:none!important;
    color:#8a8068!important;
    transition:color .2s,transform .2s!important;
    flex:1!important;
    position:relative!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .mobile-tab:active{
    transform:scale(.92)!important;
  }

  .mobile-tab.active{
    color:#ecd089!important;
  }

  .mobile-tab.active::before{
    content:""!important;
    position:absolute!important;
    top:-7px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:24px!important;
    height:3px!important;
    border-radius:0 0 3px 3px!important;
    background:linear-gradient(180deg,#ecd089,#d6b66a)!important;
    box-shadow:0 0 10px rgba(236,208,137,.4)!important;
  }

  .mobile-tab-icon{
    font-size:20px!important;
    line-height:1!important;
  }

  .mobile-tab-label{
    font-size:10px!important;
    font-weight:500!important;
    letter-spacing:.05em!important;
    line-height:1!important;
  }

  /* 页面底部留白适配标签栏 */
  .page{
    padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px))!important;
  }

  .auth-page{
    padding-bottom:0!important;
  }

  .admin-shell{
    padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px))!important;
  }
}