/* ============================================================
   响应式：三档布局
   ≥1280  完整侧栏 + 多列工作区
   901–1279  图标窄栏（rail）
   ≤900   移动端：顶部栏 + 底部 Tab
   ============================================================ */

/* ---------- 中等屏：侧栏收窄为图标栏 ---------- */
@media (max-width: 1279px) and (min-width: 901px){
  .sidebar{ width:var(--rail-w); flex:0 0 var(--rail-w); padding:18px 10px 14px; align-items:center; }
  .brand{ padding:4px 0 16px; justify-content:center; }
  .brand-txt{ display:none; }
  .nav{ width:100%; }
  .nav-group{ margin-top:14px; }
  .nav-label{ display:none; }
  .nav-item{ justify-content:center; padding:0; height:42px; }
  .nav-item span.nav-txt{ display:none; }
  .nav-item .ic{ width:19px; height:19px; }
  .nav-item.on::before{ left:-10px; }
  .nav-badge{ position:absolute; top:6px; right:8px; margin:0; padding:2px 4px; font-size:9px; }
  .side-foot{ width:100%; }
  .acct{ justify-content:center; padding:8px 0; }
  .acct-meta{ display:none; }
  .topbar{ padding:0 20px; }
  .content{ padding:20px 20px 36px; }
}

/* ---------- 栅格降级 ---------- */
@media (max-width: 1200px){
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-2-1,.g-1-2,.g-3-2{ grid-template-columns:minmax(0,1fr); }
  .niche-hero{ grid-template-columns:1fr; }
}

/* ============================================================
   移动端
   ============================================================ */
@media (max-width: 900px){
  :root{ --topbar-h:56px; }

  body{ font-size:13.5px; }
  .shell{ display:block; min-height:100vh; }
  .sidebar{ display:none; }

  /* 顶部栏 */
  .topbar{
    height:calc(var(--topbar-h) + env(safe-area-inset-top));
    flex-basis:calc(var(--topbar-h) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
    gap:9px;
    background:rgba(7,8,11,.86);
  }
  .tb-brand{ display:grid; place-items:center; }
  .tb-brand .brand-mark{ width:28px; height:28px; border-radius:9px; }
  .tb-brand .brand-mark svg{ width:16px; height:16px; }
  .tb-left{ gap:0; overflow:hidden; }
  .tb-title{ font-size:15px; font-weight:620; overflow:hidden; text-overflow:ellipsis; }
  .tb-sub{ display:none; }
  .tb-right{ gap:5px; flex:0 0 auto; }
  .live-pill{ display:none; }
  .icon-btn{ width:32px; height:32px; }
  .tb-right .icon-btn.search{ display:none; }
  .tb-user .av{ width:27px; height:27px; font-size:12px; }
  .topbar .seg{ padding:2px; border-radius:9px; flex:0 0 auto; }
  .topbar .seg button{ height:23px; padding:0 7px; font-size:10px; border-radius:6px; }

  .content{
    padding:14px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 22px);
  }

  /* 底部 Tab */
  .tabbar{
    display:flex; align-items:center;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(9,10,15,.94);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    border-top:1px solid var(--line);
  }
  .tab{
    flex:1; height:var(--tabbar-h); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    color:var(--text-4); font-size:9.5px; font-weight:500; position:relative;
    transition:color .18s var(--ease);
  }
  .tab .ic{ width:21px; height:21px; }
  .tab.on{ color:#fff; }
  .tab.on .ic{ color:var(--brand-2); }
  .tab.on::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:24px; height:2.5px; border-radius:0 0 3px 3px;
    background:var(--brand); box-shadow:0 0 14px rgba(254,44,85,.9);
  }
  .tab .tb-dot{
    position:absolute; top:7px; left:calc(50% + 7px);
    width:6px; height:6px; border-radius:50%; background:var(--brand);
    box-shadow:0 0 0 2px rgba(9,10,15,.95);
  }
  .tab:active{ background:rgba(255,255,255,.03); }

  /* 布局 */
  .view-head{ margin-bottom:14px; gap:10px; }
  .vh-title{ font-size:16px; }
  .vh-sub{ font-size:11px; }
  .vh-actions .btn{ height:30px; padding:0 11px; font-size:11.5px; }

  .grid{ gap:12px; }
  .g2,.g3,.g-2-1,.g-1-2,.g-3-2{ grid-template-columns:minmax(0,1fr); }
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .span2{ grid-column:span 1; }
  .stack{ gap:12px; }

  .card{ border-radius:16px; }
  .card-hd{ padding:14px 14px 0; gap:9px; }
  .card-hd.bordered{ padding-bottom:12px; }
  .card-body{ padding:13px 14px 15px; }
  .card-foot{ padding:11px 14px; }
  .card-title{ font-size:13px; }
  .card-sub{ font-size:10.5px; }
  .card-hd-r .btn span{ display:none; }

  .kpi{ padding:13px 13px 12px; }
  .kpi-label{ font-size:10.5px; }
  .kpi-val{ font-size:21px; letter-spacing:-.6px; margin-top:6px; }
  .kpi-val .unit{ font-size:10.5px; }
  .kpi-ico{ width:22px; height:22px; border-radius:6px; }
  .kpi-ico .ic{ width:13px; height:13px; }
  .kpi-delta{ font-size:10.5px; }
  .kpi-note{ display:none; }
  .kpi-bot{ min-height:24px; margin-top:5px; }
  .kpi-spark svg{ width:66px; height:22px; }

  /* 表格 → 卡片 */
  .works-table-wrap{ display:none; }
  .work-cards{ display:flex; }

  .filterbar{ padding:10px 14px; gap:6px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .filterbar::-webkit-scrollbar{ display:none; }
  .filterbar .searchbox{ min-width:150px; flex:0 0 auto; }
  .filterbar .seg{ flex:0 0 auto; }
  .filterbar .sel{ flex:0 0 auto; }
  .filterbar .btn[data-act="export"]{ display:none; }

  /* 浮层 */
  .drawer{ width:100vw; border-left:0; }
  .drawer-hd{ padding:14px 16px 12px; }
  .drawer-body{ padding:16px 16px calc(30px + env(safe-area-inset-bottom)); }
  .modal{ width:calc(100vw - 24px); max-height:88vh; border-radius:18px; }
  .modal-hd{ padding:15px 16px 12px; }
  .modal-body{ padding:15px 16px; }
  .modal-ft{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .toast-root{ bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }

  /* 作品详情 */
  .dh-cover{ width:54px; height:70px; font-size:24px; }
  .dh-title{ font-size:14px; }
  .dh-kpis{ grid-template-columns:repeat(2,1fr); }
  .dh-kpi{ padding:10px 12px; }
  .dh-kpi b{ font-size:15px; }

  /* 流量 */
  .donut-wrap{ flex-direction:column; align-items:stretch; gap:14px; }
  .donut-wrap .chart{ flex:0 0 auto; width:100%; max-width:190px; margin:0 auto; }
  .heat-row{ grid-template-columns:28px repeat(12,1fr); gap:2px; }
  .heat-axis{ grid-template-columns:28px repeat(12,1fr); gap:2px; }
  .heat-label{ font-size:9px; }
  .heat-cell{ aspect-ratio:1.35/1; border-radius:3px; }
  .heat-axis span{ font-size:8px; }
  .fn-bar{ height:38px; font-size:11.5px; }

  /* 赛道 */
  .niche-score{ gap:14px; }
  .score-ring{ width:88px; height:88px; }
  .score-ring .v b{ font-size:22px; }
  .niche-name{ font-size:16px; }
  .niche-nums{ gap:8px; margin-top:12px; }
  .niche-num b{ font-size:14px; }
  .acct-row .sim-bar{ display:none; }

  /* 账号 */
  .health-wrap{ flex-direction:column; align-items:flex-start; gap:12px; }
  .health-left{ align-self:center; }

  /* 创作 */
  .ai-banner{ padding:16px; gap:12px; }
  .ai-banner .btn{ margin-left:0; width:100%; }
  .ai-banner-t{ font-size:14px; }

  /* 评论 */
  .cmt{ padding:12px 14px; gap:9px; }
  .cmt-text{ font-size:12.5px; }
  .cmt-acts{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
  .cmt-acts .btn{ width:100%; }
  .cmt-acts .btn span{ display:inline; }

  /* 拆解 */
  .teardown-input{ flex-direction:column; }
  .teardown-input .btn{ width:100%; }
  .script-head{ padding:14px; }
  .script-meta{ margin-left:0; width:100%; justify-content:space-between; gap:12px; }
  .script-meta div{ text-align:left; }

  /* 登录 */
  .login{ grid-template-columns:1fr; min-height:100dvh; }
  .login-left{ padding:26px 20px 0; border-right:0; gap:0; }
  .login-hero h1{ font-size:24px; margin:18px 0 8px; letter-spacing:-.6px; }
  .login-hero p{ font-size:12px; line-height:1.75; }
  .login-feats,.login-stats{ display:none; }
  .login-right{ padding:22px 16px 40px; align-items:flex-start; }
  .qr-card{ width:100%; padding:24px 20px 20px; border-radius:20px; }
  .qr-box{ width:190px; height:190px; margin-top:18px; }
  .qr-title{ font-size:15px; }
  .login-foot{ margin-top:14px; }
}

/* ---------- 超小屏 ---------- */
@media (max-width: 380px){
  .content{ padding-left:11px; padding-right:11px; }
  .kpi-val{ font-size:19px; }
  .tb-title{ font-size:14px; }
  .topbar{ padding-left:11px; padding-right:11px; }
  .topbar .seg button{ padding:0 6px; font-size:10px; }
  .g4{ gap:8px; }
  .qr-box{ width:170px; height:170px; }
}

/* ---------- 横屏手机：减少顶底占用 ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px){
  .tabbar{ height:calc(50px + env(safe-area-inset-bottom)); }
  .tab{ height:50px; font-size:9px; }
  .tab .ic{ width:18px; height:18px; }
  :root{ --tabbar-h:50px; }
}

/* ---------- 打印 / 减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}