/* V22 手机直播：桌面构图同比压缩到一屏，不换行、不滚动 */
    @media (max-width:760px){
      html,body{
        width:100%;
        height:100%;
        min-width:0;
        overflow:hidden!important;
      }
      body{
        font-size:8px;
      }
      .app{
        width:100vw;
        height:100dvh;
        min-width:0;
        display:grid;
        grid-template-rows:34px minmax(0,1fr) 24px;
        overflow:hidden;
      }

      header{
        min-width:0;
        height:34px;
        padding:0 5px;
        gap:4px;
      }
      .brand{
        min-width:0;
        gap:4px;
        overflow:hidden;
      }
      .brand-mark{
        flex:0 0 auto;
        width:23px;
        height:23px;
        border-radius:7px;
        font-size:10px;
      }
      .brand-title{
        min-width:0;
        max-width:calc(100vw - 62px);
        font-size:10px;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .brand-title small{
        font-size:6px!important;
      }
      .brand-sub{
        display:none!important;
      }
      .status{
        flex:0 0 auto;
        gap:3px;
        font-size:7px;
        white-space:nowrap;
      }
      .status>span:nth-child(2),
      .status-chip{
        display:none!important;
      }
      .live-dot{
        width:5px;
        height:5px;
      }

      main{
        position:relative;
        min-width:0;
        min-height:0;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 126px;
        gap:4px;
        padding:4px;
        overflow:hidden;
      }
      .stage{
        width:auto;
        height:auto!important;
        min-width:0;
        min-height:0;
        border-radius:8px;
      }

      .right{
        position:relative!important;
        inset:auto!important;
        z-index:12;
        display:flex!important;
        width:auto!important;
        min-width:0;
        height:auto;
        max-height:none!important;
        padding:4px;
        gap:3px;
        overflow:hidden!important;
        border-radius:8px;
        background:linear-gradient(180deg,rgba(4,18,38,.92),rgba(3,13,29,.86));
        box-shadow:none;
      }
      .right>*{
        flex:0 0 auto;
        min-width:0;
      }
      .area-card{
        display:block!important;
        padding:4px 5px;
        border-radius:6px;
      }
      .area-name{
        margin:0;
        font-size:9px;
        line-height:1.1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .area-path{
        display:none!important;
      }
      .category-head{
        display:flex!important;
        padding:0 1px;
        min-height:10px;
      }
      .category-head b,
      .category-head span{
        font-size:6px;
        line-height:1;
        white-space:nowrap!important;
      }
      .category-head span{
        max-width:70px;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .selected-category-panel{
        display:block!important;
        padding:4px;
        min-height:0;
        border-radius:7px;
      }
      .selected-category-heading{
        display:grid;
        grid-template-columns:20px minmax(0,1fr);
        gap:4px;
        margin-bottom:3px;
        align-items:center;
      }
      .selected-category-icon{
        display:grid!important;
        width:20px;
        height:20px;
        border-radius:6px;
        font-size:9px;
      }
      .selected-category-name{
        font-size:8px;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .selected-region-name{
        margin-top:2px;
        font-size:6px;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .role-number-legend{
        justify-content:flex-end;
        gap:5px;
        margin:0 1px 3px;
        font-size:5.5px;
        line-height:1;
        white-space:nowrap!important;
      }
      .role-number-legend span{
        padding-left:7px;
      }
      .role-number-legend span:before{
        width:4px;
        height:4px;
      }
      .role-demand-list{
        display:grid;
        gap:2px;
        min-height:0;
      }
      .role-demand-row{
        grid-template-columns:minmax(0,1fr) 42px;
        gap:3px;
        min-height:18px;
        height:18px;
        padding:2px 4px;
        border-radius:5px;
      }
      .role-field-label,
      .rank-two .role-field-label,
      .rank-letter .role-field-label{
        font-size:6.5px;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .role-count-pair{
        min-width:42px;
      }
      .role-count-pair strong{
        min-width:14px;
        font-size:8px;
        line-height:1;
      }
      .role-count-pair i{
        margin:0 1px;
        font-size:6px;
      }
      .category-summary{
        display:none!important;
      }
      .selected-mode-actions{
        display:none!important;
      }
      .publish{
        width:100%;
        height:20px;
        min-height:20px;
        margin-top:auto;
        padding:0 3px;
        border-radius:5px;
        font-size:6px;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .breadcrumb{
        top:4px;
        left:50%;
        max-width:72%;
        height:26px;
        padding:4px 8px;
        gap:5px;
        border-radius:6px;
        font-size:12px;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
      }
      .breadcrumb>*{
        flex:0 0 auto;
        white-space:nowrap!important;
      }
      .breadcrumb strong{
        max-width:72px;
      }
      .breadcrumb:after{
        display:none!important;
      }

      .map-tools{
        left:3px;
        top:50%;
        gap:2px;
        padding:2px;
        border-radius:6px;
      }
      .map-tool-btn{
        width:19px;
        height:19px;
        border-radius:5px;
        font-size:9px;
      }

      .net-corner-card,
      .net-corner-card.expanded,
      .net-corner-card:focus-within{
        width:60px!important;
        min-height:20px!important;
        height:20px;
        padding:2px 3px!important;
        border-radius:5px!important;
        overflow:hidden;
      }
      .corner-main{
        grid-template-columns:10px minmax(0,1fr)!important;
        gap:2px!important;
      }
      .corner-icon{
        width:10px!important;
        height:10px!important;
        border-radius:3px!important;
        font-size:5px!important;
      }
      .corner-name{
        font-size:6px!important;
        line-height:1;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .net-corner-card.active:after{
        display:none!important;
      }

      footer{
        min-width:0;
        height:24px;
        grid-template-columns:52px minmax(0,1fr);
        padding:0 4px;
        overflow:hidden;
      }
      .ticker-title{
        font-size:6px;
        white-space:nowrap!important;
      }
      .ticker-viewport{
        min-width:0;
      }
      .ticker{
        gap:14px;
        animation-duration:24s;
      }
      .tick{
        gap:3px;
        font-size:6px;
        white-space:nowrap!important;
      }
      .tick i{
        width:4px;
        height:4px;
      }
      .tick em{
        font-size:5.5px;
      }

      .toast{
        top:38px;
        max-width:82vw;
        padding:5px 8px;
        border-radius:6px;
        font-size:7px;
        white-space:nowrap!important;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .loading{
        padding:8px;
      }
      .loader-box,
      .error-box{
        max-width:82%;
        font-size:7px;
        line-height:1.4;
      }
      .spinner{
        width:22px;
        height:22px;
        margin-bottom:5px;
      }
      .close-map-error{
        height:21px;
        padding:0 7px;
        border-radius:5px;
        font-size:6px;
      }

      body.live-mode .right,
      body.live-mode .map-tools{
        opacity:1!important;
      }
    }
    /* 超窄手机继续同比缩小，不改变结构，不换行 */
    @media (max-width:380px){
      main{
        grid-template-columns:minmax(0,1fr) 116px;
        gap:3px;
        padding:3px;
      }
      .role-demand-row{
        grid-template-columns:minmax(0,1fr) 38px;
      }
      .role-count-pair{
        min-width:38px;
      }
      .role-count-pair strong{
        min-width:12px;
        font-size:7px;
      }
      .net-corner-card,
      .net-corner-card.expanded,
      .net-corner-card:focus-within{
        width:54px!important;
      }
      .corner-name{
        font-size:5.5px!important;
      }
    }

    /* 手机横屏：同样保持一屏，地图获得更多宽度 */
    @media (max-width:760px) and (orientation:landscape){
      .app{
        grid-template-rows:28px minmax(0,1fr) 20px;
      }
      main{
        grid-template-columns:minmax(0,1fr) 146px;
      }
      header{
        height:28px;
      }
      .right{
        padding:3px;
      }
      .role-demand-row{
        height:16px;
        min-height:16px;
      }
      footer{
        height:20px;
      }
    }