/* ============================================================
   全局（桌面+移动）：所有 Toast 统一从页面顶部居中弹出
   ============================================================ */
.toast,
.app-toast{
  top:24px !important;
  bottom:auto !important;
  left:50% !important;
  right:auto !important;
  margin:0 auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
.toast.show,
.app-toast.show{transform:translateX(-50%) translateY(0) !important}
/* 已自带顶部居中容器（.toastContainer）的页面，子 toast 不再二次平移，由容器统一居中 */
.toastContainer{top:20px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;align-items:center!important}
.toastContainer .toast{left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0!important}
.toastContainer .toast.show{transform:none!important}

/* ============================================================
   TK工作台 全站移动端适配（共享）
   断点：≤768px 手机；≤420px 小屏微调
   ============================================================ */
@media (max-width:768px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{overflow-x:hidden}
  img,video,canvas{max-width:100%}
  *{-webkit-tap-highlight-color:transparent}

  /* ---- 外壳：侧栏改抽屉，主区占满 ---- */
  .app{flex-direction:column!important;height:auto!important;min-height:100vh;overflow:visible!important}
  .main{margin-left:0!important;width:100%!important;height:auto!important;min-height:100vh;overflow:visible!important}
  .side{position:fixed!important;display:block!important;left:0;top:0;bottom:0;width:222px!important;max-width:74vw;height:100vh!important;
        transform:translateX(-105%);transition:transform .25s ease;z-index:100002!important;overflow-y:auto;
        box-shadow:0 0 40px rgba(0,0,0,.45);padding-bottom:20px}
  .side.mobile-open{transform:translateX(0)}
  /* 覆盖 index 既有 @media(max-width:1100px) 把 .nav 整体隐藏/居中的规则，抽屉内完整左对齐 */
  .side .logo{justify-content:flex-start!important;padding:14px 16px!important}
  .side .nav,.side .navLabel,.side .foot{display:flex!important}
  .side .logo span{display:inline!important}
  .side .navLabel{justify-content:flex-start!important;text-align:left!important;padding:12px 18px 6px!important}
  .side .nav{justify-content:flex-start!important;text-align:left!important;font-size:13px;padding:11px 16px!important;
        margin:0 10px 2px!important;width:calc(100% - 20px)!important;box-sizing:border-box!important}
  .side .nav b{margin:0 10px 0 0!important}
  .side .nav-sub-item{padding-left:46px!important}
  .side .foot{font-size:11px!important;padding:10px 16px!important;height:auto!important}
  .mobile-dim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100001}
  .mobile-dim.show{display:block}
  .mobile-menu-btn{display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:34px;
        border:1px solid var(--line,#292e3d);background:var(--panel2,#171b27);border-radius:9px;color:var(--ink,#f6f7fb);
        font-size:18px;line-height:1;cursor:pointer;padding:0;flex-shrink:0}

  /* ---- 顶栏 ---- */
  .top,.topbar{height:auto!important;min-height:54px;padding:8px 12px!important;flex-wrap:wrap!important;gap:8px!important;font-size:12px}
  .top .news-ticker,.topbar .news-ticker{order:10;width:100%;min-width:0}
  .content,.contentBody{padding:12px!important;overflow-x:hidden!important;overflow-y:visible!important}
  .tab-contents-wrapper{overflow:hidden!important;min-height:calc(100vh - 110px)}
  .tab-content{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}
  /* 外壳内嵌 iframe：自动高度主区下 iframe 100% 会塌陷，给足视口级高度（display 由内联样式控制，不强制） */
  #pageIframeContainer{flex-direction:column!important;flex:none!important;
        height:calc(100vh - 56px)!important;min-height:calc(100vh - 56px)}
  #pageIframeContainer iframe{flex:1 1 auto!important;width:100%!important;height:100%!important;min-height:0;border:0}
  /* 右侧抽屉（图片生成记录等）手机端全屏、内部滚动 */
  .drawer{width:100%!important;max-width:100vw!important;height:100dvh!important}
  .drawerBody{flex:1 1 auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}

  /* ---- 通用卡片/栅格 ---- */
  .stats-grid,.stat-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .stat-card{padding:12px!important}
  .stat-value{font-size:20px!important}
  [class*="-grid"]{gap:10px!important}
  .cards-grid,.tool-grid,.tools-grid,.workbench-grid,.grid-3,.grid-4{grid-template-columns:1fr!important}
  .grid-2{grid-template-columns:1fr!important}

  /* ---- 筛选/工具行自动换行 ---- */
  .filter-bar,.toolbar,.filter-row,.tools-bar,.query-bar,.search-bar{flex-wrap:wrap!important;gap:8px!important}
  .filter-bar select,.filter-bar input,.toolbar select,.toolbar input,
  .filter-row select,.filter-row input,.query-bar select,.query-bar input{max-width:100%!important;font-size:13px!important}
  button{max-width:100%}

  /* ---- 表格横向滚动，不挤压 ---- */
  table{display:block;width:100%;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  table thead,table tbody{display:table;width:100%;min-width:520px}
  /* 负 margin 的粘性页头在窄屏收回 */
  .pageHeader{margin:0 0 12px!important;padding:4px 0!important;gap:8px!important;position:static!important}
  .pageHeader .titleGroup h1{font-size:20px!important}
  .pageHeader .actions,.pageHeader .vTools{flex-wrap:wrap!important;gap:8px!important;width:100%}
  .vTools .vToolSel,.vTools .vToolInput,.vTools .vReportBtn{flex:1 1 auto!important;min-width:0}
  .vTools .vToolInput{min-width:140px;flex:2 1 160px!important}

  /* ---- 表单 ---- */
  input,select,textarea{font-size:14px!important}
  .form-row,.form-grid{grid-template-columns:1fr!important;flex-direction:column!important;align-items:stretch!important}

  /* ---- 弹窗 ---- */
  .modal,.dialog,.qg-modal,.editBox{width:94vw!important;max-width:94vw!important;max-height:88vh;overflow-y:auto}
  .modal-overlay,.qg-modal-overlay,.modalOverlay{padding:12px!important;justify-content:center!important;padding-top:5vh;overflow-y:auto!important}
  .modalOverlay{place-items:start center!important}
  .modal-overlay.open,.modal-overlay.show,.qg-modal-overlay.show{display:flex!important;align-items:flex-start!important}
  .modalOverlay .modal{max-height:82vh;overflow-y:auto}
  .modalActions{flex-wrap:wrap!important}
  /* 任务卡失败原因允许换行，不再被右侧裁掉 */
  .task-item-failreason{white-space:normal!important;flex:1 1 100%!important;overflow:visible!important;text-overflow:clip!important}
  /* 顶栏：面包屑与操作区自动换行，内部按钮组可横滑，不把整页顶歪 */
  .topbar .crumb{min-width:0;word-break:break-word}
  .topbar-actions{flex-wrap:wrap!important;gap:8px!important;max-width:100%}
  .view-tabs,.dc-tabs{display:flex;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%}
  .view-tabs>*,.dc-tabs>*{flex-shrink:0}

  /* ---- 首页(index) ---- */
  .tab-bar{display:flex!important;height:auto!important;min-height:44px;padding:6px 10px!important}
  .hero{padding:16px 14px!important;gap:10px!important;min-height:0!important}
  .hero-inner{flex-direction:column!important;align-items:flex-start!important;gap:12px;height:auto!important;padding:0}
  .hero-text{width:100%}
  .hero-text .tag{white-space:normal;word-break:break-word;line-height:1.5}
  .hero h1{font-size:20px!important;writing-mode:horizontal-tb!important;white-space:normal!important;word-break:break-word}
  .hero p{font-size:12px!important;white-space:normal!important;writing-mode:horizontal-tb!important}
  .hero-features{display:grid!important;grid-template-columns:1fr 1fr;width:100%;flex-wrap:wrap!important;gap:10px!important}
  .hf-item{min-width:0}
  .hf-divider{display:none!important}
  /* 快捷生成区：上传区与输入框上下堆叠，避免占位被挤成竖排 */
  .qg-input-zone{flex-direction:column!important;max-height:none!important;gap:10px}
  .qg-upload-area{width:100%!important;max-width:100%!important}
  .qg-input{width:100%!important;flex:none!important}
  .qg-params,.qg-param-row{flex-wrap:wrap!important}
  .task-panel{padding:12px!important}
  .task-panel-head{flex-direction:column!important;align-items:stretch!important;gap:10px;margin:0 -12px 14px!important;padding:12px!important;position:static!important}
  .task-panel-head h2{font-size:18px}
  .task-filters,.task-filter-row{flex-wrap:wrap!important;justify-content:flex-start!important}
  .task-item{padding:12px!important;flex-wrap:wrap!important}
  .task-item-cover{width:64px!important;height:84px!important;min-height:0!important;align-self:flex-start!important}
  .task-item-meta{gap:8px 12px!important;font-size:11px}
  .task-item .action-row,.task-item-actions{flex-wrap:wrap!important}
  .task-list{gap:10px!important}
  .pagination,.pager{flex-wrap:wrap!important;gap:6px!important;justify-content:center!important}
  .user-name-mini{display:none}
  .login-btn,.admin-entry-btn{padding:7px 12px!important;font-size:12px}
  .env-badge{display:none!important}

  /* ---- 购买积分弹窗 ---- */
  .tkb-mask{padding:10px!important;overflow-y:auto;align-items:flex-start!important;padding-top:3vh!important}
  .tkb-mask:not(.open){display:none!important}
  .tkb-dialog{width:100%!important;max-width:96vw!important;grid-template-columns:1fr!important;min-height:0!important;max-height:none;margin:0 auto}
  .tkb-left{display:none!important}
  .tkb-shop{padding:16px 14px!important}
  .tkb-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .tkb-card{padding:10px 8px!important;min-width:0}
  .tkb-cred{font-size:17px!important;white-space:nowrap;transform:scale(.92);transform-origin:left center}
  .tkb-paybox-body,.tkb-bankbody{flex-direction:column!important;gap:14px!important;align-items:stretch!important}
  .tkb-qrbox{margin:0 auto!important;width:176px!important;height:176px!important}
  .tkb-paybox-body>div:last-child,.tkb-bankbody>div:last-child{text-align:center}

  /* ---- 用户中心 ---- */
  .header{padding:0 12px!important;height:auto!important;min-height:56px;flex-wrap:wrap;gap:6px}
  .container{padding:12px!important;max-width:100%!important}
  .tabs{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .tabs .tab{white-space:nowrap;flex-shrink:0}
  .card{padding:14px!important}

  /* ---- 登录/注册 ---- */
  .top-nav{padding:10px 12px!important}
  .auth-card{width:94vw!important;padding:22px 18px!important}
  .auth-card .logo{margin-bottom:10px}

  /* ---- 图片制作 ---- */
  .gen-panel,.params-panel,.result-panel{grid-template-columns:1fr!important}
  .refPreviewArea{max-width:100%!important}
  .image-grid,.img-grid,.batch-grid{grid-template-columns:repeat(2,1fr)!important}

  /* ---- 创意灵感 ---- */
  .video-grid,.insp-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .insp-toolbar,.source-bar{flex-wrap:wrap!important}

  /* ---- 数据中心 ---- */
  .va-dialog,.video-analysis-modal{width:96vw!important;max-width:96vw!important;max-height:90vh;overflow-y:auto}
  .dc-grid,.overview-grid{grid-template-columns:repeat(2,1fr)!important}

  /* ---- 资产/设置 ---- */
  .assets-grid{grid-template-columns:repeat(2,1fr)!important}
  .setting-row{flex-direction:column!important;align-items:flex-start!important;gap:8px}

  /* ---- 用户中心内嵌外壳：内层头部改文档流，避免被外壳顶栏压住 ---- */
  html.embedded body{padding-top:0!important}
  html.embedded .header{position:static!important;height:auto!important;min-height:48px;flex-wrap:wrap;gap:8px;padding:10px 12px!important}
  html.embedded .header .header-right{flex-wrap:wrap;gap:8px}
  html.embedded .hdr-btn{padding:7px 12px;font-size:12px}
}

@media (max-width:420px){
  .stats-grid,.stat-grid,.dc-grid,.overview-grid{grid-template-columns:1fr 1fr!important}
  .image-grid,.img-grid,.batch-grid,.video-grid,.insp-grid,.assets-grid{grid-template-columns:1fr!important}
  .hero h1{font-size:18px!important}
  .top .user-entry .user-avatar-mini,.topbar .user-avatar-mini{width:30px;height:30px}
  .tkb-grid{grid-template-columns:1fr 1fr!important}
}