/* 应用层移动端适配 · 第二批（app / drama / account / admin / embed-demo）
   新增文件，不改动 styles.css。
   说明：wardrobe / recharge / prompt-gallery 三页自带 640~720px 响应式，不在本列。
   核心问题统一为：窄屏下「固定宽侧边栏 + 1fr」把主内容挤到 100~200px，
   且外层 height:100vh + overflow:hidden 会把超出部分直接裁掉。 */

@media (max-width: 860px) {

  /* ==========================================================
     A. app.html 创作工作台
     与 painting 同构 .app-shell，但账号操作（个人中心/设置/退出）
     放在 .user-panel 里 —— 所以不能像 painting 那样把它隐藏。
     ========================================================== */
  .app-shell {
    /* minmax(0,1fr) 是关键：否则横滑导航会把 grid 列撑到 700+px 再被裁掉 */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
  }
  .sidebar {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow: visible;
    gap: 6px;
    flex-direction: column;
  }
  .sidebar .brand,
  .sidebar .quick-panel { display: none; }

  .sidebar-inner,
  .sidebar-secondary {
    overflow: visible;
    min-width: 0;
    padding-bottom: 0;
  }

  /* 导航横滑 */
  .nav-tabs,
  .sidebar-secondary {
    display: flex;
    flex-direction: row;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-tabs::-webkit-scrollbar,
  .sidebar-secondary::-webkit-scrollbar { display: none; }

  .nav-group-label { display: none; }
  .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 11px;
    font-size: 12.5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
  }
  .nav-tab.active { background: rgba(217, 154, 43, 0.20); }
  .nav-tab img.nav-icon { display: none; }

  /* 账号操作保留，改横排小按钮 */
  .user-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }
  .user-panel > div { width: 100%; }
  .user-panel .ghost-btn,
  .user-panel .nav-tab { padding: 7px 12px; font-size: 12.5px; }

  .main-content {
    height: auto;
    min-width: 0;
    padding: 16px 14px 48px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* 设置面板里的多列卡片改单列 */
  .settings-grid,
  .settings-card-list,
  .theme-grid,
  .settings-panes { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item { flex: 0 0 auto; white-space: nowrap; }

  .modal-card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: 88dvh;
    overflow-y: auto;
  }

  /* ==========================================================
     B. drama.html 杰瑞剧场
     .drama-body 是 flex row；.drama-sidebar 写死 width:200px
     ========================================================== */
  .drama-app { height: 100dvh; }
  .drama-header { padding: 10px 14px; gap: 10px; }
  .drama-header .logo { font-size: 15px; gap: 8px; }
  .drama-header .back-link { padding: 5px 10px; font-size: 12px; }

  .drama-body {
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  .drama-sidebar {
    width: auto;
    min-width: 0;
    flex-direction: row;
    gap: 6px;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .drama-sidebar::-webkit-scrollbar { display: none; }
  .drama-sidebar .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
  }
  .drama-sidebar .nav-item.active { background: rgba(217, 154, 43, 0.20); }
  .drama-sidebar .nav-item svg.ic { width: 16px; height: 16px; }

  .drama-main {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 16px 14px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .drama-main table { display: block; overflow-x: auto; }
  .drama-main img,
  .drama-main video { max-width: 100%; height: auto; }

  .reauth-card {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: 88dvh;
    overflow-y: auto;
  }

  /* ==========================================================
     C. account.html 个人中心 / admin.html 后台
     两者共用 .admin-shell / .account-shell-page（280px + 1fr，height:100vh）
     ========================================================== */
  .admin-body,
  .account-body { min-height: 100dvh; height: auto; overflow: visible; }

  .admin-shell,
  .account-shell-page {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-sidebar,
  .account-sidebar {
    min-height: 0;
    gap: 10px;
    padding: 12px 12px 10px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 10, 18, 0.92);
  }
  /* 品牌区让位给导航（主区 topbar 已有标题） */
  .admin-sidebar .brand,
  .account-sidebar .brand { display: none; }

  .admin-menu {
    display: flex;
    flex-direction: row;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .admin-menu::-webkit-scrollbar { display: none; }
  .admin-menu-item {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 999px;
  }
  .admin-menu-item span { font-size: 11px; }

  .admin-back { margin-top: 0; align-self: flex-start; flex: 0 0 auto; }

  .admin-main,
  .account-main {
    min-height: 0;
    min-width: 0;
    max-width: none;
    padding: 16px 14px 40px;
    overflow: visible;
  }
  .admin-topbar,
  .account-main .admin-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
  }
  .admin-topbar h2 { font-size: 22px; }

  /* 主区原本被 height:calc(100% - 82px) 锁死 */
  #accountLedgerPanel,
  #accountProfilePanel { height: auto; overflow: visible; padding: 18px; }

  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stats strong { font-size: 20px; }
  .admin-package-grid { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .admin-toolbar,
  .redeem-toolbar { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .admin-table-wrap { overflow-x: auto; }
  .admin-table { min-width: 640px; }
  .account-profile.large .brand-mark { width: 52px; height: 52px; }
  .account-profile.large strong { font-size: 20px; }

  /* 三生态卡单列 */
  .account-ecosystem { padding: 18px; }
  .account-ecosystem__grid { grid-template-columns: minmax(0, 1fr); }

  /* ==========================================================
     D. embed-demo.html 嵌入指南
     ========================================================== */
  .wrap { padding: 32px 14px 60px; }
  .wrap h1 { font-size: 23px; }
  .wrap h2 { font-size: 17px; margin: 32px 0 12px; }
  .card { padding: 16px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  pre { font-size: 12px; }
}

/* ---- 超窄屏 ---- */
@media (max-width: 520px) {
  .admin-stats { grid-template-columns: minmax(0, 1fr); }
  .main-content,
  .drama-main,
  .admin-main,
  .account-main { padding-left: 12px; padding-right: 12px; }
}