/* 老花友好浅色层 2026-07-11
   目标：更大字号、更强对比、更清楚的工具栏/表格/卡片层级。
   只在 html[data-skin="light"] 或 iframe 的 body.home-light-frame 下生效。 */

html[data-skin="light"],
body.home-light-frame {
  color-scheme: light;
  --a11y-bg: #E7EDF3;
  --a11y-surface: #FFFFFF;
  --a11y-surface-2: #F3F6F9;
  --a11y-line: #B8C4CF;
  --a11y-line-soft: #D5DEE7;
  --a11y-text: #101828;
  --a11y-muted: #344054;
  --a11y-faint: #5B6878;
  --a11y-accent: #006F7F;
  --a11y-accent-2: #0891B2;
  --a11y-focus: rgba(0, 111, 127, .24);
  --a11y-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  --a11y-shadow-lg: 0 14px 36px rgba(16, 24, 40, .16);
  background: var(--a11y-bg) !important;
  color: var(--a11y-text) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html[data-skin="light"] body,
body.home-light-frame {
  background: var(--a11y-bg) !important;
  color: var(--a11y-text) !important;
}

html[data-skin="light"] *,
body.home-light-frame * {
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

html[data-skin="light"] h1,
html[data-skin="light"] h2,
html[data-skin="light"] h3,
html[data-skin="light"] h4,
html[data-skin="light"] .title,
html[data-skin="light"] .card-title,
html[data-skin="light"] .product-title,
html[data-skin="light"] .nav-title,
html[data-skin="light"] .site-title,
html[data-skin="light"] .topbar-title,
html[data-skin="light"] .box-title,
html[data-skin="light"] .section-title,
body.home-light-frame h1,
body.home-light-frame h2,
body.home-light-frame h3,
body.home-light-frame h4,
body.home-light-frame .title,
body.home-light-frame .card-title,
body.home-light-frame .product-title,
body.home-light-frame .nav-title,
body.home-light-frame .site-title,
body.home-light-frame .topbar-title,
body.home-light-frame .box-title,
body.home-light-frame .section-title {
  color: var(--a11y-text) !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
}

html[data-skin="light"] a,
body.home-light-frame a {
  color: #005F6B !important;
  font-weight: 700;
}

html[data-skin="light"] .muted,
html[data-skin="light"] .meta,
html[data-skin="light"] .sub,
html[data-skin="light"] .stat-label,
html[data-skin="light"] .card-date,
html[data-skin="light"] .time,
html[data-skin="light"] .page-info,
html[data-skin="light"] .pager-info,
html[data-skin="light"] .empty,
html[data-skin="light"] .empty-state,
body.home-light-frame .muted,
body.home-light-frame .meta,
body.home-light-frame .sub,
body.home-light-frame .stat-label,
body.home-light-frame .card-date,
body.home-light-frame .time,
body.home-light-frame .page-info,
body.home-light-frame .pager-info,
body.home-light-frame .empty,
body.home-light-frame .empty-state {
  color: var(--a11y-muted) !important;
}

/* 页面骨架、导航、工具栏 */
html[data-skin="light"] .header,
html[data-skin="light"] .topbar,
html[data-skin="light"] .top-bar,
html[data-skin="light"] .top-nav,
html[data-skin="light"] .nav-bar,
html[data-skin="light"] .bar,
html[data-skin="light"] .toolbar,
html[data-skin="light"] .toolbar-content,
html[data-skin="light"] .filter-bar,
html[data-skin="light"] .filters,
html[data-skin="light"] .search-bar,
html[data-skin="light"] .translate-bar,
html[data-skin="light"] .action-bar,
html[data-skin="light"] .stats-bar,
html[data-skin="light"] .summary,
html[data-skin="light"] .table-footer,
html[data-skin="light"] .pagination,
html[data-skin="light"] .pager,
html[data-skin="light"] .mobile-pager,
html[data-skin="light"] .mgmt-pager,
body.home-light-frame .header,
body.home-light-frame .topbar,
body.home-light-frame .top-bar,
body.home-light-frame .top-nav,
body.home-light-frame .nav-bar,
body.home-light-frame .bar,
body.home-light-frame .toolbar,
body.home-light-frame .toolbar-content,
body.home-light-frame .filter-bar,
body.home-light-frame .filters,
body.home-light-frame .search-bar,
body.home-light-frame .translate-bar,
body.home-light-frame .action-bar,
body.home-light-frame .stats-bar,
body.home-light-frame .summary,
body.home-light-frame .table-footer,
body.home-light-frame .pagination,
body.home-light-frame .pager,
body.home-light-frame .mobile-pager,
body.home-light-frame .mgmt-pager {
  background: rgba(255, 255, 255, .96) !important;
  color: var(--a11y-text) !important;
  border-color: var(--a11y-line) !important;
  box-shadow: var(--a11y-shadow) !important;
}

html[data-skin="light"] .header,
html[data-skin="light"] .topbar,
html[data-skin="light"] .top-bar,
html[data-skin="light"] .top-nav,
html[data-skin="light"] .nav-bar,
html[data-skin="light"] .bar,
body.home-light-frame .header,
body.home-light-frame .topbar,
body.home-light-frame .top-bar,
body.home-light-frame .top-nav,
body.home-light-frame .nav-bar,
body.home-light-frame .bar {
  min-height: 56px !important;
}

html[data-skin="light"] .header,
html[data-skin="light"] .header-left,
html[data-skin="light"] .header-right,
html[data-skin="light"] .nav-left,
html[data-skin="light"] .nav-right,
html[data-skin="light"] .header-nav,
html[data-skin="light"] .topbar-row,
html[data-skin="light"] .topbar-row1,
html[data-skin="light"] .topbar-row2,
html[data-skin="light"] .tabs,
html[data-skin="light"] .tabbar,
html[data-skin="light"] .page-tabs,
html[data-skin="light"] .pill-tabs,
html[data-skin="light"] .color-tabs,
html[data-skin="light"] .filter-row,
html[data-skin="light"] .filter-btns,
html[data-skin="light"] .quick-stats,
html[data-skin="light"] .stats-grid,
body.home-light-frame .header,
body.home-light-frame .header-left,
body.home-light-frame .header-right,
body.home-light-frame .nav-left,
body.home-light-frame .nav-right,
body.home-light-frame .header-nav,
body.home-light-frame .topbar-row,
body.home-light-frame .topbar-row1,
body.home-light-frame .topbar-row2,
body.home-light-frame .tabs,
body.home-light-frame .tabbar,
body.home-light-frame .page-tabs,
body.home-light-frame .pill-tabs,
body.home-light-frame .color-tabs,
body.home-light-frame .filter-row,
body.home-light-frame .filter-btns,
body.home-light-frame .quick-stats,
body.home-light-frame .stats-grid {
  align-items: center !important;
  gap: 10px !important;
  row-gap: 8px !important;
  min-width: 0 !important;
}

html[data-skin="light"] .header-right,
html[data-skin="light"] .nav-right,
html[data-skin="light"] .header-nav,
html[data-skin="light"] .tabbar,
html[data-skin="light"] .tabs,
html[data-skin="light"] .page-tabs,
html[data-skin="light"] .topbar-row2,
body.home-light-frame .header-right,
body.home-light-frame .nav-right,
body.home-light-frame .header-nav,
body.home-light-frame .tabbar,
body.home-light-frame .tabs,
body.home-light-frame .page-tabs,
body.home-light-frame .topbar-row2 {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

/* 控件 */
html[data-skin="light"] button,
html[data-skin="light"] .btn,
html[data-skin="light"] .nav-btn,
html[data-skin="light"] .header-btn,
html[data-skin="light"] .filter-btn,
html[data-skin="light"] .page-tab-btn,
html[data-skin="light"] .tab,
html[data-skin="light"] .tab-btn,
html[data-skin="light"] .pill-tab,
html[data-skin="light"] .size-btn,
html[data-skin="light"] .page-btn,
html[data-skin="light"] .pg,
html[data-skin="light"] .pg-btn,
html[data-skin="light"] .worker-btn,
html[data-skin="light"] .action-btn,
body.home-light-frame button,
body.home-light-frame .btn,
body.home-light-frame .nav-btn,
body.home-light-frame .header-btn,
body.home-light-frame .filter-btn,
body.home-light-frame .page-tab-btn,
body.home-light-frame .tab,
body.home-light-frame .tab-btn,
body.home-light-frame .pill-tab,
body.home-light-frame .size-btn,
body.home-light-frame .page-btn,
body.home-light-frame .pg,
body.home-light-frame .pg-btn,
body.home-light-frame .worker-btn,
body.home-light-frame .action-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

html[data-skin="light"] input,
html[data-skin="light"] select,
html[data-skin="light"] textarea,
html[data-skin="light"] .search-box,
html[data-skin="light"] .search-input,
html[data-skin="light"] .header-search,
html[data-skin="light"] .toolbar-search,
html[data-skin="light"] .category-select,
html[data-skin="light"] .input-field,
html[data-skin="light"] .select-field,
html[data-skin="light"] .inp,
html[data-skin="light"] .sel,
body.home-light-frame input,
body.home-light-frame select,
body.home-light-frame textarea,
body.home-light-frame .search-box,
body.home-light-frame .search-input,
body.home-light-frame .header-search,
body.home-light-frame .toolbar-search,
body.home-light-frame .category-select,
body.home-light-frame .input-field,
body.home-light-frame .select-field,
body.home-light-frame .inp,
body.home-light-frame .sel {
  min-height: 38px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--a11y-line) !important;
  color: var(--a11y-text) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

html[data-skin="light"] input:focus,
html[data-skin="light"] select:focus,
html[data-skin="light"] textarea:focus,
body.home-light-frame input:focus,
body.home-light-frame select:focus,
body.home-light-frame textarea:focus {
  outline: none !important;
  border-color: var(--a11y-accent) !important;
  box-shadow: 0 0 0 3px var(--a11y-focus) !important;
}

html[data-skin="light"] input::placeholder,
html[data-skin="light"] textarea::placeholder,
body.home-light-frame input::placeholder,
body.home-light-frame textarea::placeholder {
  color: #667085 !important;
}

/* 卡片、表格、列表 */
html[data-skin="light"] .card,
html[data-skin="light"] .product-card,
html[data-skin="light"] .grid-card,
html[data-skin="light"] .m-card,
html[data-skin="light"] .user-card,
html[data-skin="light"] .worker-card,
html[data-skin="light"] .result-item,
html[data-skin="light"] .search-item,
html[data-skin="light"] .stat-card,
html[data-skin="light"] .summary-card,
html[data-skin="light"] .box,
html[data-skin="light"] .table-wrap,
html[data-skin="light"] .table-container,
html[data-skin="light"] .desktop-table,
html[data-skin="light"] .mobile-cards,
html[data-skin="light"] .products-grid,
html[data-skin="light"] .products-list,
body.home-light-frame .card,
body.home-light-frame .product-card,
body.home-light-frame .grid-card,
body.home-light-frame .m-card,
body.home-light-frame .user-card,
body.home-light-frame .worker-card,
body.home-light-frame .result-item,
body.home-light-frame .search-item,
body.home-light-frame .stat-card,
body.home-light-frame .summary-card,
body.home-light-frame .box,
body.home-light-frame .table-wrap,
body.home-light-frame .table-container,
body.home-light-frame .desktop-table,
body.home-light-frame .mobile-cards,
body.home-light-frame .products-grid,
body.home-light-frame .products-list {
  background: var(--a11y-surface) !important;
  border-color: var(--a11y-line) !important;
  color: var(--a11y-text) !important;
  box-shadow: var(--a11y-shadow) !important;
  border-radius: 8px !important;
}

html[data-skin="light"] table,
body.home-light-frame table {
  background: #FFFFFF !important;
  color: var(--a11y-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html[data-skin="light"] th,
body.home-light-frame th {
  background: #DDE7EE !important;
  color: #1D2939 !important;
  border-bottom: 1px solid var(--a11y-line) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  padding: 10px 10px !important;
}

html[data-skin="light"] td,
body.home-light-frame td {
  color: var(--a11y-text) !important;
  border-bottom: 1px solid #E3EAF1 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  padding: 10px 10px !important;
}

html[data-skin="light"] tr:hover td,
body.home-light-frame tr:hover td {
  background: #EEF8FA !important;
}

/* 图片卡和信息条 */
html[data-skin="light"] .img-container,
html[data-skin="light"] .product-image-wrapper,
html[data-skin="light"] .card-img,
html[data-skin="light"] .card-img-mobile,
html[data-skin="light"] .thumb,
html[data-skin="light"] .thumbnail,
body.home-light-frame .img-container,
body.home-light-frame .product-image-wrapper,
body.home-light-frame .card-img,
body.home-light-frame .card-img-mobile,
body.home-light-frame .thumb,
body.home-light-frame .thumbnail {
  background: #FFFFFF !important;
  border-color: var(--a11y-line-soft) !important;
}

html[data-skin="light"] .overlay-bar,
body.home-light-frame .overlay-bar,
html[data-skin="light"] .country-flag,
body.home-light-frame .country-flag {
  background: #E5E7EB !important;
  border: 1px solid #B8C2CC !important;
  color: #111827 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* 强高亮：老花优先，一眼看见 */
html[data-skin="light"] .match-red,
html[data-skin="light"] .highlight-red,
html[data-skin="light"] .hl-red,
html[data-skin="light"] .vc-red,
body.home-light-frame .match-red,
body.home-light-frame .highlight-red,
body.home-light-frame .hl-red,
body.home-light-frame .vc-red {
  background: #FCA5A5 !important;
  border-color: #DC2626 !important;
  color: #7F1D1D !important;
}

html[data-skin="light"] .match-blue,
html[data-skin="light"] .highlight-blue,
html[data-skin="light"] .hl-blue,
html[data-skin="light"] .vc-blue,
body.home-light-frame .match-blue,
body.home-light-frame .highlight-blue,
body.home-light-frame .hl-blue,
body.home-light-frame .vc-blue {
  background: #93C5FD !important;
  border-color: #2563EB !important;
  color: #1E3A8A !important;
}

html[data-skin="light"] .match-purple,
html[data-skin="light"] .highlight-purple,
html[data-skin="light"] .hl-purple,
html[data-skin="light"] .vc-purple,
body.home-light-frame .match-purple,
body.home-light-frame .highlight-purple,
body.home-light-frame .hl-purple,
body.home-light-frame .vc-purple {
  background: #C4B5FD !important;
  border-color: #7C3AED !important;
  color: #4C1D95 !important;
}

html[data-skin="light"] .match-yellow,
html[data-skin="light"] .highlight-yellow,
html[data-skin="light"] .hl-yellow,
html[data-skin="light"] .vc-yellow,
body.home-light-frame .match-yellow,
body.home-light-frame .highlight-yellow,
body.home-light-frame .hl-yellow,
body.home-light-frame .vc-yellow {
  background: #FCD34D !important;
  border-color: #D97706 !important;
  color: #78350F !important;
}

html[data-skin="light"] .match-cyan,
html[data-skin="light"] .highlight-cyan,
html[data-skin="light"] .hl-cyan,
html[data-skin="light"] .vc-cyan,
body.home-light-frame .match-cyan,
body.home-light-frame .highlight-cyan,
body.home-light-frame .hl-cyan,
body.home-light-frame .vc-cyan {
  background: #67E8F9 !important;
  border-color: #0891B2 !important;
  color: #164E63 !important;
}

html[data-skin="light"] .match-orange,
html[data-skin="light"] .highlight-orange,
html[data-skin="light"] .hl-orange,
html[data-skin="light"] .vc-orange,
body.home-light-frame .match-orange,
body.home-light-frame .highlight-orange,
body.home-light-frame .hl-orange,
body.home-light-frame .vc-orange {
  background: #FDBA74 !important;
  border-color: #EA580C !important;
  color: #7C2D12 !important;
}

html[data-skin="light"] .match-green,
html[data-skin="light"] .highlight-green,
html[data-skin="light"] .hl-green,
html[data-skin="light"] .vc-green,
html[data-skin="light"] .vc-free,
body.home-light-frame .match-green,
body.home-light-frame .highlight-green,
body.home-light-frame .hl-green,
body.home-light-frame .vc-green,
body.home-light-frame .vc-free {
  background: #6EE7B7 !important;
  border-color: #059669 !important;
  color: #064E3B !important;
}

/* 白字/暗底残留修正 */
html[data-skin="light"] [style*="color:#fff"],
html[data-skin="light"] [style*="color: #fff"],
html[data-skin="light"] [style*="color:white"],
html[data-skin="light"] [style*="color: white"],
html[data-skin="light"] [style*="color:rgba(255,255,255"],
html[data-skin="light"] [style*="color: rgba(255,255,255"],
body.home-light-frame [style*="color:#fff"],
body.home-light-frame [style*="color: #fff"],
body.home-light-frame [style*="color:white"],
body.home-light-frame [style*="color: white"],
body.home-light-frame [style*="color:rgba(255,255,255"],
body.home-light-frame [style*="color: rgba(255,255,255"] {
  color: var(--a11y-text) !important;
}

html[data-skin="light"] [style*="background:rgba(255,255,255,0.1)"],
html[data-skin="light"] [style*="background: rgba(255,255,255,0.1)"],
html[data-skin="light"] [style*="background:rgba(255,255,255,.1)"],
html[data-skin="light"] [style*="background: rgba(255,255,255,.1)"],
html[data-skin="light"] [style*="background:#222"],
html[data-skin="light"] [style*="background: #222"],
html[data-skin="light"] [style*="background:#333"],
html[data-skin="light"] [style*="background: #333"],
body.home-light-frame [style*="background:rgba(255,255,255,0.1)"],
body.home-light-frame [style*="background: rgba(255,255,255,0.1)"],
body.home-light-frame [style*="background:rgba(255,255,255,.1)"],
body.home-light-frame [style*="background: rgba(255,255,255,.1)"],
body.home-light-frame [style*="background:#222"],
body.home-light-frame [style*="background: #222"],
body.home-light-frame [style*="background:#333"],
body.home-light-frame [style*="background: #333"] {
  background: #FFFFFF !important;
  color: var(--a11y-text) !important;
  border-color: var(--a11y-line) !important;
}

/* 主按钮和危险按钮保持语义 */
html[data-skin="light"] .active,
html[data-skin="light"] .btn-primary,
html[data-skin="light"] .primary,
body.home-light-frame .active,
body.home-light-frame .btn-primary,
body.home-light-frame .primary {
  font-weight: 900 !important;
}

html[data-skin="light"] .btn-primary,
html[data-skin="light"] .nav-btn.primary,
html[data-skin="light"] button.active,
html[data-skin="light"] .tab.active,
html[data-skin="light"] .page-tab-btn.active,
body.home-light-frame .btn-primary,
body.home-light-frame .nav-btn.primary,
body.home-light-frame button.active,
body.home-light-frame .tab.active,
body.home-light-frame .page-tab-btn.active {
  background: #006F7F !important;
  color: #FFFFFF !important;
  border-color: #006F7F !important;
}

html[data-skin="light"] .btn-danger,
html[data-skin="light"] .btn-delete,
html[data-skin="light"] .delete,
html[data-skin="light"] .btn-red,
body.home-light-frame .btn-danger,
body.home-light-frame .btn-delete,
body.home-light-frame .delete,
body.home-light-frame .btn-red {
  background: #FEE4E2 !important;
  color: #991B1B !important;
  border-color: #FDA29B !important;
}

@media (max-width: 768px) {
  html[data-skin="light"],
  body.home-light-frame {
    font-size: 16px !important;
  }

  html[data-skin="light"] button,
  html[data-skin="light"] .btn,
  html[data-skin="light"] input,
  html[data-skin="light"] select,
  html[data-skin="light"] textarea,
  body.home-light-frame button,
  body.home-light-frame .btn,
  body.home-light-frame input,
  body.home-light-frame select,
  body.home-light-frame textarea {
    min-height: 40px !important;
    font-size: 15px !important;
  }

  html[data-skin="light"] th,
  html[data-skin="light"] td,
  body.home-light-frame th,
  body.home-light-frame td {
    font-size: 14px !important;
    padding: 9px 8px !important;
  }
}

/* Mobile polish: scoped to small screens only so desktop layouts stay untouched. */
@media (max-width: 820px) {
  :is(html[data-skin="light"] body, body.home-light-frame) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  :is(html[data-skin="light"], body.home-light-frame) {
    --a11y-mobile-pad: 10px;
    --a11y-mobile-gap: 10px;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) h2,
  :is(html[data-skin="light"], body.home-light-frame) .box-title,
  :is(html[data-skin="light"], body.home-light-frame) .section-title {
    font-size: 19px !important;
    line-height: 1.28 !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) h3,
  :is(html[data-skin="light"], body.home-light-frame) h4 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .container,
  :is(html[data-skin="light"], body.home-light-frame) .page,
  :is(html[data-skin="light"], body.home-light-frame) .wrap,
  :is(html[data-skin="light"], body.home-light-frame) .wrapper,
  :is(html[data-skin="light"], body.home-light-frame) .main,
  :is(html[data-skin="light"], body.home-light-frame) .main-content,
  :is(html[data-skin="light"], body.home-light-frame) .dashboard,
  :is(html[data-skin="light"], body.home-light-frame) .panel,
  :is(html[data-skin="light"], body.home-light-frame) .section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .container,
  :is(html[data-skin="light"], body.home-light-frame) .page,
  :is(html[data-skin="light"], body.home-light-frame) .wrapper,
  :is(html[data-skin="light"], body.home-light-frame) .main,
  :is(html[data-skin="light"], body.home-light-frame) .main-content {
    padding-left: var(--a11y-mobile-pad) !important;
    padding-right: var(--a11y-mobile-pad) !important;
  }

  /* home.html shell */
  html[data-skin="light"] body .content:has(> iframe#frame) {
    width: 100vw !important;
    height: 100dvh !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  html[data-skin="light"] body .content:has(> iframe#frame) iframe#frame {
    width: 100vw !important;
    height: 100dvh !important;
  }

  html[data-skin="light"] body .side-nav {
    width: min(84vw, 320px) !important;
    max-width: 320px !important;
  }

  html[data-skin="light"] body .sn-user {
    min-height: 58px !important;
    padding: 12px 14px !important;
  }

  html[data-skin="light"] body .sn-user img {
    width: 36px !important;
    height: 36px !important;
  }

  html[data-skin="light"] body .sn-item {
    min-height: 46px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    gap: 12px !important;
  }

  html[data-skin="light"] body .sn-group {
    padding: 16px 16px 7px !important;
    font-size: 13px !important;
  }

  html[data-skin="light"] body .sn-bottom {
    flex-wrap: wrap !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  }

  html[data-skin="light"] body .sn-bottom .sn-btn {
    flex: 1 1 42% !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }

  html[data-skin="light"] body .sn-show {
    width: 46px !important;
    height: 46px !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 10px !important;
    border-radius: 12px !important;
  }

  /* Toolbars and filter rows */
  :is(html[data-skin="light"], body.home-light-frame) .header,
  :is(html[data-skin="light"], body.home-light-frame) .topbar,
  :is(html[data-skin="light"], body.home-light-frame) .top-bar,
  :is(html[data-skin="light"], body.home-light-frame) .top-nav,
  :is(html[data-skin="light"], body.home-light-frame) .nav-bar,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar-content,
  :is(html[data-skin="light"], body.home-light-frame) .filter-bar,
  :is(html[data-skin="light"], body.home-light-frame) .filters,
  :is(html[data-skin="light"], body.home-light-frame) .search-bar,
  :is(html[data-skin="light"], body.home-light-frame) .action-bar,
  :is(html[data-skin="light"], body.home-light-frame) .table-footer,
  :is(html[data-skin="light"], body.home-light-frame) .pagination,
  :is(html[data-skin="light"], body.home-light-frame) .pager,
  :is(html[data-skin="light"], body.home-light-frame) .mgmt-pager {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    gap: var(--a11y-mobile-gap) !important;
    row-gap: 8px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .header,
  :is(html[data-skin="light"], body.home-light-frame) .topbar,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar,
  :is(html[data-skin="light"], body.home-light-frame) .filter-bar,
  :is(html[data-skin="light"], body.home-light-frame) .filters,
  :is(html[data-skin="light"], body.home-light-frame) .search-bar,
  :is(html[data-skin="light"], body.home-light-frame) .action-bar {
    flex-wrap: wrap !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .filters > *,
  :is(html[data-skin="light"], body.home-light-frame) .filter-bar > *,
  :is(html[data-skin="light"], body.home-light-frame) .search-bar > *,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar > select,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar > input,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar-content > select,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar-content > input {
    min-width: min(100%, 150px) !important;
    flex: 1 1 150px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .tabbar,
  :is(html[data-skin="light"], body.home-light-frame) .tabs,
  :is(html[data-skin="light"], body.home-light-frame) .page-tabs,
  :is(html[data-skin="light"], body.home-light-frame) .pill-tabs,
  :is(html[data-skin="light"], body.home-light-frame) .color-tabs,
  :is(html[data-skin="light"], body.home-light-frame) .header-nav,
  :is(html[data-skin="light"], body.home-light-frame) .topbar-row2,
  :is(html[data-skin="light"], body.home-light-frame) .sb-nav,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-status-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  :is(html[data-skin="light"], body.home-light-frame) .tabbar::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .tabs::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .page-tabs::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .pill-tabs::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .color-tabs::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .header-nav::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .topbar-row2::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .sb-nav::-webkit-scrollbar,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-status-row::-webkit-scrollbar {
    display: none;
  }

  :is(html[data-skin="light"], body.home-light-frame) .tabbar > *,
  :is(html[data-skin="light"], body.home-light-frame) .tabs > *,
  :is(html[data-skin="light"], body.home-light-frame) .page-tabs > *,
  :is(html[data-skin="light"], body.home-light-frame) .pill-tabs > *,
  :is(html[data-skin="light"], body.home-light-frame) .color-tabs > *,
  :is(html[data-skin="light"], body.home-light-frame) .header-nav > *,
  :is(html[data-skin="light"], body.home-light-frame) .topbar-row2 > *,
  :is(html[data-skin="light"], body.home-light-frame) .sb-nav > *,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-status-row > * {
    flex: 0 0 auto !important;
  }

  /* Touch targets */
  :is(html[data-skin="light"], body.home-light-frame) button,
  :is(html[data-skin="light"], body.home-light-frame) .btn,
  :is(html[data-skin="light"], body.home-light-frame) .nav-btn,
  :is(html[data-skin="light"], body.home-light-frame) .header-btn,
  :is(html[data-skin="light"], body.home-light-frame) .filter-btn,
  :is(html[data-skin="light"], body.home-light-frame) .page-tab-btn,
  :is(html[data-skin="light"], body.home-light-frame) .tab,
  :is(html[data-skin="light"], body.home-light-frame) .tab-btn,
  :is(html[data-skin="light"], body.home-light-frame) .pill-tab,
  :is(html[data-skin="light"], body.home-light-frame) .size-btn,
  :is(html[data-skin="light"], body.home-light-frame) .page-btn,
  :is(html[data-skin="light"], body.home-light-frame) .pg,
  :is(html[data-skin="light"], body.home-light-frame) .pg-btn,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-pg-btn,
  :is(html[data-skin="light"], body.home-light-frame) .action-btn,
  :is(html[data-skin="light"], body.home-light-frame) .action-bar-btn,
  :is(html[data-skin="light"], body.home-light-frame) .card-action-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) input:not([type="checkbox"]):not([type="radio"]),
  :is(html[data-skin="light"], body.home-light-frame) select,
  :is(html[data-skin="light"], body.home-light-frame) textarea,
  :is(html[data-skin="light"], body.home-light-frame) [contenteditable="true"],
  :is(html[data-skin="light"], body.home-light-frame) .search-box,
  :is(html[data-skin="light"], body.home-light-frame) .search-input,
  :is(html[data-skin="light"], body.home-light-frame) .header-search,
  :is(html[data-skin="light"], body.home-light-frame) .toolbar-search,
  :is(html[data-skin="light"], body.home-light-frame) .category-select,
  :is(html[data-skin="light"], body.home-light-frame) .input-field,
  :is(html[data-skin="light"], body.home-light-frame) .select-field {
    min-height: 44px !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) input[type="checkbox"],
  :is(html[data-skin="light"], body.home-light-frame) input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 auto !important;
  }

  /* Cards and grids */
  :is(html[data-skin="light"], body.home-light-frame) .card,
  :is(html[data-skin="light"], body.home-light-frame) .product-card,
  :is(html[data-skin="light"], body.home-light-frame) .grid-card,
  :is(html[data-skin="light"], body.home-light-frame) .m-card,
  :is(html[data-skin="light"], body.home-light-frame) .user-card,
  :is(html[data-skin="light"], body.home-light-frame) .worker-card,
  :is(html[data-skin="light"], body.home-light-frame) .result-item,
  :is(html[data-skin="light"], body.home-light-frame) .search-item,
  :is(html[data-skin="light"], body.home-light-frame) .stat-card,
  :is(html[data-skin="light"], body.home-light-frame) .summary-card,
  :is(html[data-skin="light"], body.home-light-frame) .box,
  :is(html[data-skin="light"], body.home-light-frame) .vine-card,
  :is(html[data-skin="light"], body.home-light-frame) .vinealert-card,
  :is(html[data-skin="light"], body.home-light-frame) .sim-card,
  :is(html[data-skin="light"], body.home-light-frame) .folder-item,
  :is(html[data-skin="light"], body.home-light-frame) .file-item {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .product-card,
  :is(html[data-skin="light"], body.home-light-frame) .m-card,
  :is(html[data-skin="light"], body.home-light-frame) .worker-card,
  :is(html[data-skin="light"], body.home-light-frame) .file-item,
  :is(html[data-skin="light"], body.home-light-frame) .folder-item {
    gap: 10px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .products-grid,
  :is(html[data-skin="light"], body.home-light-frame) .results-grid,
  :is(html[data-skin="light"], body.home-light-frame) .vine-grid,
  :is(html[data-skin="light"], body.home-light-frame) .vinealert-grid,
  :is(html[data-skin="light"], body.home-light-frame) .gallery,
  :is(html[data-skin="light"], body.home-light-frame) .sim-grid,
  :is(html[data-skin="light"], body.home-light-frame) .cards,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-cards,
  :is(html[data-skin="light"], body.home-light-frame) .products-list {
    gap: 10px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .products-grid,
  :is(html[data-skin="light"], body.home-light-frame) .results-grid,
  :is(html[data-skin="light"], body.home-light-frame) .vine-grid,
  :is(html[data-skin="light"], body.home-light-frame) .vinealert-grid,
  :is(html[data-skin="light"], body.home-light-frame) .gallery,
  :is(html[data-skin="light"], body.home-light-frame) .sim-grid {
    grid-template-columns: 1fr !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .summary,
  :is(html[data-skin="light"], body.home-light-frame) .stats-grid,
  :is(html[data-skin="light"], body.home-light-frame) .quick-stats,
  :is(html[data-skin="light"], body.home-light-frame) .vinealert-summary,
  :is(html[data-skin="light"], body.home-light-frame) .m-card-fields,
  :is(html[data-skin="light"], body.home-light-frame) .result-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .card-title,
  :is(html[data-skin="light"], body.home-light-frame) .product-title,
  :is(html[data-skin="light"], body.home-light-frame) .card-title-mobile,
  :is(html[data-skin="light"], body.home-light-frame) .vine-card-title,
  :is(html[data-skin="light"], body.home-light-frame) .p-title,
  :is(html[data-skin="light"], body.home-light-frame) .file-name,
  :is(html[data-skin="light"], body.home-light-frame) .folder-item a {
    font-size: 16px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .meta,
  :is(html[data-skin="light"], body.home-light-frame) .card-date,
  :is(html[data-skin="light"], body.home-light-frame) .card-time-mobile,
  :is(html[data-skin="light"], body.home-light-frame) .file-meta,
  :is(html[data-skin="light"], body.home-light-frame) .vine-card-time,
  :is(html[data-skin="light"], body.home-light-frame) .stat-label {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .asin,
  :is(html[data-skin="light"], body.home-light-frame) .asin-link,
  :is(html[data-skin="light"], body.home-light-frame) .asin-tag,
  :is(html[data-skin="light"], body.home-light-frame) .card-asin,
  :is(html[data-skin="light"], body.home-light-frame) .card-asin-mobile,
  :is(html[data-skin="light"], body.home-light-frame) .vine-card-asin {
    font-size: 14px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) img,
  :is(html[data-skin="light"], body.home-light-frame) video,
  :is(html[data-skin="light"], body.home-light-frame) canvas {
    max-width: 100% !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .card-img,
  :is(html[data-skin="light"], body.home-light-frame) .card-img-mobile,
  :is(html[data-skin="light"], body.home-light-frame) .product-image,
  :is(html[data-skin="light"], body.home-light-frame) .product-img,
  :is(html[data-skin="light"], body.home-light-frame) .thumb,
  :is(html[data-skin="light"], body.home-light-frame) .thumbnail,
  :is(html[data-skin="light"], body.home-light-frame) .p-img {
    flex: 0 0 auto !important;
  }

  /* Tables stay readable without pushing the whole page sideways. */
  :is(html[data-skin="light"], body.home-light-frame) .table-wrap,
  :is(html[data-skin="light"], body.home-light-frame) .table-container,
  :is(html[data-skin="light"], body.home-light-frame) .desktop-table,
  :is(html[data-skin="light"], body.home-light-frame) .tbl-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  :is(html[data-skin="light"], body.home-light-frame) .table-wrap > table,
  :is(html[data-skin="light"], body.home-light-frame) .table-container > table,
  :is(html[data-skin="light"], body.home-light-frame) .desktop-table table,
  :is(html[data-skin="light"], body.home-light-frame) .tbl-wrap table {
    min-width: 680px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) th,
  :is(html[data-skin="light"], body.home-light-frame) td {
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
  }

  /* Fixed lower toolbars */
  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-bar,
  :is(html[data-skin="light"], body.home-light-frame) .bottom-dock,
  :is(html[data-skin="light"], body.home-light-frame) .dock,
  :is(html[data-skin="light"], body.home-light-frame) .batch-bar,
  :is(html[data-skin="light"], body.home-light-frame) .batch-action-bar {
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar input:not([type="checkbox"]):not([type="radio"]),
  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar .search-input,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar .header-search {
    flex: 1 1 180px !important;
    min-width: 160px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar button,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-bottom-toolbar select {
    flex: 0 0 auto !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .bar-toggle.bar-visible {
    bottom: calc(132px + env(safe-area-inset-bottom)) !important;
    right: 64px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .toolbar-toggle.toolbar-visible {
    bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    right: 64px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .content:not(:has(> iframe#frame)),
  :is(html[data-skin="light"], body.home-light-frame) .container,
  :is(html[data-skin="light"], body.home-light-frame) .products-grid,
  :is(html[data-skin="light"], body.home-light-frame) .products-list,
  :is(html[data-skin="light"], body.home-light-frame) .mobile-cards,
  :is(html[data-skin="light"], body.home-light-frame) .mid-list {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  /* Sheets and dialogs */
  :is(html[data-skin="light"], body.home-light-frame) .settings-sheet,
  :is(html[data-skin="light"], body.home-light-frame) .modal,
  :is(html[data-skin="light"], body.home-light-frame) .dialog,
  :is(html[data-skin="light"], body.home-light-frame) .sheet,
  :is(html[data-skin="light"], body.home-light-frame) .batch-modal,
  :is(html[data-skin="light"], body.home-light-frame) .batch-modal-box {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    border-radius: 10px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .lightbox img,
  :is(html[data-skin="light"], body.home-light-frame) .img-preview,
  :is(html[data-skin="light"], body.home-light-frame) .vine-zoom,
  :is(html[data-skin="light"], body.home-light-frame) .big-image-preview {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .card:hover,
  :is(html[data-skin="light"], body.home-light-frame) .product-card:hover,
  :is(html[data-skin="light"], body.home-light-frame) .folder-item:hover,
  :is(html[data-skin="light"], body.home-light-frame) .sim-card:hover {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  :is(html[data-skin="light"], body.home-light-frame) {
    --a11y-mobile-pad: 8px;
    --a11y-mobile-gap: 8px;
  }

  :is(html[data-skin="light"], body.home-light-frame) .summary,
  :is(html[data-skin="light"], body.home-light-frame) .stats-grid,
  :is(html[data-skin="light"], body.home-light-frame) .quick-stats,
  :is(html[data-skin="light"], body.home-light-frame) .vinealert-summary,
  :is(html[data-skin="light"], body.home-light-frame) .m-card-fields,
  :is(html[data-skin="light"], body.home-light-frame) .result-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .filters > *,
  :is(html[data-skin="light"], body.home-light-frame) .filter-bar > *,
  :is(html[data-skin="light"], body.home-light-frame) .search-bar > * {
    flex-basis: 100% !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .mobile-action-row,
  :is(html[data-skin="light"], body.home-light-frame) .card-actions,
  :is(html[data-skin="light"], body.home-light-frame) .file-actions,
  :is(html[data-skin="light"], body.home-light-frame) .actions {
    display: flex !important;
    gap: 8px !important;
  }

  :is(html[data-skin="light"], body.home-light-frame) .mobile-action-row > *,
  :is(html[data-skin="light"], body.home-light-frame) .card-actions > *,
  :is(html[data-skin="light"], body.home-light-frame) .file-actions > *,
  :is(html[data-skin="light"], body.home-light-frame) .actions > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}