:root {
  --safe-mobile-gap: 10px;
  --safe-mobile-control-height: 42px;
  --safe-mobile-nav-height: 44px;
}

@media (max-width: 768px) {
  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  .layout-shell,
  .layout-shell > .el-container,
  .layout-main,
  .content-card,
  .section-card,
  .el-card,
  .el-card__body,
  .el-tabs,
  .el-tabs__content,
  .el-tab-pane {
    min-width: 0 !important;
    max-width: 100%;
  }

  .layout-aside .brand-panel {
    min-width: 0;
  }

  .layout-aside .sidebar-collapse-button {
    display: none !important;
  }

  body.safe-mobile-nav-open {
    overflow: hidden !important;
  }

  .safe-mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 92px;
    min-height: 38px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
  }

  .safe-mobile-nav-toggle i {
    margin: 0 !important;
    color: inherit !important;
  }

  .safe-mobile-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    padding: calc(58px + env(safe-area-inset-top)) 10px 10px;
    background: rgba(15, 23, 42, 0.55);
  }

  .safe-mobile-nav-drawer.is-open {
    display: block;
  }

  .safe-mobile-nav-panel {
    width: 100%;
    max-height: calc(100dvh - 78px - env(safe-area-inset-top));
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1f2d3d;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  }

  .safe-mobile-nav-title {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f2d3d;
    color: #fff;
  }

  .safe-mobile-nav-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
  }

  .safe-mobile-nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .safe-mobile-nav-item {
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #dbe7f3;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .safe-mobile-nav-item.is-active {
    border-color: #409eff;
    background: #409eff;
    color: #fff;
  }

  .layout-aside .nav-menu {
    display: none !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .layout-aside .nav-menu::-webkit-scrollbar,
  .el-tabs__nav-wrap::-webkit-scrollbar,
  .safe-mobile-scroll::-webkit-scrollbar {
    display: none;
  }

  .layout-aside .nav-menu .el-menu-item {
    min-width: max-content;
    scroll-snap-align: center;
    touch-action: manipulation;
  }

  .layout-header {
    min-width: 0;
  }

  .layout-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .layout-header h1,
  .layout-header p {
    overflow-wrap: anywhere;
  }

  .front-user-actions,
  .avatar-dropdown {
    min-width: 0;
  }

  .avatar-name {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .layout-main {
    padding: var(--safe-mobile-gap) !important;
  }

  body.safe-mobile-module-view {
    height: var(--safe-visual-height, 100dvh);
    min-height: 0;
    overflow: hidden !important;
  }

  body.safe-mobile-module-view #app,
  body.safe-mobile-module-view .layout-shell {
    height: var(--safe-visual-height, 100dvh);
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.safe-mobile-module-view .layout-shell > .el-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .layout-main.module-main {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 6px !important;
  }

  body.safe-mobile-module-view .module-embed-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.safe-mobile-module-view .module-embed-card > .el-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
  }

  .workbench-embed-frame,
  .layout-main.module-main .workbench-embed-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .home-dashboard,
  .hazard-shell,
  .training-shell,
  .admin-shell,
  .public-shell,
  .mobile-check-app,
  .cert-submit-app,
  .safety-tool-shell {
    width: 100%;
    max-width: 100%;
  }

  .home-top-grid,
  .home-bottom-grid,
  .home-module-grid,
  .video-grid,
  .monthly-expand-grid,
  .exam-expand-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-stat-grid,
  .metric-grid,
  .training-grid,
  .dashboard-grid,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-stat-card .el-card__body,
  .metric-card .el-card__body {
    padding: 12px !important;
  }

  .home-stat-card strong,
  .metric-card strong {
    font-size: 21px !important;
  }

  .el-row {
    min-width: 0;
  }

  [class*="el-col-"] {
    min-width: 0;
  }

  .el-form--inline,
  .search-form,
  .filter-bar,
  .toolbar-row,
  .training-toolbar,
  .settings-actions,
  .video-form-panel,
  .upload-inline,
  .header-actions {
    width: 100%;
    max-width: 100%;
  }

  .layout-header > .header-actions {
    width: auto;
    max-width: calc(100% - 96px);
    margin-left: auto;
  }

  .el-form--inline .el-form-item,
  .search-form .el-form-item,
  .filter-bar .el-form-item,
  .training-toolbar .el-form-item,
  .video-form-panel .el-form-item {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }

  .el-form--inline .el-form-item__content,
  .search-form .el-form-item__content,
  .filter-bar .el-form-item__content,
  .training-toolbar .el-form-item__content,
  .video-form-panel .el-form-item__content {
    display: block !important;
    width: 100%;
    max-width: 100%;
  }

  .el-form-item__content,
  .el-form-item__label {
    max-width: 100%;
  }

  .el-select,
  .el-input,
  .el-input-number,
  .el-date-editor,
  .el-cascader,
  .el-autocomplete,
  .el-textarea,
  .wide-input {
    width: 100% !important;
    max-width: 100%;
  }

  .el-input__inner,
  .el-textarea__inner,
  .el-select .el-input__inner,
  .el-date-editor .el-input__inner,
  select,
  input,
  textarea {
    font-size: 16px !important;
  }

  .el-input__inner,
  .el-select .el-input__inner,
  .el-date-editor.el-input,
  .el-date-editor .el-input__inner,
  .el-input-number,
  .el-input-number .el-input__inner {
    min-height: var(--safe-mobile-control-height);
  }

  .search-form .el-form-item:last-child .el-form-item__content,
  .filter-bar .el-form-item:last-child .el-form-item__content,
  .toolbar-row,
  .training-toolbar,
  .settings-actions,
  .circle-action-row,
  .video-actions,
  .sign-actions,
  .dialog-actions,
  .batch-actions {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-form .el-button,
  .filter-bar .el-button,
  .toolbar-row .el-button,
  .training-toolbar .el-button,
  .settings-actions .el-button,
  .dialog-actions .el-button,
  .batch-actions .el-button {
    min-height: 40px;
    margin-left: 0 !important;
  }

  .search-form .el-dropdown,
  .filter-bar .el-dropdown,
  .toolbar-row .el-dropdown,
  .settings-actions .el-dropdown {
    max-width: 100%;
  }

  .el-button {
    max-width: 100%;
  }

  .el-button > span {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  button,
  .el-button,
  .el-link,
  .el-checkbox,
  .el-radio {
    touch-action: manipulation;
  }

  .submit-button {
    width: 100%;
    min-height: 48px !important;
  }

  .el-checkbox,
  .el-radio {
    min-height: 40px;
    align-items: center;
  }

  .el-dialog__headerbtn {
    top: 4px !important;
    right: 4px !important;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .el-button.is-circle {
    width: 44px;
    height: 44px;
    padding: 0 !important;
  }

  .el-button--mini.is-circle {
    width: 44px;
    height: 44px;
  }

  .safe-mobile-tab-select-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px;
    color: #606266;
    font-size: 13px;
  }

  .safe-mobile-tab-select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 34px 0 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    font-size: 16px;
  }

  .el-tabs.safe-mobile-tabs-select > .el-tabs__header {
    display: none !important;
  }

  .el-tabs__header {
    max-width: 100%;
  }

  .el-tabs__nav-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .el-tabs__nav-scroll {
    width: max-content;
    min-width: 100%;
  }

  .el-tabs__nav {
    float: none;
    white-space: nowrap;
  }

  .el-tabs__item {
    min-width: max-content;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .el-card__header,
  .el-card__body {
    padding: 12px !important;
  }

  .notice-detail,
  .monthly-expand-panel,
  .exam-expand-panel,
  .form-panel,
  .filter-bar {
    padding: 10px !important;
  }

  .copy-link,
  .video-url-text,
  .qr-link,
  .form-tip,
  .form-help {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .el-alert {
    align-items: flex-start;
  }

  .el-alert__content,
  .el-alert__title,
  .el-alert__description {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .el-upload,
  .el-upload-dragger,
  .safe-upload-drag,
  .upload-box {
    width: 100% !important;
    max-width: 100%;
  }

  .el-upload-dragger {
    height: auto !important;
    min-height: 140px;
    padding: 18px 12px;
  }

  .photo-preview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .photo-preview-list .photo-preview,
  .record-thumb-link,
  .preview-img {
    max-width: 100%;
  }

  .login-shell {
    width: 100%;
    padding: 12px !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .el-dialog .el-form:not(.el-form--inline) .el-form-item__label {
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 0 6px !important;
    text-align: left !important;
    line-height: 1.4 !important;
  }

  .el-dialog .el-form:not(.el-form--inline) .el-form-item__content {
    margin-left: 0 !important;
  }

  .el-dialog__wrapper {
    top: var(--safe-visual-offset-top, 0px) !important;
    bottom: auto !important;
    height: var(--safe-visual-height, 100dvh) !important;
    max-height: var(--safe-visual-height, 100dvh) !important;
    padding: 8px !important;
    overflow: auto !important;
    align-items: flex-start !important;
    box-sizing: border-box;
  }

  .el-dialog__wrapper .el-dialog,
  .el-dialog,
  .safe-mobile-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(var(--safe-visual-height, 100dvh) - 16px) !important;
    margin: 8px auto !important;
    display: flex;
    flex-direction: column;
  }

  .el-dialog__header {
    flex: 0 0 auto;
    padding: 14px 46px 12px 14px !important;
  }

  .el-dialog__title {
    display: block;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .el-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .el-dialog__footer {
    flex: 0 0 auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    background: #fff;
    border-top: 1px solid #ebeef5;
  }

  .el-dialog__footer .dialog-footer,
  .el-dialog__footer > span {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .el-dialog__footer .el-button {
    min-height: 40px;
    margin-left: 0 !important;
  }

  .el-message-box {
    width: calc(100vw - 24px) !important;
    max-width: 420px;
  }

  .el-message,
  .el-notification {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
  }

  .el-drawer {
    width: min(92vw, 420px) !important;
  }

  .table-scroll-wrap,
  .mobile-scroll,
  .monthly-table-wrap,
  .exam-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: visible !important;
  }

  .el-table.mobile-list-table {
    --safe-mobile-action-width: 108px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    border: 1px solid #ebeef5 !important;
    border-radius: 6px;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  .safe-mobile-sort-bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    background: #fff;
  }

  .safe-mobile-sort-bar label {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    color: #606266;
    font-size: 12px;
  }

  .safe-mobile-sort-select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 32px 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #303133;
    font-size: 16px;
  }

  .safe-mobile-sort-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
  }

  .safe-mobile-sort-actions button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #606266;
    font-size: 16px;
  }

  .safe-mobile-sort-actions button.is-active {
    border-color: #409eff;
    background: #409eff;
    color: #fff;
  }

  .safe-mobile-sort-actions button:disabled {
    opacity: 0.4;
  }

  .safe-mobile-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 0 0 10px;
    padding: 7px 8px 7px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }

  .safe-mobile-selection-bar.has-selection {
    border-color: #a0cfff;
    background: #f2f8ff;
  }

  .safe-mobile-selection-count {
    flex: 0 0 auto;
    color: #606266;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  .safe-mobile-selection-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .safe-mobile-selection-button {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #409eff;
    border-radius: 4px;
    background: #409eff;
    color: #fff;
    font: inherit;
    font-size: 12px;
    line-height: 38px;
    white-space: nowrap;
  }

  .safe-mobile-selection-button.is-muted {
    border-color: #dcdfe6;
    background: #fff;
    color: #606266;
  }

  .safe-mobile-selection-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .el-table.mobile-list-table::before,
  .el-table.mobile-list-table::after,
  .el-table.mobile-list-table > .el-table__fixed,
  .el-table.mobile-list-table > .el-table__fixed-right,
  .el-table.mobile-list-table > .el-table__fixed-left,
  .el-table.mobile-list-table > .el-table__fixed-right-patch,
  .el-table.mobile-list-table > .el-table__header-wrapper colgroup,
  .el-table.mobile-list-table > .el-table__body-wrapper colgroup {
    display: none !important;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper,
  .el-table.mobile-list-table > .el-table__body-wrapper,
  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body,
  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper,
  .el-table.mobile-list-table > .el-table__body-wrapper {
    overflow: hidden !important;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "key1 key2";
    width: 100% !important;
    min-width: 0;
    align-items: stretch;
    box-sizing: border-box;
  }

  .el-table.mobile-list-table.safe-mobile-has-action > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-has-action > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) var(--safe-mobile-action-width);
    grid-template-areas: "key1 key2 action";
  }

  .el-table.mobile-list-table.safe-mobile-has-selection > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-has-selection > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: 38px minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "select key1 key2";
  }

  .el-table.mobile-list-table.safe-mobile-has-selection.safe-mobile-has-action > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-has-selection.safe-mobile-has-action > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: 38px minmax(0, 1.12fr) minmax(0, 0.88fr) var(--safe-mobile-action-width);
    grid-template-areas: "select key1 key2 action";
  }

  .el-table.mobile-list-table.safe-mobile-one-key > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-one-key > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "key1";
  }

  .el-table.mobile-list-table.safe-mobile-one-key.safe-mobile-has-action > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-one-key.safe-mobile-has-action > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: minmax(0, 1fr) var(--safe-mobile-action-width);
    grid-template-areas: "key1 action";
  }

  .el-table.mobile-list-table.safe-mobile-one-key.safe-mobile-has-selection > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-one-key.safe-mobile-has-selection > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "select key1";
  }

  .el-table.mobile-list-table.safe-mobile-one-key.safe-mobile-has-selection.safe-mobile-has-action > .el-table__header-wrapper > .el-table__header > thead > tr,
  .el-table.mobile-list-table.safe-mobile-one-key.safe-mobile-has-selection.safe-mobile-has-action > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    grid-template-columns: 38px minmax(0, 1fr) var(--safe-mobile-action-width);
    grid-template-areas: "select key1 action";
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td {
    display: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-summary-header,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-summary-cell {
    display: flex !important;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-control-header,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-control-cell {
    grid-area: select;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-key-1,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-key-1 {
    grid-area: key1;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-key-2,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-key-2 {
    grid-area: key2;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-action-header,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-action-cell {
    grid-area: action;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-summary-header {
    min-height: 42px;
    padding: 8px 6px !important;
    align-items: center;
    border-right: 1px solid #ebeef5 !important;
    border-bottom: 1px solid #dfe4ed !important;
    background: #f5f7fa !important;
    color: #606266;
    font-size: 12px;
    font-weight: 600;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-summary-header:last-child {
    border-right: 0 !important;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr:not(.safe-mobile-native-expanded-row) {
    position: relative;
    border-bottom: 1px solid #ebeef5;
    background: #fff;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr.el-table__row--striped:not(.safe-mobile-native-expanded-row) {
    background: #fafafa;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr:last-child {
    border-bottom: 0;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-summary-cell {
    min-height: 52px;
    padding: 8px 5px !important;
    align-items: center;
    border-right: 1px solid #ebeef5 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    visibility: visible !important;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper th.is-hidden.safe-mobile-summary-header > .cell,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.is-hidden.safe-mobile-summary-cell > .cell {
    visibility: visible !important;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-summary-cell:last-child {
    border-right: 0 !important;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper > .el-table__header > thead > tr > th.safe-mobile-key-1,
  .el-table.mobile-list-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-key-1 {
    padding-left: 30px !important;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper .safe-mobile-summary-header > .cell,
  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-summary-cell > .cell {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
    text-align: left;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-key-cell > .cell {
    font-size: 14px;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-key-cell > .cell {
    max-height: 3.7em;
    overflow: hidden;
  }

  .el-table.mobile-list-table > .el-table__header-wrapper .safe-mobile-control-header,
  .el-table.mobile-list-table > .el-table__header-wrapper .safe-mobile-action-header,
  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-control-cell,
  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-action-cell {
    justify-content: center;
    text-align: center;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-control-cell > .cell,
  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-action-cell > .cell {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-action-cell {
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-action-cell .el-button + .el-button {
    margin-left: 0 !important;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .safe-mobile-control-cell .el-checkbox {
    display: inline-flex !important;
    width: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
  }

  .el-table.mobile-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-detail-cell,
  .el-table.mobile-native-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr > td.safe-mobile-native-hidden {
    display: none !important;
  }

  .el-table.mobile-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr.safe-mobile-details-open > td.safe-mobile-detail-cell {
    display: block !important;
    grid-column: 1 / -1;
    min-height: 40px;
    padding: 8px 10px !important;
    border-right: 0 !important;
    border-top: 1px solid #ebeef5 !important;
    border-bottom: 0 !important;
    background: #fafbfc !important;
  }

  .el-table.mobile-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr.safe-mobile-details-open > td.safe-mobile-detail-cell > .cell {
    display: grid !important;
    grid-template-columns: minmax(78px, 30%) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.5;
    text-align: left;
  }

  .el-table.mobile-expand-table > .el-table__body-wrapper td.safe-mobile-detail-cell[data-mobile-label] > .cell::before {
    content: attr(data-mobile-label);
    color: #909399;
    font-size: 12px;
    font-weight: 600;
    word-break: keep-all;
  }

  .el-table.mobile-native-expand-table > .el-table__body-wrapper td.el-table__expand-column .el-table__expand-icon {
    display: none !important;
  }

  .el-table.mobile-native-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr.safe-mobile-native-expanded-row {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #ebeef5;
    background: #fafbfc;
  }

  .el-table.mobile-native-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr.safe-mobile-native-expanded-row > td.el-table__expanded-cell {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
    border: 0 !important;
    box-sizing: border-box;
  }

  .el-table.mobile-native-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr.safe-mobile-native-expanded-row > td.el-table__expanded-cell > .cell,
  .el-table.mobile-native-expand-table > .el-table__body-wrapper > .el-table__body > tbody > tr.safe-mobile-native-expanded-row > td.el-table__expanded-cell > div {
    display: block !important;
    width: 100%;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper td.safe-mobile-toggle-cell {
    position: relative;
    min-height: 52px;
    cursor: pointer;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper td.safe-mobile-toggle-cell::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 11px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #7d8795;
    border-bottom: 1.5px solid #7d8795;
    transform: translateY(-60%) rotate(-45deg);
    transition: transform 0.16s ease;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper td.safe-mobile-toggle-cell.is-open::before {
    transform: translateY(-75%) rotate(45deg);
  }

  .el-table.mobile-list-table > .el-table__body-wrapper td.safe-mobile-toggle-cell:focus-visible {
    outline: 2px solid #409eff;
    outline-offset: -2px;
  }

  .export-mobile-batch-bar {
    position: fixed;
    z-index: 2200;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px 8px 14px;
    border: 1px solid #f5c2c2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 45, 61, 0.2);
    color: #303133;
    font-size: 13px;
    font-weight: 600;
  }

  .export-mobile-batch-bar > div {
    display: flex;
    gap: 6px;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .el-table__empty-block,
  .el-table.mobile-list-table > .el-table__body-wrapper .el-table__append-wrapper {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .circle-action-row {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 4px;
  }

  .el-table.mobile-list-table > .el-table__body-wrapper .el-tag {
    height: auto;
    min-height: 22px;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .table-pagination,
  .el-pagination {
    width: 100%;
    max-width: 100%;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    overflow: visible;
    padding: 10px 0 !important;
    white-space: nowrap;
  }

  .el-pagination > * {
    flex: 0 0 auto;
  }

  .el-pagination .el-pagination__sizes,
  .el-pagination .el-pagination__jump {
    display: none !important;
  }

  .el-pagination button,
  .el-pagination .el-pager li {
    min-width: 36px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  .module-mobile-selection .el-button {
    min-height: 40px;
    margin-left: 0 !important;
  }

  .el-descriptions,
  .el-descriptions__body,
  .el-descriptions__table {
    width: 100% !important;
    max-width: 100%;
  }

  .el-descriptions__table {
    table-layout: fixed;
  }

  .el-descriptions-item__label,
  .el-descriptions-item__content {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .video-card,
  .video-player-wrap,
  .qr-preview,
  .qr-box {
    max-width: 100%;
  }

  .video-card-header,
  .video-card-footer,
  .selected-title,
  .hazard-header,
  .training-header,
  .check-header {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .video-actions {
    width: 100%;
    justify-content: flex-start !important;
  }
}

@media (max-width: 480px) {
  :root {
    --safe-mobile-gap: 8px;
  }

  .layout-header p {
    display: none;
  }

  .layout-header h1 {
    font-size: 17px !important;
  }

  .avatar-name {
    display: none;
  }

  .home-stat-grid,
  .metric-grid,
  .training-grid,
  .dashboard-grid,
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .el-dialog__footer .el-button {
    flex: 1 1 120px;
  }

  .photo-preview-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 420px) {
  .safe-mobile-sort-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .safe-mobile-sort-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 360px) {
  .home-stat-grid,
  .metric-grid,
  .training-grid,
  .dashboard-grid,
  .summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .el-table.mobile-list-table {
    --safe-mobile-action-width: 98px;
  }
}