/* XG mobile admin / portal — scoped responsive enhancement, 2026-10-10.
   Desktop, recognition, cloud services, custom select menus and JS business logic stay untouched. */
@media (max-width: 860px) {
  html:has(body.xg-mobile-layout) { scroll-padding-top: 114px; }
  body.xg-mobile-layout { min-width:0; overflow-x:clip; }
  body.xg-mobile-layout.xg-mobile-nav-open { overflow:hidden; }
  body.xg-mobile-layout .xg-watermark { font-size:min(52vw,240px);left:50%; }

  /* A concise, readable two-row header with a real drawer trigger. */
  body.xg-mobile-layout .xg-topbar,
  body.xg-mobile-layout.admin .xg-topbar {
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    grid-template-rows:auto auto;
    align-items:center !important;
    column-gap:9px;
    row-gap:9px;
    height:auto !important;
    min-height:0 !important;
    padding:11px 13px 12px !important;
    position:sticky;top:0;z-index:65;
    backdrop-filter:blur(18px);
  }
  body.xg-mobile-layout .xg-mobile-nav-toggle {
    display:grid;place-items:center;
    width:42px;height:42px;padding:0;
    border:1px solid #d5e3e8;border-radius:12px;
    background:linear-gradient(160deg,#f9fcfd,#eaf3f7);
    color:#3d748c;box-shadow:0 5px 15px rgba(51,100,123,.07);
    grid-column:1;grid-row:1;
  }
  body.xg-mobile-layout .xg-mobile-nav-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  body.xg-mobile-layout .xg-topbar>.xg-brand { grid-column:2;grid-row:1; min-width:0; gap:9px; }
  body.xg-mobile-layout .xg-topbar>.xg-brand>div {min-width:0;}
  body.xg-mobile-layout .xg-brand strong,
  body.xg-mobile-layout.admin .xg-brand strong {font-size:18px;line-height:1.2}
  body.xg-mobile-layout .xg-brand span {display:block;max-width:100%;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.xg-mobile-layout .xg-logo {width:38px;height:38px;flex:0 0 38px;font-size:14px}
  body.xg-mobile-layout .xg-topbar>.xg-top-actions {
    grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;
    justify-content:flex-start;align-items:center;
    gap:7px;min-width:0;
  }
  body.xg-mobile-layout.admin .xg-topbar>.xg-top-actions {justify-content:flex-end}
  body.xg-mobile-layout .xg-device-usage,
  body.xg-mobile-layout .xg-member-badge,
  body.xg-mobile-layout .xg-head-badge{max-width:100%;font-size:11px}
  body.xg-mobile-layout .xg-top-actions .xg-primary-small {min-height:33px;padding:0 10px;font-size:11px}
  body.xg-mobile-layout .xg-top-actions .xg-user-menu {margin-left:auto;padding:0;font-size:12px}
  body.xg-mobile-layout .xg-top-actions .xg-user-menu b{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.xg-mobile-layout .xg-user-menu a{white-space:nowrap}

  /* Navigation drawer: never re-layout/replace original permissions or menu markup. */
  body.xg-mobile-layout .xg-shell,
  body.xg-mobile-layout.admin .xg-shell{display:block !important;grid-template-columns:none !important;min-width:0;z-index:auto!important;}
  body.xg-mobile-layout .xg-mobile-nav-scrim{
    position:fixed;inset:0;z-index:79;background:rgba(14,37,49,.42);
    backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,visibility .2s;
  }
  body.xg-mobile-layout.xg-mobile-nav-open .xg-mobile-nav-scrim{opacity:1;visibility:visible;pointer-events:auto}
  body.xg-mobile-layout .xg-shell>.xg-sidebar,
  body.xg-mobile-layout.admin .xg-shell>.xg-sidebar{
    position:fixed !important;inset:0 auto 0 0;top:0 !important;
    z-index:80;width:min(326px,87vw);max-width:100%;height:100dvh !important;
    padding:18px 12px 24px !important;
    display:flex !important;flex-direction:column;
    border:0;border-right:1px solid #d6e5ec;
    background:linear-gradient(160deg,#f9fcfd 0%,#edf5f8 100%) !important;
    box-shadow:22px 0 55px rgba(23,58,77,.18);
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;pointer-events:none;transform:translateX(-102%);
    transition:transform .23s ease,visibility .23s;
  }
  body.xg-mobile-layout.xg-mobile-nav-open .xg-shell>.xg-sidebar{
    visibility:visible;pointer-events:auto;transform:translateX(0);
  }
  body.xg-mobile-layout .xg-mobile-drawer-title{
    display:flex;align-items:center;justify-content:space-between;
    color:#385e72;font-size:15px;font-weight:850;padding:1px 6px 15px;
    border-bottom:1px solid #dce9ee;margin-bottom:11px;
  }
  body.xg-mobile-layout .xg-mobile-drawer-close{
    width:34px;height:34px;border:1px solid #d3e3ea;border-radius:10px;
    background:#fff;color:#517284;font-size:23px;font-weight:400;
    display:grid;place-items:center;line-height:1;
  }
  body.xg-mobile-layout .xg-sidebar nav,
  body.xg-mobile-layout.admin .xg-sidebar nav.admin-nav-v3948{
    display:flex !important;flex-direction:column !important;gap:5px !important;
    overflow:visible !important;flex:0 0 auto;
  }
  body.xg-mobile-layout .xg-sidebar nav>a{display:block;white-space:normal;padding:12px 13px}
  body.xg-mobile-layout .xg-sidebar nav details{min-width:0;max-width:100%}
  body.xg-mobile-layout .xg-sidebar nav details summary{white-space:normal}
  body.xg-mobile-layout .xg-sidebar .xg-side-note{display:none}
  body.xg-mobile-layout .xg-sidebar .xg-support-dock{margin-top:18px}

  /* Cards/forms: content-first spacing with zero desktop effect. */
  body.xg-mobile-layout .xg-main,
  body.xg-mobile-layout.admin .xg-main{
    width:100% !important;min-width:0;max-width:100% !important;
    padding:17px 12px 80px !important;margin:0 auto;
  }
  body.xg-mobile-layout .xg-page-head,
  body.xg-mobile-layout.admin .xg-page-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px;margin-bottom:14px;padding:0}
  body.xg-mobile-layout .xg-page-head>div{min-width:0;max-width:100%}
  body.xg-mobile-layout .xg-page-head h1,
  body.xg-mobile-layout.admin .xg-page-head h1{font-size:clamp(22px,6vw,27px);overflow-wrap:anywhere}
  body.xg-mobile-layout .xg-page-head p{font-size:12px;line-height:1.65;overflow-wrap:anywhere}
  body.xg-mobile-layout .xg-panel,
  body.xg-mobile-layout.admin .xg-panel{padding:15px 13px;border-radius:15px;min-width:0;max-width:100%}
  body.xg-mobile-layout .xg-panel-head{gap:10px;flex-wrap:wrap}
  body.xg-mobile-layout .xg-panel-head>div{min-width:0}
  body.xg-mobile-layout .xg-panel-head h2{font-size:16px}
  body.xg-mobile-layout .xg-grid.two,
  body.xg-mobile-layout .xg-device-grid,
  body.xg-mobile-layout .xg-plan-grid,
  body.xg-mobile-layout .xg-evidence-grid{grid-template-columns:minmax(0,1fr) !important;}
  body.xg-mobile-layout .xg-metrics.four{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
  body.xg-mobile-layout .xg-metric-card,
  body.xg-mobile-layout.admin .xg-metric-card{min-width:0;padding:14px 12px;border-radius:14px}
  body.xg-mobile-layout .xg-metric-card b{font-size:clamp(20px,5.5vw,27px);overflow-wrap:anywhere}
  body.xg-mobile-layout .xg-cloud-summary,
  body.xg-mobile-layout .xg-current-plan,
  body.xg-mobile-layout .xg-evidence-meta{grid-template-columns:minmax(0,1fr)}
  body.xg-mobile-layout .xg-list-row{min-width:0}
  body.xg-mobile-layout .xg-list-row .grow{min-width:0}
  body.xg-mobile-layout .xg-filter{grid-template-columns:minmax(0,1fr) !important}
  body.xg-mobile-layout .xg-inline-form{flex-wrap:wrap}
  body.xg-mobile-layout .xg-inline-form input{min-width:150px}
  body.xg-mobile-layout :is(input,textarea){max-width:100%;font-size:16px}
  body.xg-mobile-layout :is(.xg-record-table,.order-table-shell){
    max-width:100%;overflow-x:auto !important;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
  }
  body.xg-mobile-layout .xg-record-table::before{
    content:'左右滑动查看完整数据 →';display:block;width:max-content;
    padding:8px 12px;color:#7c95a1;font-size:10px;letter-spacing:.02em;
  }
  body.xg-mobile-layout .xg-record-head,
  body.xg-mobile-layout .xg-record-row{max-width:none}
  body.xg-mobile-layout .xg-record-table .xg-record-head,
  body.xg-mobile-layout .xg-record-table .xg-record-row{min-width:740px}
  body.xg-mobile-layout .xg-record-table .xg-record-head.evidence,
  body.xg-mobile-layout .xg-record-table .xg-record-row.evidence{min-width:940px}
  body.xg-mobile-layout .xg-form-grid{grid-template-columns:minmax(0,1fr)}
  body.xg-mobile-layout .xg-stack-form{min-width:0}
  body.xg-mobile-layout .xg-top-actions .xg-link-button{min-height:34px;padding:0 10px}
  body.xg-mobile-layout .xg-support-popover{max-width:calc(100vw - 28px)}

  /* Admin modules: filters, data cards and existing forms remain functional. */
  body.xg-mobile-admin .admin-filter-bar,
  body.xg-mobile-admin .license-search,
  body.xg-mobile-admin .invite-create-panel{flex-wrap:wrap;gap:9px;min-width:0}
  body.xg-mobile-admin .admin-filter-bar>*{min-width:0;max-width:100%}
  body.xg-mobile-admin .admin-filter-bar :is(input,button){max-width:100%}
  body.xg-mobile-admin :is(.website-metrics,.notice-metrics,.cloud-overview-metrics,.plan-summary-grid,.website-image-summary,.supplier-admin-metrics){min-width:0}
  body.xg-mobile-admin :is(.admin-pager,.xg-order-sheet-actions){flex-wrap:wrap;max-width:100%}
  body.xg-mobile-admin :is(.notice-confirm-card,.renew-confirm-card,.xg-confirm-card){max-width:calc(100vw - 24px)}
}
@media (max-width: 560px) {
  body.xg-mobile-layout .xg-top-actions .xg-user-menu{margin-left:0}
  body.xg-mobile-layout .xg-page-head h1{font-size:23px}
  body.xg-mobile-layout .xg-panel{padding:13px 11px}
  body.xg-mobile-layout .xg-metric-card{padding:13px 11px}
  body.xg-mobile-layout .xg-metric-card b{font-size:23px}
  /* Preserve readable detail / evidence pages rather than shrinking their content. */
  body.xg-app:not(.xg-mobile-layout)>.xg-topbar{display:flex;flex-wrap:wrap;gap:9px;padding:10px 12px;height:auto;min-height:66px;align-items:center}
  body.xg-app:not(.xg-mobile-layout)>.xg-topbar>.xg-brand{min-width:0;max-width:100%}
  body.xg-app:not(.xg-mobile-layout)>.xg-topbar>.xg-top-actions{width:100%;justify-content:flex-start;gap:7px}
  body.xg-app:not(.xg-mobile-layout)>.xg-topbar>.xg-top-actions .xg-user-menu{margin-left:auto}
  body.xg-app:not(.xg-mobile-layout) .xg-page-head{flex-wrap:wrap;gap:9px}
  body.xg-app:not(.xg-mobile-layout) .xg-page-head h1{overflow-wrap:anywhere;font-size:23px}
  body.xg-app:not(.xg-mobile-layout) .xg-evidence-page{padding:15px 12px 60px}
  body.xg-app:not(.xg-mobile-layout) .xg-evidence-grid{grid-template-columns:minmax(0,1fr)}
  body.xg-app:not(.xg-mobile-layout) .xg-evidence-grid .xg-panel{min-width:0;padding:14px 12px}
  body.xg-app:not(.xg-mobile-layout) .xg-evidence-meta{grid-template-columns:1fr}
  body.admin:not(.xg-mobile-layout)>.xg-topbar{height:auto;padding:12px}
  body.admin:not(.xg-mobile-layout) .detail-wrap{max-width:100%;padding:14px 12px 52px}
  body.admin:not(.xg-mobile-layout) .detail-hero{max-width:100%;overflow-wrap:anywhere}
  body.admin:not(.xg-mobile-layout) .detail-badges{gap:7px}
  body.admin:not(.xg-mobile-layout) .detail-metrics{gap:9px}
  body.admin:not(.xg-mobile-layout) .detail-panel{min-width:0;max-width:100%}
  body.admin:not(.xg-mobile-layout) .detail-hero h1{font-size:24px}
  body.xg-portal-login .xg-portal-shell{min-height:100dvh;padding:20px 12px}
  body.xg-portal-login .xg-portal-card{max-width:100%;padding:27px 19px 23px}
  body.xg-portal-login .xg-login-heading{font-size:26px}
  body.xg-portal-login .xg-field input{font-size:16px}
  body:has(.admin-login-shell) .admin-login-brand{padding:22px 18px 6px}
  body:has(.admin-login-shell) .admin-login-brand h1{font-size:25px}
  body:has(.admin-login-shell) .admin-login-side{padding:16px 12px 28px}
  body:has(.admin-login-shell) .admin-login-card{padding:24px 19px}
  body:has(.admin-login-shell) .admin-login-card input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  body.xg-mobile-layout .xg-sidebar,
  body.xg-mobile-layout .xg-mobile-nav-scrim{transition:none !important}
}
@media (min-width: 861px){
  .xg-mobile-nav-toggle,.xg-mobile-nav-scrim,.xg-mobile-drawer-title{display:none!important}
}