@import url("assets/vendor/mdi/materialdesignicons.min.css");

/* SHARED */
:root {
  --app-font: Inter, "Noto Sans", "Segoe UI", Arial, sans-serif;
  --row-label-width: 120px;
  --slot-height: 44px;
  --page-bg: #061017;
  --app-bg: var(--page-bg);
  --panel-bg: #081621;
  --table-bg: #081621;
  --header-bg: rgba(20, 45, 63, 0.95);
  --header-cell-bg: linear-gradient(180deg, #2b4052 0%, #213141 100%);
  --row-label-bg: linear-gradient(180deg, #464646 0%, #343434 100%);
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-soft: #94a3b8;
  --grid-border: rgba(255,255,255,0.1);
  --cell-bg: rgba(8, 22, 32, 0.92);
  --cell-border: rgba(125, 211, 252, 0.14);
  --cell-empty-bg: rgba(8, 22, 32, 0.84);
  --feature-bg: rgba(3, 16, 26, 0.78);
  --feature-border: rgba(56, 189, 248, 0.28);
  --slot-bg: var(--feature-bg);
  --slot-border: var(--feature-border);
  --muted-text-soft: var(--text-soft);
  --button-bg: linear-gradient(180deg, #15527a 0%, #0b3554 100%);
  --sidebar-text: #f4f7fb;
  --sidebar-icon: #f4f7fb;
  --corner-logo-color: rgba(255,255,255,0.82);
  --tech-logo-color: #ffffff;
  --pg-title-color: rgba(245, 250, 255, 0.96);
  --pocket-guide-title-color: #f8fafc;
  --pocket-guide-title-shadow: 0 1px 2px rgba(0,0,0,.55);
  --pg-logo-color: rgba(245, 250, 255, 0.96);
  --control-height: 32px;
  --control-radius: 10px;
  --control-font: 12px;
  --control-icon: 16px;
  --toolbar-font-size: 14px;
  --toolbar-font-size-mobile: 13px;
  --toolbar-font-weight: 700;
  --toolbar-tab-height: 42px;
  --toolbar-tab-active-height: 48px;
  --toolbar-tab-radius: 16px 16px 0 0;
  --toolbar-tab-padding-x: 22px;
  --toolbar-tab-height-mobile: 38px;
  --toolbar-tab-active-height-mobile: 42px;
  --toolbar-tab-radius-mobile: 14px 14px 0 0;
  --toolbar-tab-padding-x-mobile: 16px;
  --toolbar-icon-btn-size: 34px;
  --toolbar-icon-size: 16px;
  --toolbar-icon-btn-radius: 10px;
  --page-x: 16px;
  --header-height: 44px;
  --section-gap: 16px;
  --pg-action-radius: 999px;
  --pg-action-glow-size: 4px;
  --pg-action-bg: linear-gradient(135deg, #0877c9 0%, #075d88 52%, #087967 100%);
  --pg-action-bg-active: linear-gradient(135deg, #0668b1 0%, #064d72 52%, #066657 100%);
  --pg-action-glow: linear-gradient(
    90deg,
    #38bdf8,
    #0ea5e9,
    #22d3ee,
    #6366f1,
    #8b5cf6,
    #dbeafe,
    #22d3ee,
    #38bdf8
  );
  --pg-action-shadow: rgba(14, 165, 233, 0.24);
}

@media (max-width:1024px) {
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer,
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer-shell,
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer-sections,
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-card-view { background:#fff !important; background-image:none !important; box-shadow:none !important; }
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer::before,
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer::after,
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer-sections::before,
  :is(html.light,html[data-theme="day"]) .bravia-page .mobile-drawer-sections::after { display:none !important; content:none !important; pointer-events:none !important; }
}
.release-notes-dialog { background:#071621 !important; color:#f8fbff !important; opacity:1 !important; }
.release-notes-dialog h2,.release-notes-list { color:#f8fbff !important; }
.release-notes-close { background:#183548 !important; color:#fff !important; }
:is(html.light,html[data-theme="day"]) .release-notes-dialog { background:#fff !important; color:#102030 !important; }
:is(html.light,html[data-theme="day"]) .release-notes-dialog h2,:is(html.light,html[data-theme="day"]) .release-notes-list { color:#102030 !important; }
:is(html.light,html[data-theme="day"]) .release-notes-close { background:#e7f0f5 !important; color:#102030 !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-dialog { border-radius:24px !important; overflow:hidden !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-stage,html body .b2ii-modal.image-viewer-modal:not([hidden]) .energy-label-stage { width:min(100%,760px) !important; height:min(100%,760px) !important; max-width:calc(100vw - 64px) !important; max-height:calc(100dvh - 80px) !important; padding:18px 56px 18px 18px !important; box-sizing:border-box !important; border-radius:24px !important; overflow:hidden !important; background:#fff !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-image,html body .b2ii-modal.image-viewer-modal:not([hidden]) .energy-label-modal-image { max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; border-radius:16px !important; }

:is(html.light, html[data-theme="day"]) {
  --pg-action-bg: linear-gradient(135deg, #087fc8 0%, #08719c 50%, #078a78 100%);
  --pg-action-bg-active: linear-gradient(135deg, #076eae 0%, #086184 50%, #067565 100%);
  --pg-action-glow: linear-gradient(
    90deg,
    #0284c7,
    #38bdf8,
    #06b6d4,
    #4f46e5,
    #7c3aed,
    #bfdbfe,
    #06b6d4,
    #0284c7
  );
  --pg-action-shadow: rgba(2, 132, 199, 0.2);
}

/* Shared two-level typography for every structured specification value. */
.bravia-page .spec-value-primary {
  color: var(--text-main) !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.bravia-page .spec-value-secondary {
  color: var(--text-muted) !important;
  font-size: 0.86em !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
}

.bravia-page :is(
  .bravia-spec-text-stack,
  .audio-speaker-config-list,
  .audio-power-lines,
  .series-value-cell
) > .spec-value-secondary {
  margin: 0 !important;
}

@media (max-width: 1024px) {
  html body .bravia-page .mobile-model-content-card > .mobile-model-cards {
    padding-top: 8px !important;
  }

  html body .bravia-page .mobile-design-spec-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    border-radius: 16px !important;
  }

  html body .bravia-page .mobile-feature-row,
  html body .bravia-page .mobile-design-spec-row {
    grid-template-columns: var(--mobile-spec-label-width, 118px) minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  html body .bravia-page :is(
    .mobile-feature-row > :nth-child(2),
    .mobile-design-spec-row > :nth-child(2),
    .mobile-design-spec-value
  ) {
    justify-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2) > :is(
    .slot,
    .drop-slot,
    .slot-fallback,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .audio-speaker-main,
    .audio-speaker-config-list,
    .audio-format-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .series-value-main,
    .series-value-line,
    .feature-yes,
    .feature-no
  ),
  html body .bravia-page .mobile-design-value-content {
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ) {
    align-items: start !important;
  }

  html body .bravia-page .mobile-spec-card--direct > .mobile-feature-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body .bravia-page .mobile-design-section {
    padding-top: 8px !important;
  }
}

/* Green mobile header and image-viewer final overrides. */
@media (max-width: 767px) {
  .bravia-page .app-header {
    display: grid !important;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
    align-items: center !important;
  }
  .bravia-page .brand-block { display: contents !important; }
  .bravia-page .mobile-menu-btn { grid-column: 1; justify-self: start; }
  .bravia-page .brand-mark {
    display: block !important; grid-column: 2; justify-self: center;
    width: 92px !important; height: 28px !important; object-fit: contain !important;
  }
  .bravia-page .brand-title { display: none !important; }
  .bravia-page .app-header-actions,
  .bravia-page .bravia-header-actions {
    display: inline-flex !important; grid-column: 3; justify-self: end;
    width: auto !important; min-width: 0 !important; gap: 4px !important;
  }
  .bravia-page .header-control-group { --header-control-size: 30px !important; gap: 3px !important; }
  .bravia-page .app-header-actions .bravia-action-button,
  .bravia-page .language-chip { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; border-radius: 50% !important; padding: 0 !important; }
  .bravia-page .language-chip { font-size: 17px !important; line-height: 1 !important; }
  .bravia-page .language-switch { height: 30px !important; gap: 3px !important; }
}

/* Remove the light drawer/list gradient that reads as a grey slab behind cards. */
@media (max-width: 1024px) {
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer,
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-shell,
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-sections,
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-card-view {
    background: #fff !important; background-image: none !important; box-shadow: none !important;
  }
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer::before,
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer::after,
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-sections::before,
  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-sections::after { display: none !important; content: none !important; pointer-events: none !important; }
}

/* Release panel must be an opaque theme-specific surface. */
.release-notes-dialog { background: #071621 !important; color: #f8fbff !important; opacity: 1 !important; }
.release-notes-dialog h2, .release-notes-list { color: #f8fbff !important; }
.release-notes-close { background: #183548 !important; color: #fff !important; }
:is(html.light, html[data-theme="day"]) .release-notes-dialog { background: #fff !important; color: #102030 !important; }
:is(html.light, html[data-theme="day"]) .release-notes-dialog h2,
:is(html.light, html[data-theme="day"]) .release-notes-list { color: #102030 !important; }
:is(html.light, html[data-theme="day"]) .release-notes-close { background: #e7f0f5 !important; color: #102030 !important; }

/* Shared viewer safe area, clipping and consistent energy-label sizing. */
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-dialog { border-radius: 24px !important; overflow: hidden !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-stage,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .energy-label-stage { width: min(100%, 760px) !important; height: min(100%, 760px) !important; max-width: calc(100vw - 64px) !important; max-height: calc(100dvh - 80px) !important; padding: 18px 56px 18px 18px !important; box-sizing: border-box !important; border-radius: 24px !important; overflow: hidden !important; background: #fff !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-image,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .energy-label-modal-image { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 16px !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-close { top: max(12px, env(safe-area-inset-top, 0px)) !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; }

@media (max-width: 1024px) {
  .bravia-page {
    --bravia-mobile-bg: #0b0b0f;
    --bravia-mobile-surface: #141418;
    --bravia-mobile-primary: #7c6aff;
    --bravia-mobile-accent: #00d4aa;
    --bravia-mobile-text: #eceaf5;
    --bravia-mobile-muted: #8d89a3;
    --bravia-mobile-border: #1f1f28;
    --bravia-mobile-shadow: rgba(0, 0, 0, 0.4);
    --bravia-mobile-ghost-bg: rgba(255, 255, 255, 0.04);
    background:
      radial-gradient(circle at top center, rgba(124, 106, 255, 0.12), transparent 44%),
      radial-gradient(circle at bottom center, rgba(0, 212, 170, 0.08), transparent 38%),
      var(--bravia-mobile-bg);
    color: var(--bravia-mobile-text);
  }

  :is(html.light, html[data-theme="day"]) .bravia-page {
    --bravia-mobile-bg: #f4f6fb;
    --bravia-mobile-surface: #ffffff;
    --bravia-mobile-primary: #6b5ce7;
    --bravia-mobile-accent: #4f6df5;
    --bravia-mobile-text: #1a1a2e;
    --bravia-mobile-muted: #7e7e9a;
    --bravia-mobile-border: #e8e6f0;
    --bravia-mobile-shadow: rgba(107, 92, 231, 0.12);
    --bravia-mobile-ghost-bg: rgba(107, 92, 231, 0.06);
    background:
      radial-gradient(circle at top center, rgba(232, 69, 124, 0.12), transparent 42%),
      radial-gradient(circle at bottom center, rgba(79, 109, 245, 0.10), transparent 36%),
      var(--bravia-mobile-bg);
  }

  body {
    background: var(--bravia-mobile-bg);
  }

  .app-shell {
    background: transparent;
  }

  .app-header {
    top: 0;
    margin: 10px 12px 0;
    min-height: 0;
    padding: calc(var(--mobile-safe-top) + 10px) 14px 12px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 26px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 92%, transparent);
    box-shadow: 0 18px 44px var(--bravia-mobile-shadow);
    backdrop-filter: blur(22px);
  }

  .bravia-header .brand-block {
    gap: 10px;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: var(--bravia-mobile-ghost-bg) !important;
    border: 1px solid var(--bravia-mobile-border) !important;
    color: var(--bravia-mobile-text) !important;
    box-shadow: none !important;
  }

  .app-header .pocket-guide-title {
    color: var(--bravia-mobile-text) !important;
    text-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .app-toolbar {
    top: calc(var(--mobile-safe-top) + 86px);
    margin: 10px 12px 0;
    padding: 12px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 28px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 94%, transparent);
    box-shadow: 0 18px 40px var(--bravia-mobile-shadow);
    backdrop-filter: blur(20px);
  }

  .mobile-search-field {
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 20px;
    background: var(--bravia-mobile-ghost-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .mobile-search-input,
  .mobile-search-clear,
  .mobile-search-icon {
    color: var(--bravia-mobile-text);
  }

  .mobile-search-input::placeholder,
  .mobile-search-clear {
    color: var(--bravia-mobile-muted);
  }

  .main-tabs-row,
  .toolbar-filter-row,
  .mobile-model-filter-row {
    padding: 0;
  }

  .main-tabs,
  .row-group-filters,
  .mobile-model-filters {
    gap: 6px;
    min-width: max-content;
    padding: 4px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 999px;
    background: var(--bravia-mobile-ghost-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  }

  .main-tab,
  .row-filter-btn,
  .mobile-model-filters .model-tab {
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bravia-mobile-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .main-tab.active,
  .main-tab.is-active,
  .main-tab[aria-selected="true"],
  .row-filter-btn.active,
  .row-filter-btn.is-active,
  .row-filter-btn[aria-pressed="true"],
  .mobile-model-filters .model-tab.active,
  .mobile-model-filters .model-tab[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent));
    color: #fff;
    box-shadow: 0 10px 24px rgba(124, 106, 255, 0.22);
  }

  :is(html.light, html[data-theme="day"]) .main-tab.active,
  :is(html.light, html[data-theme="day"]) .main-tab.is-active,
  :is(html.light, html[data-theme="day"]) .main-tab[aria-selected="true"],
  :is(html.light, html[data-theme="day"]) .row-filter-btn.active,
  :is(html.light, html[data-theme="day"]) .row-filter-btn.is-active,
  :is(html.light, html[data-theme="day"]) .row-filter-btn[aria-pressed="true"],
  :is(html.light, html[data-theme="day"]) .mobile-model-filters .model-tab.active,
  :is(html.light, html[data-theme="day"]) .mobile-model-filters .model-tab[aria-pressed="true"] {
    box-shadow: 0 10px 24px rgba(107, 92, 231, 0.18);
  }

  .app-main {
    padding: 8px 12px calc(var(--mobile-safe-bottom) + var(--mobile-bottom-nav-height) + 90px);
  }

  .matrix-panel.table-panel {
    background: transparent;
  }

  .mobile-card-view {
    gap: 16px;
    padding: 0 0 10px;
  }

  .mobile-overview-grid {
    gap: 14px;
  }

  .mobile-overview-card,
  .mobile-model-card {
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 28px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent);
    box-shadow: 0 20px 40px var(--bravia-mobile-shadow);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  .mobile-overview-card {
    gap: 14px;
    padding: 14px;
  }

  .overview-tv-image-wrap,
  .mobile-model-media {
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 22px;
    background: var(--bravia-mobile-ghost-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .overview-meta,
  .mobile-model-meta {
    gap: 6px;
  }

  .overview-model-code,
  .mobile-model-code {
    color: var(--bravia-mobile-muted);
  }

  .overview-model-name,
  .mobile-model-header h3,
  .mobile-feature-label-text {
    color: var(--bravia-mobile-text);
  }

  .overview-model-series,
  .overview-model-sizes,
  .mobile-model-series,
  .mobile-model-sizes {
    color: var(--bravia-mobile-muted);
  }

  .mobile-model-header {
    padding: 16px;
    border-bottom: 1px solid var(--bravia-mobile-border);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 100%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 88%, var(--bravia-mobile-bg))
    );
  }

  .mobile-model-meta-badge,
  .mobile-feature-summary-value,
  .mobile-compare-chip {
    border: 1px solid var(--bravia-mobile-border);
    background: var(--bravia-mobile-ghost-bg);
    color: var(--bravia-mobile-text);
  }

  .mobile-compare-chip.is-active {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent));
    border-color: transparent;
    color: #fff;
  }

  .mobile-spec-accordion {
    border-top: 1px solid var(--bravia-mobile-border);
    background: transparent;
  }

  .mobile-feature-summary {
    min-height: 54px;
    padding: 14px 16px;
    background: transparent;
  }

  .mobile-feature-detail {
    padding: 0 16px 16px;
    border-top: 1px solid var(--bravia-mobile-border);
  }

  .mobile-slot-stack .slot:not(.boolean-slot):not(.has-icon) {
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 18px;
    background: var(--bravia-mobile-ghost-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .mobile-bottom-nav {
    width: min(94vw, 560px);
    padding: 10px;
    gap: 8px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 26px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 94%, transparent);
    box-shadow: 0 18px 38px var(--bravia-mobile-shadow);
    backdrop-filter: blur(20px);
  }

  .mobile-bottom-nav-btn {
    min-height: 52px;
    border-radius: 18px;
    color: var(--bravia-mobile-muted);
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  .mobile-bottom-nav-btn.is-active {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent));
    color: #fff;
    box-shadow: 0 10px 24px rgba(124, 106, 255, 0.2);
  }

  .mobile-compare-fab,
  .mobile-sheet-primary-btn {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent));
    color: #fff;
  }

  .mobile-action-sheet,
  .mobile-drawer {
    border: 1px solid var(--bravia-mobile-border);
    background: color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent);
    box-shadow: 0 20px 40px var(--bravia-mobile-shadow);
    backdrop-filter: blur(20px);
  }

  .mobile-drawer-section,
  .mobile-drawer-model-btn,
  .mobile-drawer-action-btn,
  .mobile-compare-sheet-item,
  .mobile-more-sheet-item,
  .mobile-sheet-secondary-btn {
    border: 1px solid var(--bravia-mobile-border);
    background: var(--bravia-mobile-ghost-bg);
    color: var(--bravia-mobile-text);
  }

  .mobile-drawer-model-btn.is-active,
  .mobile-drawer-action-btn.is-active {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent));
    border-color: transparent;
    color: #fff;
  }
}

@keyframes braviaTechnologyBorderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Mobile system v3: single model state, low-chrome cards, consistent information grid. */
@media (max-width: 1024px) {
  .bravia-page .main-tabs-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .bravia-page .main-tabs-row::-webkit-scrollbar,
  .bravia-page .main-tabs::-webkit-scrollbar {
    display: none;
  }

  .bravia-page .main-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 6px !important;
    padding-inline: 4px !important;
  }

  .bravia-page .main-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 38px !important;
    padding-inline: 15px !important;
    white-space: nowrap !important;
  }

  .bravia-page .mobile-drawer-section--models .mobile-drawer-section-head {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    padding: 0 4px 12px !important;
  }

  .bravia-page .mobile-drawer-section--models .mobile-drawer-section-title {
    grid-column: 2 !important;
    text-align: center !important;
  }

  .bravia-page .mobile-drawer-theme-toggle {
    grid-column: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    color: var(--bravia-mobile-text) !important;
  }

  .bravia-page .mobile-drawer-theme-toggle img {
    width: 16px !important;
    height: 16px !important;
  }

  .bravia-page .mobile-drawer-model-list {
    gap: 8px !important;
  }

  .bravia-page .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer-model-btn:last-child {
    min-height: 64px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-ghost-bg) !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active {
    border-color: color-mix(in srgb, var(--bravia-mobile-primary) 34%, transparent) !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 14%, var(--bravia-mobile-surface)) !important;
  }

  .bravia-page .mobile-nav-overlay {
    opacity: 0 !important;
    transition: opacity 200ms ease !important;
  }

  .bravia-page .mobile-nav-overlay.is-visible {
    opacity: 1 !important;
  }

  .bravia-page .mobile-drawer {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease !important;
  }

  .bravia-page .mobile-design-section .design-mobile-series-switch {
    display: none !important;
  }

  .bravia-page .mobile-spec-card-count,
  .bravia-page .mobile-design-model-meta {
    display: none !important;
  }

  .bravia-page .mobile-model-header {
    justify-items: center !important;
    text-align: center !important;
  }

  .bravia-page .mobile-model-header img {
    margin-inline: auto !important;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.15fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    min-height: 54px !important;
    padding: 13px 12px !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-feature-row > :last-child,
  .bravia-page .mobile-design-spec-label,
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-config-line,
  .bravia-page .audio-power-line {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-feature-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .bravia-page .mobile-feature-icon-dot {
    width: 7px !important;
    height: 7px !important;
    margin-top: 6px !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-primary) !important;
  }

  .bravia-page .mobile-design-image-frame {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mobile-model-accent) 18%, transparent), transparent 56%),
      var(--bravia-mobile-surface-secondary) !important;
  }

  .bravia-page .mobile-design-image {
    opacity: 0.58;
    filter: blur(8px) saturate(0.82);
    transform: scale(1.025);
    transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
  }

  .bravia-page .mobile-design-image.is-full-resolution {
    opacity: 1;
    filter: none;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .bravia-page .mobile-design-image {
      transition: none !important;
    }
  }
}

@media (max-width: 1024px) {
  .bravia-page .app-header-actions {
    display: none !important;
  }

  .bravia-page {
    --mobile-drawer-bg: linear-gradient(180deg, #061521 0%, #0a1b29 56%, #0f2232 100%);
    --mobile-drawer-panel-bg: rgba(8, 24, 36, 0.96);
    --mobile-card-bg: rgba(255, 255, 255, 0.055);
    --mobile-card-border: rgba(125, 211, 252, 0.16);
    --mobile-card-shadow: 0 18px 36px rgba(2, 8, 14, 0.34);
    --mobile-active-bg: linear-gradient(135deg, #18b7df 0%, #0ea5a6 100%);
    --mobile-text: #ecf8ff;
    --mobile-muted: rgba(215, 234, 247, 0.66);
  }

  :is(html.light, html[data-theme="day"]) .bravia-page {
    --mobile-drawer-bg: linear-gradient(180deg, #f6fbff 0%, #edf6fb 48%, #e5f1f8 100%);
    --mobile-drawer-panel-bg: rgba(255, 255, 255, 0.98);
    --mobile-card-bg: rgba(255, 255, 255, 0.82);
    --mobile-card-border: rgba(15, 76, 117, 0.14);
    --mobile-card-shadow: 0 18px 40px rgba(15, 76, 117, 0.10);
    --mobile-text: #102433;
    --mobile-muted: rgba(29, 55, 78, 0.58);
  }

  .bravia-page .mobile-drawer {
    width: min(92vw, 388px) !important;
    padding: calc(var(--mobile-safe-top) + 10px) 0 12px 12px !important;
    background: var(--mobile-drawer-bg) !important;
    border: 1px solid rgba(125, 211, 252, 0.14) !important;
    border-right-color: rgba(125, 211, 252, 0.22) !important;
    border-radius: 0 30px 30px 0;
    box-shadow: 30px 0 72px rgba(0, 0, 0, 0.40) !important;
    overflow: hidden !important;
  }

  .bravia-page .mobile-drawer-header {
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 16px 10px 10px;
    margin-bottom: 6px;
  }

  .bravia-page .mobile-drawer-expand-btn {
    display: none !important;
  }

  .bravia-page .mobile-drawer-close {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(125, 211, 252, 0.14) !important;
    color: var(--mobile-text) !important;
  }

  .bravia-page .mobile-drawer-shell,
  .bravia-page .mobile-drawer-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: calc(100dvh - var(--mobile-safe-top) - 72px);
    padding: 0 16px calc(var(--mobile-safe-bottom) + 12px) 4px;
    overflow: hidden;
  }

  .bravia-page .mobile-drawer-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(125, 211, 252, 0.10);
    background: var(--mobile-drawer-panel-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .bravia-page .mobile-drawer-section--models {
    flex: 1 1 auto;
    min-height: 0;
  }

  .bravia-page .mobile-drawer-section--actions {
    flex: 0 0 auto;
  }

  .bravia-page .mobile-drawer-current {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(24, 183, 223, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.18);
    color: var(--mobile-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .bravia-page .mobile-drawer-section-head {
    justify-content: flex-start !important;
    align-items: center;
  }

  .bravia-page .mobile-drawer-section-kicker {
    color: var(--mobile-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
  }

  .bravia-page .mobile-drawer-section-note,
  .bravia-page .mobile-drawer-selected {
    display: none !important;
  }

  .bravia-page .mobile-drawer-model-list {
    gap: 10px !important;
    padding-right: 4px !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .bravia-page .mobile-drawer-action-grid {
    gap: 10px !important;
  }

  .bravia-page .mobile-model-item,
  .bravia-page .mobile-action-item,
  .bravia-page .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 14px 16px;
    border-radius: 20px !important;
    border: 1px solid var(--mobile-card-border) !important;
    background: var(--mobile-card-bg) !important;
    color: var(--mobile-text) !important;
    box-shadow: var(--mobile-card-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .bravia-page .mobile-drawer-model-btn:active,
  .bravia-page .mobile-drawer-action-btn:active {
    transform: scale(0.985);
  }

  .bravia-page .mobile-drawer-model-btn.is-active,
  .bravia-page .mobile-drawer-action-btn.is-active {
    background: var(--mobile-active-bg) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(10, 165, 166, 0.24);
  }

  .bravia-page .mobile-action-item--theme {
    background: linear-gradient(135deg, rgba(24, 183, 223, 0.16), rgba(14, 165, 166, 0.10)) !important;
    border-color: rgba(125, 211, 252, 0.24) !important;
  }

  .bravia-page .mobile-drawer-model-main,
  .bravia-page .mobile-drawer-action-btn {
    min-width: 0;
  }

  .bravia-page .mobile-drawer-model-main strong,
  .bravia-page .mobile-drawer-action-title {
    color: currentColor;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }

  .bravia-page .mobile-drawer-model-main span,
  .bravia-page .mobile-drawer-action-desc {
    color: var(--mobile-muted) !important;
    font-size: 11px !important;
    line-height: 1.25;
  }

  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-main span,
  .bravia-page .mobile-drawer-action-btn.is-active .mobile-drawer-action-desc {
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .bravia-page .mobile-drawer-model-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: currentColor !important;
    opacity: 0.78;
    flex: 0 0 auto;
  }

  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-chev {
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
  }
}

html {
  scrollbar-gutter: stable;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

:is(html.dark, html[data-theme="night"]) { color-scheme: dark; }

:is(html.light, html[data-theme="day"]) {
  color-scheme: light;
  --page-bg: #f7fafc;
  --app-bg: var(--page-bg);
  --panel-bg: #ffffff;
  --table-bg: #ffffff;
  --header-bg: rgba(248, 251, 253, 0.92);
  --header-cell-bg: linear-gradient(180deg, #fbfdff 0%, #f1f6fa 100%);
  --row-label-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  --text-main: #13202b;
  --text-muted: #5f6f7d;
  --text-soft: #7b8b99;
  --grid-border: rgba(18, 39, 56, 0.08);
  --cell-bg: rgba(255, 255, 255, 0.94);
  --cell-border: rgba(18, 39, 56, 0.08);
  --cell-empty-bg: rgba(247, 250, 252, 0.96);
  --feature-bg: rgba(255, 255, 255, 0.96);
  --feature-border: rgba(91, 145, 181, 0.18);
  --slot-bg: var(--feature-bg);
  --slot-border: var(--feature-border);
  --muted-text-soft: var(--text-soft);
  --button-bg: linear-gradient(180deg, #edf6fb 0%, #dceaf3 100%);
  --sidebar-text: #1d2c38;
  --sidebar-icon: #406073;
  --corner-logo-color: rgba(19,32,43,0.78);
  --tech-logo-color: #0f172a;
  --pg-title-color: rgba(15, 23, 42, 0.94);
  --pocket-guide-title-color: #f8fafc;
  --pocket-guide-title-shadow: 0 1px 2px rgba(0,0,0,.55);
  --pg-logo-color: rgba(15, 23, 42, 0.94);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--app-font);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.10), transparent 30%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 28%),
    linear-gradient(180deg, #061017 0%, #041019 100%);
  color: var(--text-main);
}

:is(html.light, html[data-theme="day"]) body {
  background:
    radial-gradient(circle at top left, rgba(148, 196, 220, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(207, 227, 238, 0.20), transparent 24%),
    linear-gradient(180deg, #fbfdfe 0%, #f3f7fa 100%);
}

.app-shell { height: 100vh; display: flex; flex-direction: column; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(14, 29, 41, 0.92), rgba(9, 18, 27, 0.82));
  border-bottom: 1px solid rgba(125, 211, 252, 0.14);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pg-title-color);
  text-shadow: none;
  white-space: nowrap;
}

.pocket-guide-title {
  color: var(--pocket-guide-title-color);
  text-shadow: var(--pocket-guide-title-shadow);
  transition: color 180ms ease, text-shadow 180ms ease;
}

.brand-block {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 10px;
}

.header-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.app-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 36px;
  margin-left: auto;
  position: relative;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.header-control-group {
  --header-control-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.bravia-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.app-header-actions .bravia-action-button {
  --header-control-bg: rgba(255, 255, 255, 0.04);
  width: var(--header-control-size) !important;
  height: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px !important;
  border: 0 !important;
  background: var(--header-control-bg) !important;
  color: #eaf6ff !important;
  box-shadow: none !important;
  outline: none;
  appearance: none;
  cursor: pointer;
  line-height: 1 !important;
  vertical-align: middle;
  opacity: 1;
  position: relative;
  z-index: 1;
  transform: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease,
    transform 120ms ease;
}

.app-header-actions .bravia-action-button .toolbar-icon-mask,
.app-header-actions .bravia-action-button .toolbar-icon-img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  display: block;
  flex-shrink: 0;
}

.app-header-actions .bravia-action-button svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.app-header-actions .bravia-action-button:hover {
  --header-control-bg: rgba(125, 211, 252, 0.12);
  color: #ffffff !important;
  box-shadow: none !important;
}

.app-header-actions .bravia-action-button:active {
  transform: translateY(1px);
}

.app-header-actions .bravia-action-button:focus-visible {
  border-color: rgba(125, 211, 252, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.16) !important;
}

.app-header-actions .bravia-action-button:disabled,
.app-header-actions .bravia-action-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

:is(html.light, html[data-theme="day"]) .app-header-actions .bravia-action-button {
  --header-control-bg: rgba(15, 118, 160, 0.08);
  color: #0f172a !important;
}

:is(html.light, html[data-theme="day"]) .app-header-actions .bravia-action-button:hover {
  --header-control-bg: rgba(15, 118, 160, 0.14);
}

.header-icon-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px !important;
  background: rgba(255,255,255,0.04);
  color: #eaf6ff;
  line-height: 1 !important;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.header-icon-btn:hover {
  transform: translateY(-1px);
  background: rgba(21,209,232,0.16);
  border-color: rgba(21,209,232,0.58);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important;
}

.header-icon-btn::before,
.header-icon-btn::after {
  display: none !important;
  content: none !important;
}

.header-icon-btn .toolbar-icon-mask,
.header-icon-btn .toolbar-icon-img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  display: block;
  flex: 0 0 auto;
  color: currentColor;
}

.header-action-label,
.header-icon-btn .button-text,
.header-icon-btn .sr-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.header-icon-btn span.icon,
.header-icon-btn .icon,
.header-icon-btn .material-icons,
.header-icon-btn .lucide {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.main-tabs { display: inline-flex; align-items: center; gap: 6px; }

.main-tab {
  min-height: var(--control-height);
  padding: 0 var(--toolbar-tab-padding-x);
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background:
    linear-gradient(180deg, rgba(22, 44, 61, 0.92), rgba(11, 24, 36, 0.92));
  color: #ffffff;
  font-size: var(--toolbar-font-size);
  font-weight: var(--toolbar-font-weight);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.main-tab.active {
  background: linear-gradient(135deg, #1d9bf0, #00d4aa);
  border-color: rgba(125, 211, 252, 0.72);
  box-shadow: 0 12px 24px rgba(0, 212, 170, 0.18);
}

.theme-icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.10);
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}



.mobile-menu-btn {
  display: none !important;
}


.toolbar-icon {
  font-size: var(--control-icon);
  line-height: 1;
  width: var(--control-icon);
  height: var(--control-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toolbar-icon-img {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  flex: 0 0 auto;
}

.toolbar-icon-mask {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  mask: var(--icon-url) center / contain no-repeat;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
}

:is(html.dark, html[data-theme="night"]) .toolbar-icon-img[src$=".svg"] {
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}

:is(html.light, html[data-theme="day"]) .toolbar-icon-img[src$=".svg"] {
  filter: brightness(0) saturate(100%) drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
}

.toolbar-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-actions.controls,
.main-tabs {
  flex-wrap: wrap;
}
.toolbar-actions.controls {
  row-gap: 6px;
}
.toolbar-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.18); margin: 0 4px; }

.btn, .filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-height);
  padding: 0 11px;
  border-radius: var(--control-radius);
  font-size: var(--control-font);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.btn-icon { width: var(--control-icon); height: var(--control-icon); object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.btn-icon.mdi {
  width: auto;
  height: auto;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:is(html.dark, html[data-theme="night"]) .btn-icon[src$=".svg"] { filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
:is(html.light, html[data-theme="day"]) .btn-icon[src$=".svg"] { filter: brightness(0) saturate(100%) drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.toolbar-actions .btn { background: linear-gradient(180deg, #4f3658 0%, #2f2039 100%); border: 1px solid rgba(231, 191, 255, 0.4); color: #ffffff; }
.toolbar-actions .btn:hover { background: linear-gradient(180deg, #5f416b 0%, #382744 100%); }
.toolbar-actions .btn span:last-child {
  display: inline-block;
  white-space: nowrap;
}
.toolbar-filters .filter-btn { background: linear-gradient(180deg, #27485f 0%, #18344a 100%); border: 1px solid rgba(140, 198, 235, 0.35); color: #e7f4ff; }
.toolbar-filters .filter-btn:hover { background: linear-gradient(180deg, #2e5772 0%, #1f405a 100%); }
.toolbar-filters .filter-btn.active { background: linear-gradient(180deg, #1f8ec1 0%, #20567a 100%); border-color: rgba(180, 230, 255, 0.75); color: #ffffff; }

.desktop-toolbar-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(125, 211, 252, 0.08);
}

.control-separator {
  width: 1px;
  height: 24px;
  background: rgba(180, 220, 255, 0.25);
  margin: 0 4px;
  flex: 0 0 auto;
  font-size: 0;
}

.control-button {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.control-button--content {
  color: #dff5ff;
  background: linear-gradient(180deg, rgba(10, 42, 62, 0.86), rgba(7, 28, 42, 0.92));
  border-color: rgba(64, 150, 200, 0.45);
}

.control-button--content.active,
.control-button--content.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #138fd4, #06d6b5);
  border-color: rgba(92, 225, 255, 0.85);
  box-shadow: 0 8px 22px rgba(0, 212, 170, 0.18);
}

.control-button--action {
  color: #f0e5ff;
  background: rgba(54, 30, 70, 0.82);
  border-color: rgba(170, 110, 210, 0.5);
}

.control-button--answer {
  color: #ffeaff;
  background: rgba(58, 28, 62, 0.82);
  border-color: rgba(210, 120, 200, 0.5);
}

.control-button--utility {
  color: #e5f4ff;
  background: rgba(33, 48, 64, 0.82);
  border-color: rgba(120, 170, 210, 0.5);
}

.control-button--utility.active,
.control-button--utility.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #1677ff, #00bcd4);
  border-color: rgba(140, 220, 255, 0.85);
  box-shadow: 0 8px 22px rgba(0, 188, 212, 0.18);
}

.save-status { margin: 2px 8px 6px; font-size: 11px; color: var(--text-muted); }
.save-status:empty { display: none; }
.save-status.is-faded { opacity: 0; transition: opacity 240ms ease; }

.main-layout {
  flex: 1;
  min-height: 0;
  display: block;
  overflow: hidden;
  padding: 10px;
}

.feature-bank-panel { display: none !important; }

.table-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--grid-border);
  border-radius: 10px;
  padding: 8px;
}

.hint-box { margin: 0; color: #9fd8ff; font-size: 12px; min-height: 0; }
.hint-box:empty { display: none; }
.table-scroll { width: 100%; height: 100%; min-height: 0; max-width: 100%; min-width: 0; overflow-x: hidden; overflow-y: auto; }

.lineup-table, #lineupTable {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  overflow: visible;
  background: var(--table-bg);
}

#lineupTable th, #lineupTable td {
  border: 1px solid var(--cell-border, var(--grid-border));
  padding: 7px;
  vertical-align: top;
}

#lineupTable tbody tr:hover .feature-cell,
#lineupTable tbody tr:hover .row-label-cell {
  background-color: rgba(120, 180, 220, 0.06);
}

.model-header-row { background: #223241; overflow: visible; }

.model-header-cell {
  background: var(--header-cell-bg) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  width: calc((100% - var(--row-label-width)) / 7);
  padding: 6px 8px 8px !important;
  position: relative;
  overflow: visible;
  text-align: center;
  vertical-align: middle;
}

.model-header-content {
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-rows: 82px 18px 16px;
  align-items: center;
  justify-items: center;
  text-align: center;
  position: relative;
}

.tv-image-frame {
  width: 100%;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 3;
  margin: 0 auto 2px auto;
  padding-top: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.tv-image-frame img, .tv-placeholder-img {
  display: block;
  width: auto;
  height: 68px;
  max-height: 68px;
  max-width: 92%;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
  background: transparent;
}

.placeholder-label { position: absolute; color: #8ca0b2; font-size: 11px; }
.tv-image-frame:not(.no-image) .placeholder-label { display: none; }

.model-header-cell.panel-rgb .tv-image-frame::before,
.model-header-cell.panel-oled .tv-image-frame::before,
.model-header-cell.panel-mini-led .tv-image-frame::before,
.model-header-cell.panel-led .tv-image-frame::before {
  content: "";
  position: absolute;
  width: 76%;
  height: 70%;
  border-radius: 18px;
  filter: blur(14px);
  opacity: 0.72;
  z-index: -1;
  pointer-events: none;
}

.model-header-cell.panel-rgb .tv-image-frame::before {
  background: radial-gradient(circle at 20% 50%, rgba(255, 40, 60, 0.36), transparent 48%), radial-gradient(circle at 50% 45%, rgba(40, 140, 255, 0.30), transparent 52%), radial-gradient(circle at 78% 50%, rgba(20, 255, 150, 0.28), transparent 50%);
  animation: rgbSoftGlow 4s ease-in-out infinite;
}
.model-header-cell.panel-oled .tv-image-frame::before { background: radial-gradient(circle at 35% 50%, rgba(124, 58, 237, 0.28), transparent 55%), radial-gradient(circle at 70% 50%, rgba(37, 99, 235, 0.22), transparent 58%); }
.model-header-cell.panel-mini-led .tv-image-frame::before { background: radial-gradient(circle at 40% 50%, rgba(245, 158, 11, 0.30), transparent 55%), radial-gradient(circle at 70% 50%, rgba(249, 115, 22, 0.18), transparent 58%); }
.model-header-cell.panel-led .tv-image-frame::before { background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.18), transparent 58%); opacity: 0.52; }

.panel-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 5;
  padding: 3px 8px;
  min-width: 58px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.25px;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.48);
  box-shadow: 0 0 12px rgba(0,0,0,0.28);
  pointer-events: none;
}

.panel-badge--rgb {
  background: linear-gradient(90deg, #ff2d55 0%, #22c55e 50%, #2563eb 100%);
  box-shadow:
    0 0 12px rgba(255, 45, 85, 0.28),
    0 0 16px rgba(34, 197, 94, 0.22),
    0 0 18px rgba(37, 99, 235, 0.22);
}
.panel-badge--oled { background: linear-gradient(90deg, #7c3aed, #2563eb); box-shadow: 0 0 14px rgba(124,58,237,0.42); }
.panel-badge--mini-led { background: linear-gradient(90deg, #f59e0b, #f97316); box-shadow: 0 0 14px rgba(245,158,11,0.45); }
.panel-badge--led { background: linear-gradient(90deg, #475569, #0ea5e9); box-shadow: 0 0 10px rgba(14,165,233,0.26); }

@keyframes rgbSoftGlow { 0%, 100% { opacity: 0.72; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.04); } }

.tv-model-name {
  margin-top: 0;
  min-height: 16px;
  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tv-model-sizes {
  margin-top: 1px;
  min-height: 13px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.row-label-cell {
  width: var(--row-label-width);
  min-width: var(--row-label-width);
  max-width: var(--row-label-width);
  padding: 0 6px !important;
  background: var(--row-label-bg);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle !important;
  border: 1px solid var(--grid-border) !important;
}

.row-label-inner {
  width: 100%;
  min-height: 38px;
  height: 100%;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: left;
}

.row-label-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--sidebar-icon);
  opacity: 0.95;
}
.row-label-icon-mask {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: var(--icon-url) center / contain no-repeat;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
}

.row-label-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--sidebar-text);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-align: left;
}

.row-label-text-sub {
  color: var(--text-soft);
  font-size: 0.86em;
  font-weight: 500;
  line-height: 1.15;
}

.mobile-feature-label-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-feature-label-text-sub {
  color: var(--text-soft);
  font-size: 0.86em;
  font-weight: 500;
  line-height: 1.15;
}

.mobile-feature-label-text[data-label-id="airplay-google-cast"] .mobile-feature-label-text-main {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.row-label-cell.no-icon .row-label-inner { grid-template-columns: 1fr; text-align: center; }
.row-label-cell.no-icon .row-label-text { text-align: center; }

.corner-logo-wrap {
  width: 100%;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
}

.bravia-corner-logo {
  display: inline-block;
  width: min(92px, 88%);
  height: 72px;
  background: url("assets/logo/pocketguide.png") center / contain no-repeat;
  opacity: 0.95;
}

.feature-cell { width: calc((100% - var(--row-label-width)) / 7); padding: 4px 5px; vertical-align: middle !important; background: var(--cell-bg); }
.no-feature-cell { background: var(--cell-empty-bg); pointer-events: none; }
.no-feature-mark { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; color: var(--muted-text-soft); font-size: 16px; font-weight: 500; line-height: 1; user-select: none; }
.no-feature-cell:hover { background: var(--cell-empty-bg); }
.feature-cell-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.slot-stack { width: 100%; display: grid; grid-auto-rows: var(--slot-height); gap: 4px; min-width: 0; }
.slot-stack.multi-slot .drop-slot, .slot-stack.multi-slot .slot { height: 34px; min-height: 34px; max-height: 34px; }
.slot-stack.multi-slot .selected-icon, .slot-stack.multi-slot .slot-icon { max-height: 30px; }

.drop-slot, .slot {
  width: 100%;
  height: var(--slot-height);
  min-height: var(--slot-height);
  max-height: var(--slot-height);
  border: 1px solid var(--slot-border);
  border-radius: 7px;
  background: var(--slot-bg);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  padding: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.drop-slot.has-icon { border-color: transparent; background: transparent; }
.slot-stack > .drop-slot:not(.has-icon):not(.boolean-slot),
.slot-stack > .slot:not(.has-icon):not(.boolean-slot) {
  min-height: 42px;
  height: auto;
  max-height: none;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 8px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.slot:hover { border-color: #5f839f; }
.slot.active { box-shadow: 0 0 0 1px rgba(57,181,255,0.45); }
.slot-stack > .drop-slot:not(.has-icon):not(.boolean-slot).active,
.slot-stack > .slot:not(.has-icon):not(.boolean-slot).active {
  box-shadow: none;
}
.slot.correct { border: 1px solid #18b368; }
.slot.wrong { border: 1px solid #d44f4f; }
.slot.missing { border: 1px solid #d2a741; }
.slot-placeholder { color: #8ca0b2; font-size: 10px; }

.slot-icon, .selected-icon {
  display: block;
  max-width: 94%;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
  pointer-events: none;
}

.selected-tech-logo {
  width: 154px;
  max-width: 96%;
  height: 38px;
  max-height: 38px;
  object-fit: contain;
}

.feature-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.feature-icon {
  max-width: 88px;
  max-height: 44px;
  object-fit: contain;
  display: block;
}

.feature-text-fallback {
  display: none;
  font-size: 12px;
  line-height: 1.1;
  color: var(--text-main);
  font-weight: 700;
  text-align: center;
  white-space: normal;
}

.feature-visual.icon-missing .feature-text-fallback {
  display: inline-block;
}

.feature-visual.icon-missing .feature-icon {
  display: none;
}

.feature-visual-slot .feature-text-fallback {
  max-width: 100%;
}

.picker-feature-visual {
  width: 48px;
  height: 32px;
}

.picker-feature-icon {
  max-width: 72px;
  max-height: 42px;
}

.picker-feature-visual .feature-text-fallback {
  font-size: 10px;
  color: rgba(255,255,255,0.85);
}

.feature-picker-thumb {
  width: 54px;
  min-width: 54px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-picker-icon {
  max-width: 80px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.tech-logo-icon {
  width: auto;
  height: auto;
  object-fit: contain;
}

.tech-logo-mask {
  display: block;
  flex: 0 0 auto;
  background-color: var(--tech-logo-color);
  mask: var(--tech-logo-url) center / contain no-repeat;
  -webkit-mask: var(--tech-logo-url) center / contain no-repeat;
}

.tech-logo-icon--picker {
  max-width: 165px !important;
  max-height: 58px !important;
}

.tech-logo-icon--slot {
  max-width: 200px !important;
  max-height: 70px !important;
}

/* Invert technology logos so they stand out against current day/night backgrounds */
.tech-logo-icon,
.tech-logo-img {
  filter: none !important;
}

.feature-picker-thumb--txt {
  color: var(--text-main);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.tech-logo-cell {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tech-logo-mask--cell {
  width: min(190px, 92%);
  height: 34px;
  max-width: 92% !important;
  max-height: none !important;
}

.tech-logo-mask--picker {
  width: 72px;
  height: 34px;
  max-width: 100%;
  max-height: none !important;
}

.tech-logo-mask--slot {
  width: min(160px, 96%) !important;
  height: 40px !important;
  max-width: 96% !important;
  max-height: none !important;
}

.tech-logo-img {
  display: block;
  max-height: 38px;
  max-width: 190px;
  object-fit: contain;
  filter: none !important;
  transition: filter .2s ease;
}

/* Day mode: black logo */
:is(html.light, html[data-theme="day"]) .tech-logo-icon,
:is(html.light, html[data-theme="day"]) .tech-logo-img {
  filter: brightness(0) saturate(100%) !important;
}

/* Night mode: white logo */
:is(html.dark, html[data-theme="night"]) .tech-logo-icon,
:is(html.dark, html[data-theme="night"]) .tech-logo-img {
  filter: brightness(0) invert(1) !important;
}


.tech-text {
  font-weight: 700;
  color: var(--text-main);
  font-size: 12px;
  text-align: center;
}

.bravia-comparison-table tbody td .bravia-spec-text {
  display: inline;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.bravia-comparison-table tbody td .bravia-spec-text-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.bravia-comparison-table tbody td .bravia-spec-text-stack span {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bravia-comparison-table tbody td .bravia-spec-empty {
  color: inherit;
  opacity: 0.75;
}

.bravia-comparison-table tbody td .chip,
.bravia-comparison-table tbody td .pill,
.bravia-comparison-table tbody td .badge,
.bravia-comparison-table tbody td .button,
.bravia-comparison-table tbody td [class*="chip"],
.bravia-comparison-table tbody td [class*="pill"],
.bravia-comparison-table tbody td [class*="badge"] {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: inherit !important;
  font: inherit !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.slot-stack > .drop-slot:not(.has-icon):not(.boolean-slot) .tech-text,
.slot-stack > .slot:not(.has-icon):not(.boolean-slot) .tech-text,
.slot-stack > .drop-slot:not(.has-icon):not(.boolean-slot) .bravia-spec-text,
.slot-stack > .slot:not(.has-icon):not(.boolean-slot) .bravia-spec-text {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.tech-empty {
  color: rgba(148, 163, 184, 0.9);
}

.slot-stack > .drop-slot:not(.has-icon):not(.boolean-slot) .no-feature-mark,
.slot-stack > .slot:not(.has-icon):not(.boolean-slot) .no-feature-mark {
  min-height: 0;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 700;
}

:is(html.dark, html[data-theme="night"]) .slot-icon[src$=".svg"],
:is(html.dark, html[data-theme="night"]) .feature-picker-item img[src$=".svg"] {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}

:is(html.light, html[data-theme="day"]) .slot-icon[src$=".svg"],
:is(html.light, html[data-theme="day"]) .feature-picker-item img[src$=".svg"] {
  filter: brightness(0) saturate(100%) drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}

.slot-fallback { font-size: 11px; line-height: 1.15; color: var(--text-main); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }

.audio-speaker-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 76px;
  padding: 8px 6px;
  text-align: center;
}

.audio-speaker-main {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.audio-speaker-main-slot {
  width: 100%;
  min-height: 34px;
  height: 34px;
  max-height: 34px;
}

.audio-speaker-config {
  display: block;
  max-width: 220px;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.audio-speaker-config-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--text-muted);
  font-weight: 600;
}

.audio-speaker-config-line {
  text-align: center;
  white-space: normal;
}

.audio-speaker-config-slot {
  min-height: 26px;
  height: 26px;
  max-height: 26px;
  padding: 2px 8px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.audio-speaker-empty {
  color: var(--text-soft);
  font-weight: 700;
  text-align: center;
}

.audio-format-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 10px;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.audio-format-slot {
  min-height: 28px;
  height: 28px;
  max-height: 28px;
  padding: 3px 10px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 12px;
}

.audio-format-sep {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
}

.audio-format-empty {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 700;
}

.audio-power-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 6px;
  text-align: center;
}

.audio-power-main {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
}

.audio-power-note {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 600;
}

.audio-power-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.audio-power-line {
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
}

.audio-power-empty {
  color: rgba(220, 235, 255, 0.45);
  font-weight: 700;
  text-align: center;
}

.audio-footer-strip {
  width: 100%;
  min-width: 1280px;
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 0;
  overflow: visible;
}

.audio-footer-strip-grid {
  display: grid;
  grid-template-columns: 230px repeat(8, minmax(0, 1fr));
  align-items: end;
  min-height: 230px;
  overflow: visible;
}

.audio-footer-strip-label,
.audio-footer-strip-cell {
  min-height: 230px;
}

.audio-footer-strip-cell {
  background: transparent;
}

.audio-footer-strip-cell--target {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  overflow: visible;
}

.series-value-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 6px 8px;
  text-align: center;
}

.series-value-main {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main, #ffffff);
  line-height: 1.25;
}

.series-value-line {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
  white-space: nowrap;
}

.series-value-empty {
  color: var(--text-soft);
  font-weight: 700;
  text-align: center;
}

.feature-boolean-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  text-align: center;
}

.boolean-slot {
  min-height: 32px;
  height: 32px;
  max-height: 32px;
  min-width: 32px;
  width: 32px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.feature-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--text-main);
  background: transparent;
  box-shadow: none;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.feature-no {
  color: var(--text-soft);
  font-size: 16px;
  font-weight: 700;
}

.feature-picker-popover {
  position: fixed;
  z-index: 9999;
  width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: none;
  overflow: visible;
  background: var(--panel-bg);
  border: 1px solid var(--grid-border);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
  padding: 8px;
}

.feature-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.feature-picker-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-picker-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

.picker-clear-btn, .picker-add-btn, .feature-picker-close {
  min-height: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
}

.picker-clear-btn { border: 1px solid rgba(120, 190, 255, 0.34); background: linear-gradient(180deg, #17415f 0%, #0c2c44 100%); color: #ffffff; }
.picker-add-btn { border: 1px solid rgba(120, 230, 180, 0.42); background: linear-gradient(180deg, #1d7b5d 0%, #10523f 100%); color: #ffffff; }
.picker-add-btn:hover { background: linear-gradient(180deg, #24906f 0%, #145244 100%); }
.picker-add-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.feature-picker-close { width: 26px; padding: 0; font-size: 16px; border: 1px solid rgba(120, 190, 255, 0.34); background: rgba(30, 70, 100, 0.85); color: #ffffff; }
.picker-note { font-size: 11px; color: #f4ce7a; margin-bottom: 6px; }

.feature-picker-search {
  width: 100%;
  margin: 6px 0;
  padding: 6px;
  background: var(--table-bg);
  color: var(--text-main);
  border: 1px solid var(--grid-border);
  border-radius: 8px;
  font-size: 12px;
}

.feature-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-picker-item {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}

.feature-picker-item:hover { background: rgba(80,160,220,0.16); border-color: rgba(120,190,255,0.35); }
.feature-picker-item img { max-width: 48px; max-height: 32px; object-fit: contain; }
.picker-media { max-width: 48px; max-height: 32px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 1.1; }
.feature-picker-item-name { font-size: 12px; line-height: 1.15; }
.feature-picker-item.is-disabled { opacity: 0.56; cursor: not-allowed; }
.picker-used { display: inline-block; margin-left: 6px; font-size: 10px; color: rgba(255, 214, 136, 0.92); }

.empty-tab-state {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.86);
}

.empty-tab-state h2 { margin: 0 0 8px; font-size: 22px; }
.empty-tab-state p { margin: 0; color: rgba(255,255,255,0.7); }

.design-series-compact-note {
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 26, 38, 0.9), rgba(7, 17, 26, 0.9));
  border: 1px solid rgba(125, 211, 252, 0.14);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
}


:is(html.light, html[data-theme="day"]) .theme-icon-btn { background: linear-gradient(180deg, #fff6cc 0%, #f6dfa0 100%); color: #102030; border-color: rgba(170, 130, 60, 0.45); }
:is(html.light, html[data-theme="day"]) .app-header-actions .bravia-action-button.theme-icon-btn { --header-control-bg: rgba(15, 118, 160, 0.08); color: #0f172a !important; }

:is(html.light, html[data-theme="day"]) .row-label-icon { color: var(--sidebar-icon); opacity: 0.9; }
:is(html.light, html[data-theme="day"]) .row-label-text { color: var(--sidebar-text); }
:is(html.light, html[data-theme="day"]) .tv-model-name,
:is(html.light, html[data-theme="day"]) .tv-model-sizes { color: #102030; text-shadow: none; }
:is(html.light, html[data-theme="day"]) .no-feature-mark { color: var(--muted-text-soft); }
:is(html.light, html[data-theme="day"]) .fallback-text,
:is(html.light, html[data-theme="day"]) .text-feature,
:is(html.light, html[data-theme="day"]) .slot-fallback { color: #102030; }
:is(html.light, html[data-theme="day"]) .feature-text-fallback { color: #102030; }
:is(html.light, html[data-theme="day"]) .empty-tab-state,
:is(html.light, html[data-theme="day"]) .empty-tab-state p { color: #102030; }
:is(html.light, html[data-theme="day"]) .feature-cell,
:is(html.light, html[data-theme="day"]) .b2ii-cell {
  color: var(--text-main);
  white-space: normal;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.92);
}
:is(html.light, html[data-theme="day"]) .drop-slot,
:is(html.light, html[data-theme="day"]) .slot {
  background: var(--feature-bg);
  border-color: var(--feature-border);
  color: var(--text-main);
}

.table-scroll,
.spec-table-shell,
.spec-table-scroller {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

:is(html.dark, html[data-theme="night"]) .table-scroll,
:is(html.dark, html[data-theme="night"]) .spec-table-shell,
:is(html.dark, html[data-theme="night"]) .spec-table-scroller {
  scrollbar-color: rgba(148, 163, 184, 0.55) rgba(15, 23, 42, 0.35);
}

:is(html.light, html[data-theme="day"]) .table-scroll,
:is(html.light, html[data-theme="day"]) .spec-table-shell,
:is(html.light, html[data-theme="day"]) .spec-table-scroller {
  scrollbar-color: rgba(100, 116, 139, 0.45) rgba(226, 232, 240, 0.75);
}

.table-scroll::-webkit-scrollbar,
.spec-table-shell::-webkit-scrollbar,
.spec-table-scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:is(html.dark, html[data-theme="night"]) .table-scroll::-webkit-scrollbar-thumb,
:is(html.dark, html[data-theme="night"]) .spec-table-shell::-webkit-scrollbar-thumb,
:is(html.dark, html[data-theme="night"]) .spec-table-scroller::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

:is(html.dark, html[data-theme="night"]) .table-scroll::-webkit-scrollbar-track,
:is(html.dark, html[data-theme="night"]) .spec-table-shell::-webkit-scrollbar-track,
:is(html.dark, html[data-theme="night"]) .spec-table-scroller::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
}

:is(html.light, html[data-theme="day"]) .table-scroll::-webkit-scrollbar-thumb,
:is(html.light, html[data-theme="day"]) .spec-table-shell::-webkit-scrollbar-thumb,
:is(html.light, html[data-theme="day"]) .spec-table-scroller::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.45);
  border-radius: 999px;
}

:is(html.light, html[data-theme="day"]) .table-scroll::-webkit-scrollbar-track,
:is(html.light, html[data-theme="day"]) .spec-table-shell::-webkit-scrollbar-track,
:is(html.light, html[data-theme="day"]) .spec-table-scroller::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.75);
}

@media (max-width: 1024px) {
  :root { --row-label-width: 112px; }
  .brand-title { font-size: 13px; }
  .main-tab { padding: 0 var(--toolbar-tab-padding-x-mobile); }
}

@media (max-width: 900px) {
  .header-right { gap: 6px; }
  .app-header-actions,
  .bravia-actions {
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .feature-picker-header { flex-wrap: wrap; }
  .feature-picker-actions { margin-left: auto; }
  .audio-power-line { white-space: normal; }
  .series-value-line { white-space: normal; }
}

/* Holy Grail App Shell */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body { overflow: hidden; }

.app-shell {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  min-height: 44px;
}

.app-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 12px 10px;
  margin: 10px 12px 0;
  background:
    linear-gradient(180deg, rgba(9, 18, 27, 0.78), rgba(8, 16, 24, 0.66));
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 24px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.app-toolbar::-webkit-scrollbar { display: none; }

.tool-tab-box {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.tool-tab-box .tool-tab-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.tool-tab-box .tool-tab-content {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tool-tab-box .tool-tab-content::-webkit-scrollbar {
  display: none;
}

.tool-tab-box .tool-tab {
  --tab-bg: #1f6feb;
  --tab-bg-active: #15d1e8;
  --tab-text: #ffffff;
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  margin-right: 0;
  border: 1px solid rgba(125, 211, 252, 0.2);
  outline: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--tab-text);
  font-family: inherit;
  font-size: var(--toolbar-font-size);
  font-weight: var(--toolbar-font-weight);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.tool-tab-box .tool-tab:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: none;
}

.tool-tab-box .tool-tab.active,
.tool-tab-box .tool-tab.is-active,
.tool-tab-box .tool-tab[aria-selected="true"] {
  height: 48px;
  min-height: 48px;
  line-height: 1;
  transform: translateY(0);
  color: #ffffff;
  z-index: 2;
  background: linear-gradient(135deg, rgba(29,155,240,0.95), rgba(0,212,170,0.82));
  border-color: rgba(125, 211, 252, 0.65);
  box-shadow: none;
}

.tool-tab-box .desktop-toolbar-separator.control-separator {
  width: 1px;
  min-width: 1px;
  height: 30px;
  margin: 0 14px 7px 10px;
  color: transparent;
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
}

.tool-tab-box .tool-tab--image { --tab-bg: #0891b2; --tab-bg-active: #15d1e8; }
.tool-tab-box .tool-tab--audio { --tab-bg: #2563eb; --tab-bg-active: #4893d2; }
.tool-tab-box .tool-tab--uxui { --tab-bg: #7c3aed; --tab-bg-active: #8b5cf6; }
.tool-tab-box .tool-tab--design { --tab-bg: #a21caf; --tab-bg-active: #c026d3; }
.tool-tab-box .tool-tab--all { --tab-bg: #0f766e; --tab-bg-active: #14b8a6; }
.tool-tab-box .tool-tab--motion { --tab-bg: #ea580c; --tab-bg-active: #f97316; }
.tool-tab-box .tool-tab--hdr { --tab-bg: #be123c; --tab-bg-active: #f43f5e; }
.tool-tab-box .tool-tab--view { --tab-bg: #15803d; --tab-bg-active: #22c55e; }

.model-tabs,
.product-tabs,
.series-tabs,
.mobile-model-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 24px;
  margin: 0;
  scrollbar-width: none;
}

.model-tabs::-webkit-scrollbar,
.product-tabs::-webkit-scrollbar,
.series-tabs::-webkit-scrollbar,
.mobile-model-filters::-webkit-scrollbar {
  display: none;
}

.model-tab,
.product-tab,
.series-tab {
  flex: 0 0 132px;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  height: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  margin: 0;
  border: 1px solid rgba(72,147,210,0.55);
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.model-tab:hover,
.product-tab:hover,
.series-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(21,209,232,0.75);
  background: rgba(21,209,232,0.12);
}

.model-tab.active,
.product-tab.active,
.series-tab.active,
.model-tab[aria-selected="true"],
.product-tab[aria-selected="true"],
.series-tab[aria-selected="true"] {
  background: linear-gradient(135deg, #15d1e8, #14b8a6);
  border-color: rgba(21,209,232,0.95);
  box-shadow: 0 0 18px rgba(21,209,232,0.28);
}

.tool-tab--fullscreen,
.tool-tab--export,
.tab-fullscreen,
.tab-export {
  background: unset;
}

.tool-tab-box .toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
}

.tool-tab-box .toolbar-icon-btn,
.tool-tab-box .toolbar-action-btn,
button.toolbar-icon-btn,
button.toolbar-action-btn {
  flex: 0 0 auto;
  width: var(--toolbar-icon-btn-size);
  height: var(--toolbar-icon-btn-size);
  min-width: var(--toolbar-icon-btn-size);
  min-height: var(--toolbar-icon-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 4px 7px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--toolbar-icon-btn-radius) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #eaf6ff;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1 !important;
  white-space: nowrap;
  transform: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tool-tab-box .toolbar-icon-btn:hover,
.tool-tab-box .toolbar-action-btn:hover {
  transform: translateY(-1px);
  background: rgba(21,209,232,0.16) !important;
  border-color: rgba(21,209,232,0.58);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important;
}

.tool-tab-box .toolbar-icon-btn::before,
.tool-tab-box .toolbar-icon-btn::after,
.tool-tab-box .toolbar-action-btn::before,
.tool-tab-box .toolbar-action-btn::after {
  display: none !important;
  content: none !important;
}

.tool-tab-box .toolbar-icon-btn .toolbar-icon-mask,
.tool-tab-box .toolbar-action-btn .toolbar-icon-mask {
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
  flex: 0 0 auto;
}

.toolbar-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.toolbar-cluster-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  display: none;
}

.app-main {
  min-height: 0;
  overflow: hidden;
  padding: 6px;
}

.matrix-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.table-panel {
  padding: 0;
  border: none;
  border-radius: 0;
}

.toolbar-row { width: 100%; }
.save-status { margin: 0 0 0 auto; }
.desktop-toolbar-separator { display: none; }

.table-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Sticky Table */
.lineup-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.model-header-cell {
  position: sticky;
  top: 0;
  z-index: 20;
}

.row-label-cell {
  position: sticky;
  left: 0;
  z-index: 15;
}

.corner-cell {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 30;
}

/* Skeleton */
.skeleton-shell {
  display: none;
  height: 100%;
  padding: 12px;
  gap: 8px;
}

.app-shell.is-loading .skeleton-shell { display: grid; grid-template-rows: 22px 18px 1fr; }
.app-shell.is-loading .table-scroll,
.app-shell.is-loading .mobile-card-view,
.app-shell.is-loading #hintBox { display: none; }

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.06)
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s linear infinite;
  border-radius: 8px;
}

.skeleton-header { width: 56%; }
.skeleton-toolbar { width: 80%; }
.skeleton-matrix { width: 100%; border-radius: 12px; }

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

:is(html.light, html[data-theme="day"]) .skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.05)
  );
  background-size: 200% 100%;
}

/* Mobile Card View */
.mobile-card-view { display: none; }
/* LEGACY MOBILE RULE - DISABLED BY RUNTIME MOBILE SOURCE OF TRUTH */
.mobile-model-filter-row,
.mobile-model-filters { display: none; }
.mobile-drawer { display: none; }
.mobile-model-filter-row[hidden],
.mobile-model-filters[hidden],
.mobile-drawer[hidden] { display: none !important; }
.mobile-search-row,
.mobile-bottom-nav,
.mobile-compare-fab,
.mobile-sheet-backdrop,
.mobile-action-sheet {
  display: none;
}
.model-chip { min-height: 30px; }

.b2ii-page {
  display: grid;
  gap: 10px;
  padding: 10px;
  min-height: 100%;
  background: transparent;
}

.design-series-panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.design-series-panel::before {
  content: none;
}

.design-series-panel > * {
  position: relative;
  z-index: 1;
}

.design-series-content {
  width: 100%;
  min-height: 0;
  display: grid;
  gap: 8px;
}

.b2ii-series-switch {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 4px 6px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  background: transparent;
}

.b2ii-series-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 132px;
  min-width: 132px;
  height: 46px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(140, 198, 235, 0.22);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #dceeff;
  background: rgba(16, 39, 56, 0.42);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.b2ii-series-btn.active {
  background: linear-gradient(135deg, #1d9bf0, #00d4aa);
  border-color: rgba(75, 220, 255, 0.85);
  color: #fff;
  box-shadow: none;
}

.b2ii-series-btn:hover {
  border-color: rgba(100, 210, 255, 0.9);
  transform: translateY(-1px);
}

.b2ii-hero,
.b2ii-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.b2ii-hero,
.design-hero {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  align-items: center;
  gap: 24px;
  padding: 24px 26px;
  margin-bottom: 0;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.10), transparent 34%),
    radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.06), transparent 30%),
    linear-gradient(135deg, rgba(13, 27, 40, 0.48), rgba(8, 17, 25, 0.34));
  box-shadow: none;
}

.design-hero::before {
  content: none;
}

.design-hero > * {
  position: relative;
  z-index: 1;
}

.design-hero-copy {
  display: grid;
  gap: 12px;
}

.design-hero-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.design-hero h1 {
  margin: 0;
  font-size: clamp(24px, 3.8vw, 34px);
  line-height: 1.05;
}

.design-hero-badges {
  margin-bottom: 0;
}

.design-hero-desc {
  max-width: 760px;
}

.design-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.design-hero-stat {
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: rgba(4, 12, 19, 0.32);
  backdrop-filter: none;
}

.design-hero-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #f8fafc;
}

.design-hero-stat-label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.design-hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.design-hero-preview {
  width: min(100%, 380px);
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.design-hero-preview img {
  width: 100%;
  max-width: 340px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.36));
}

.b2ii-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.1;
}

.b2ii-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.b2ii-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(80, 180, 255, 0.45);
  background: linear-gradient(180deg, #1f8ec1 0%, #20567a 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.b2ii-badge--soft {
  background: rgba(255, 255, 255, 0.06);
}

.b2ii-desc {
  margin: 0;
  max-width: 980px;
  color: var(--text-muted);
  line-height: 1.45;
}

.b2ii-hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.b2ii-hero-media img,
.design-hero img {
  width: 100%;
  max-width: 360px;
  height: 160px;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.42));
}

.b2ii-card {
  padding: 10px;
  width: 100%;
  max-width: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.b2ii-table-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 !important;
}

.b2ii-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
}

.spec-table-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.spec-table-frame {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: transparent;
  isolation: isolate;
}

.spec-table-scroller {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: auto;
  border-radius: inherit;
  background: transparent;
}

.b2ii-table {
  width: max(100%, 1280px);
  margin: 0;
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.spec-table {
  width: max(100%, 1280px);
  min-width: 1280px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
  border-radius: 0;
  position: relative;
}

.b2ii-table th,
.b2ii-table td {
  padding: 10px 12px;
  border: 1px solid rgba(127, 156, 180, 0.24);
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.b2ii-table,
.spec-table {
  --design-table-text: #f8fafc;
  --design-table-muted: #cbd5e1;
  --design-table-header-text: #ffffff;
}

.spec-table th:first-child,
.spec-table td:first-child {
  width: 240px;
  white-space: pre-line;
  line-height: 1.35;
}

.b2ii-table thead th {
  position: sticky;
  top: 0;
  z-index: 31;
  background: linear-gradient(180deg, #4c6782 0%, #3a5269 100%);
  background-clip: padding-box;
  color: var(--design-table-header-text);
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 -1px 0 rgba(220, 236, 248, 0.22);
}

.b2ii-sticky-col {
  position: sticky;
  left: 0;
  z-index: 18;
  width: 230px;
  min-width: 230px;
  background: linear-gradient(180deg, #74899b 0%, #63798d 100%);
  background-clip: padding-box;
  color: var(--design-table-header-text);
  font-weight: 700;
  text-align: center;
  box-shadow: inset -1px 0 0 rgba(235, 245, 255, 0.10);
}

.b2ii-table thead .b2ii-sticky-col {
  z-index: 40;
}

.spec-table thead tr:first-child th:first-child {
  border-top-left-radius: 16px;
}

.spec-table thead tr:first-child th:last-child {
  border-top-right-radius: 16px;
}

.spec-table tbody tr:last-child th:first-child {
  border-bottom-left-radius: 16px;
}

.spec-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

.b2ii-model-col {
  min-width: 148px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.b2ii-cell {
  color: var(--design-table-text);
  white-space: normal;
  word-break: break-word;
  background: rgba(16, 28, 39, 0.82);
}

.b2ii-cell--model {
  font-weight: 800;
}

.b2ii-cell--muted {
  color: var(--design-table-muted);
}

.b2ii-action-cell {
  text-align: center;
}

.b2ii-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 34px;
  padding: 0.58rem 1rem;
  border: 1px solid color-mix(in srgb, #7dd3fc 48%, transparent) !important;
  border-radius: var(--pg-action-radius);
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 650;
  font-size: 0.78rem;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  contain: layout style;
  transform: translateZ(0);
  background: var(--pg-action-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(2, 30, 48, 0.3),
    inset 0 0 16px rgba(34, 211, 238, 0.12) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.b2ii-action-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 20%, rgba(186, 230, 253, 0.5), transparent 34%),
    linear-gradient(110deg, rgba(14, 116, 184, 0.9), rgba(34, 211, 238, 0.72), rgba(16, 185, 129, 0.72), rgba(14, 116, 184, 0.9));
  background-size: 160% 160%, 280% 100%;
  background-position: 0 0, 0 50%;
  opacity: 0.76;
  pointer-events: none;
  animation: pg-action-glow 18s linear infinite;
  animation-play-state: running;
  transition: opacity 180ms ease;
}

.b2ii-action-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 34%, transparent 62%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.22), transparent 58%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 16px rgba(3, 36, 54, 0.12);
  pointer-events: none;
  transition: background 180ms ease, filter 180ms ease;
}

.b2ii-action-btn:hover {
  filter: brightness(1.12) saturate(1.04);
  border-color: color-mix(in srgb, #a5f3fc 68%, transparent) !important;
}

.b2ii-action-btn:hover::before,
.b2ii-action-btn:focus-visible::before,
.b2ii-action-btn:active::before {
  opacity: 0.88;
}

.b2ii-action-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, #38bdf8 58%, transparent);
  outline-offset: 4px;
}

.b2ii-action-btn:active {
  transform: none;
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 18px rgba(34, 211, 238, 0.18) !important;
}

.b2ii-action-btn:active::after {
  filter: brightness(0.96);
}

.b2ii-action-btn:disabled,
.b2ii-action-btn[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.48 !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.b2ii-action-btn:disabled::before,
.b2ii-action-btn[aria-disabled="true"]::before {
  opacity: 0 !important;
  animation: none !important;
}

.b2ii-action-btn:disabled::after,
.b2ii-action-btn[aria-disabled="true"]::after {
  filter: saturate(0.35) brightness(0.92) !important;
}

.b2ii-action-btn span,
.b2ii-action-btn {
  position: relative;
}

.b2ii-action-btn span {
  z-index: 2;
  pointer-events: none;
}

@keyframes pg-action-glow {
  0%, 100% { background-position: 0 0, 0 50%; }
  50% { background-position: 12% 8%, 100% 50%; }
}

@media (hover: none), (pointer: coarse) {
  .b2ii-action-btn::before {
    opacity: 0.76;
    animation-play-state: paused;
    background-position: 8% 4%, 48% 50%;
  }

  .b2ii-action-btn:active::before {
    opacity: 0.76;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b2ii-action-btn,
  .b2ii-action-btn::before,
  .b2ii-action-btn::after {
    animation: none !important;
    transition-duration: 80ms !important;
  }
}

.b2ii-table tbody tr:hover td,
.b2ii-table tbody tr:hover th {
  background-color: rgba(112, 154, 188, 0.16);
}

.design-spec-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(203, 213, 225, 0.85);
  text-align: left;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
}

.design-energy-label-rail {
  margin-top: 0;
  display: grid;
  grid-template-columns: 230px repeat(var(--energy-label-columns, 1), minmax(0, 1fr));
  gap: 0;
  min-width: 1280px;
  align-items: start;
}

.design-energy-label-spacer {
  min-height: 0;
  height: 0;
}

.design-energy-label-cell {
  min-height: 220px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 12px 8px;
  box-sizing: border-box;
}

.design-energy-label-button {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.design-energy-label-button:focus-visible {
  outline: 2px solid rgba(125, 220, 255, 0.75);
  outline-offset: -2px;
  border-radius: 16px;
}

.design-energy-label-cell--empty {
  pointer-events: none;
  background: rgba(255, 255, 255, 0.94);
}

.design-energy-label-image {
  display: block;
  width: 220px;
  height: 220px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

.design-energy-label-button[data-energy-label-size="43"] .design-energy-label-image {
  transform: scale(0.79);
  transform-origin: center center;
}

.design-energy-label-button[data-energy-label-size="50"] .design-energy-label-image {
  transform: scale(1.25);
  transform-origin: center center;
}

.design-spec-note-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 1px;
}

:is(html.light, html[data-theme="day"]) .design-spec-note {
  color: #475569;
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(148, 163, 184, 0.25);
}

:is(html.light, html[data-theme="day"]) .b2ii-cell {
  color: var(--design-table-text);
  background: rgba(16, 28, 39, 0.82);
}

:is(html.light, html[data-theme="day"]) .b2ii-table,
:is(html.light, html[data-theme="day"]) .spec-table {
  --design-table-text: #f8fafc;
  --design-table-muted: #cbd5e1;
  --design-table-header-text: #ffffff;
}

.b2ii-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.b2ii-modal[hidden] {
  display: none !important;
}

.b2ii-modal-dialog {
  position: relative;
  width: fit-content;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  margin: 0;
  border: none;
  outline: none;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.b2ii-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(8, 20, 30, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.b2ii-modal-close:hover {
  background: rgba(20, 120, 170, 0.85);
}

.b2ii-modal-content {
  padding: 0;
  margin: 0;
  display: block;
  overflow: visible;
  max-height: none;
}

.spec-modal-body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.b2ii-spec-stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.b2ii-spec-image {
  display: block;
  width: auto;
  max-width: calc(100vw - 72px);
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 14px;
  object-fit: contain;
}

.spec-modal-disclaimer {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(220, 235, 255, 0.52);
  font-style: italic;
  text-align: center;
}

.b2ii-modal-empty {
  min-width: 320px;
  min-height: 160px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(220, 235, 255, 0.58);
  text-align: center;
  font-size: 14px;
  background: rgba(9, 20, 30, 0.96);
  border-radius: 14px;
}

.energy-label-modal {
  justify-content: center;
  align-items: center;
  padding: 12px;
}

.energy-label-modal-dialog {
  width: min(840px, calc(100vw - 24px));
  max-width: min(840px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  background: rgba(7, 16, 24, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.energy-label-modal-body {
  padding: 14px 18px 18px;
}

.energy-label-stage {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
}

.energy-label-header {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding-right: 0;
  width: 100%;
}

.energy-label-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: rgba(236, 247, 255, 0.62);
  text-align: center;
}

.energy-label-model {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  color: #f8fbff;
  text-align: center;
}

.energy-label-frame {
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.energy-label-modal-image {
  display: block;
  width: min(100%, 760px);
  max-width: min(100%, 760px);
  height: auto;
  max-height: calc(100vh - 92px);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin: 0 auto;
}

.energy-label-modal-empty {
  min-width: 260px;
  min-height: 140px;
}

.b2ii-modal-waiting {
  margin: 0;
  color: var(--text-muted);
}

.mobile-feature-icon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(140, 210, 255, 0.85);
}

.mobile-slot-stack {
  display: grid;
  gap: 4px;
}

.mobile-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px;
}

.mobile-overview-card {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--grid-border);
  border-radius: 14px;
  background: var(--header-cell-bg);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.mobile-overview-card:hover {
  border-color: rgba(80, 180, 255, 0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.overview-tv-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
}

.overview-tv-image-wrap img {
  width: 110px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45));
}

.overview-tv-image-wrap .panel-badge {
  top: 2px;
  right: 4px;
}

.overview-model-code {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.overview-model-name {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.overview-model-sizes {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.mobile-model-code {
  margin: 0 0 2px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--text-main);
}

/* DESKTOP >=1025 */
/* Desktop >=1440 refinements */
@media (min-width: 1440px) {
  .lineup-table { min-width: 0; }
  .row-label-cell { width: 112px; min-width: 112px; max-width: 112px; }
  .drop-slot { height: 38px; min-height: 38px; max-height: 38px; }
  .tv-image-frame { height: 86px; min-height: 86px; max-height: 86px; }
  .tv-image-frame img { height: 68px; max-height: 68px; }
  .model-header-content { min-height: 120px; grid-template-rows: 86px 18px 16px; }
}

@media (min-width: 1025px) {
  .desktop-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    padding: 7px 10px;
  }

  .desktop-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .desktop-toolbar-group .main-tabs,
  .desktop-toolbar-group.toolbar-scroll-row,
  .desktop-toolbar-group .toolbar-group {
    overflow: visible;
    white-space: normal;
  }

  .desktop-toolbar-separator {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.38);
    font-weight: 700;
    padding: 0 2px;
    user-select: none;
  }

  :is(html.light, html[data-theme="day"]) .desktop-toolbar-separator {
    color: rgba(15,35,50,0.35);
  }

  .app-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
  }

  .b2ii-series-switch {
    justify-content: center;
  }

  .mobile-model-filter-row {
    display: none;
  }

  .save-status {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.7;
    padding-right: 10px;
  }
}

/* Desktop 1025-1439 refinements */
@media (max-width: 1439px) and (min-width: 1025px) {
  .brand-title { font-size: 14px; }
  .lineup-table { min-width: 0; }
  .row-label-cell { width: 104px; min-width: 104px; max-width: 104px; }
  .row-label-text { font-size: 10px; }
  .drop-slot { height: 32px; min-height: 32px; max-height: 32px; font-size: 10px; }
  .tv-image-frame { height: 78px; min-height: 78px; max-height: 78px; padding-top: 8px; }
  .tv-image-frame img { height: 62px; max-height: 62px; }
  .model-header-content { min-height: 110px; grid-template-rows: 78px 18px 14px; }
  .tv-model-name { font-size: 12px; }
  .tv-model-sizes { font-size: 9px; }
}

/* MOBILE <=1024 tablet-width layout */
@media (max-width: 1024px) {
  .app-header {
    display: flex;
    justify-content: space-between;
    gap: 6px;
  }
  .brand-title { font-size: 13px; }
  .header-right { display: inline-flex; }
  .app-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .lineup-table { min-width: 0; }
  .row-label-cell { width: 96px; min-width: 96px; max-width: 96px; }
  .drop-slot { height: 32px; min-height: 32px; max-height: 32px; font-size: 10px; }
  .panel-badge { font-size: 8px; padding: 2px 6px; top: 6px; right: 8px; }
}

/* MOBILE <=1024 */
@media (max-width: 1024px) {
  .bravia-page .mobile-drawer-section--actions .mobile-drawer-section-note {
    display: none !important;
  }

  .bravia-page .mobile-drawer-section--actions .mobile-drawer-section-head {
    justify-content: flex-start !important;
  }

  .desktop-toolbar-row {
    display: contents;
  }
  .desktop-toolbar-separator {
    display: none !important;
  }
  .app-shell {
    height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    min-height: 40px;
    border-bottom: 1px solid var(--grid-border);
  }
  .brand-title {
    font-size: 11px;
    line-height: 1.15;
    font-weight: 800;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-right { display: inline-flex; justify-self: end; }
  .main-tabs,
  .toolbar-scroll-row,
  .toolbar-actions-row,
  .toolbar-filter-row,
  .mobile-model-filter-row,
  .main-tabs-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 30px;
    width: 100%;
    min-width: 0;
  }

  .main-tabs::-webkit-scrollbar,
  .toolbar-scroll-row::-webkit-scrollbar,
  .toolbar-actions-row::-webkit-scrollbar,
  .toolbar-filter-row::-webkit-scrollbar,
  .mobile-model-filter-row::-webkit-scrollbar,
  .main-tabs-row::-webkit-scrollbar {
    display: none;
  }

  .main-tab {
    flex: 0 0 auto;
    position: static !important;
    transform: none !important;
    min-width: auto;
    min-height: var(--toolbar-tab-height-mobile);
    height: var(--toolbar-tab-height-mobile);
    padding: 0 var(--toolbar-tab-padding-x-mobile);
    border-radius: var(--toolbar-tab-radius-mobile);
    font-size: var(--toolbar-font-size-mobile);
    line-height: var(--toolbar-tab-height-mobile);
    white-space: nowrap;
  }

  .app-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 8px 0;
    border: none;
    background: transparent;
  }
  .toolbar-cluster {
    display: grid;
    gap: 4px;
  }
  .toolbar-cluster-label {
    font-size: 9px;
  }
  .toolbar-row,
  .toolbar-divider {
    display: none !important;
  }
  .toolbar-scroll-row {
    position: static;
  }
  .toolbar-scroll-row > * { flex: 0 0 auto; }

  .toolbar-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .tool-tab-box {
    padding: 0;
    border-radius: 0;
  }

  .tool-tab-box .tool-tab {
    flex-basis: 104px;
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px 14px 0 0;
    font-size: var(--toolbar-font-size-mobile);
    line-height: 1;
  }

  .tool-tab-box .tool-tab.active,
  .tool-tab-box .tool-tab.is-active,
  .tool-tab-box .tool-tab[aria-selected="true"] {
    height: 44px;
    min-height: 44px;
    line-height: 1;
  }

  .tool-tab-box .toolbar-icon-btn,
  .tool-tab-box .toolbar-action-btn,
  button.toolbar-icon-btn,
  button.toolbar-action-btn {
    width: var(--toolbar-icon-btn-size);
    height: var(--toolbar-icon-btn-size);
    min-width: var(--toolbar-icon-btn-size);
    min-height: var(--toolbar-icon-btn-size);
    margin-bottom: 5px;
  }

  .btn,
  .filter-btn,
  .model-filter-btn {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    min-height: var(--control-height);
    height: var(--control-height);
    padding: 0 9px;
    border-radius: var(--control-radius);
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-secondary {
    display: none !important;
  }

  .mobile-model-filters {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    padding: 12px 8px;
  }
  .mobile-model-filter-row {
    display: flex;
    overflow-x: auto;
    gap: 5px;
  }
  .toolbar-actions-row,
  .toolbar-filter-row,
  .mobile-model-filter-row,
  .main-tabs-row {
    min-width: 0;
    width: 100%;
  }
  .model-filter-btn {
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.08);
    color: var(--text-main);
  }
  .model-filter-btn.active {
    background: linear-gradient(90deg, #0ea5e9, #7c3aed);
    color: #fff;
    border-color: rgba(255,255,255,0.55);
  }

  .mobile-model-filters .model-tab {
    flex-basis: 118px;
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  .save-status {
    font-size: 10px;
    line-height: 1.1;
    min-height: 12px;
    opacity: 0.55;
    text-align: right;
    padding: 0 2px;
    margin: 0;
    justify-self: end;
  }

  .app-main {
    min-height: 0;
    padding: 6px;
    overflow: hidden;
  }
  .matrix-panel {
    overflow: hidden;
  }
  .table-scroll { display: none; }
  .mobile-card-view {
    height: 100%;
    display: grid;
    gap: 10px;
    overflow-y: auto;
    padding: 6px;
  }
  .b2ii-page {
    padding: 8px;
    gap: 10px;
  }
  .b2ii-series-switch {
    justify-content: flex-start;
    padding: 6px 8px;
    margin-bottom: 10px;
  }
  .b2ii-series-btn {
    width: 132px;
    min-width: 132px;
    height: 52px;
    min-height: 52px;
    font-size: 12px;
  }
  .b2ii-hero,
  .b2ii-card {
    border-radius: 14px;
    padding: 12px;
  }
  .b2ii-hero,
  .design-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding: 18px 14px;
    margin-bottom: 8px;
  }
  .b2ii-hero-copy {
    text-align: center;
  }
  .b2ii-badges {
    justify-content: center;
  }
  .b2ii-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .b2ii-hero-media img,
  .design-hero img {
    width: min(300px, 88%);
    max-width: 300px;
    height: 150px;
  }
  .b2ii-table-card {
    padding: 8px;
  }
  .b2ii-table,
  .spec-table {
    min-width: 1040px;
  }
  .b2ii-sticky-col {
    width: 185px;
    min-width: 185px;
  }
  .b2ii-modal {
    padding: 12px;
  }
  .b2ii-modal-dialog {
    width: fit-content;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 0;
  }
  .energy-label-modal {
    padding: 8px;
    justify-content: center;
    align-items: center;
  }
  .energy-label-modal-dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .energy-label-modal-image {
    width: min(100%, 420px);
    max-height: calc(100vh - 88px);
  }
  .mobile-model-card {
    border: 1px solid var(--grid-border);
    border-radius: 14px;
    background: var(--panel-bg);
    overflow: hidden;
  }
  .mobile-model-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--header-cell-bg);
  }
  .mobile-model-header img {
    width: 86px;
    height: 52px;
    object-fit: contain;
  }
  .mobile-model-header h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.1;
  }
  .mobile-model-header p {
    margin: 3px 0 0;
    font-size: 10px;
    color: var(--text-muted);
  }
  .mobile-feature-list { display: grid; }
  .mobile-feature-row {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border-top: 1px solid var(--grid-border);
  }
  .mobile-feature-label {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
  }
  .mobile-feature-row .drop-slot {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }

  .mobile-feature-row .drop-slot:not(.boolean-slot):not(.has-icon) {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .feature-picker-popover {
    position: fixed;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    width: auto !important;
    max-height: none;
    overflow: auto;
    border-radius: 16px;
  }
  .feature-picker-item { min-height: 48px; }

  :is(html.light, html[data-theme="day"]) .main-tab,
  :is(html.light, html[data-theme="day"]) .btn,
  :is(html.light, html[data-theme="day"]) .filter-btn,
  :is(html.light, html[data-theme="day"]) .model-filter-btn {
    box-shadow: 0 2px 8px rgba(30, 80, 120, 0.14);
  }
}

@media (max-width: 1200px) {
  .b2ii-table,
  .spec-table {
    min-width: 1120px;
  }
}

@media (min-width: 560px) and (max-width: 1024px) {
  .mobile-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-overview-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .overview-meta {
    text-align: center;
  }
}

button:focus-visible {
  outline: 2px solid rgba(120, 200, 255, 0.85);
  outline-offset: 1px;
}

/* Unified horizontal gutter + overflow containment */
.app-shell,
.app-main,
.matrix-panel,
.table-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.app-shell,
.app-main {
  overflow-x: hidden;
}

.app-header {
  width: 100%;
  max-width: 100%;
  min-height: var(--header-height);
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  overflow: hidden;
}

.brand-block {
  flex: 1 1 auto;
  min-width: 0;
}

.brand-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-header-actions {
  margin-left: 12px;
}

.app-toolbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  box-sizing: border-box;
}

.desktop-toolbar-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.desktop-toolbar-row::-webkit-scrollbar {
  display: none;
}

.toolbar-cluster,
.toolbar-scroll-row,
.tool-tab-box .tool-tab-content,
.tool-tab-box .tool-tab-wrap,
.main-tabs {
  min-width: 0;
}

.table-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  padding-bottom: var(--section-gap);
  box-sizing: border-box;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

#lineupTable,
.lineup-table {
  width: 100%;
  min-width: 0;
}

.save-status {
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  text-align: right;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  :root {
    --page-x: 10px;
    --section-gap: 12px;
  }

  .app-header-actions {
    gap: 8px;
    margin-left: 8px;
  }

  .app-header-actions .bravia-action-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .app-toolbar {
    padding-left: var(--page-x);
    padding-right: var(--page-x);
    gap: 7px;
  }

  .desktop-toolbar-row {
    display: flex;
  }

  .mobile-model-filter-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: var(--page-x);
    padding-right: var(--page-x);
    box-sizing: border-box;
    overflow-x: auto;
  }

  .mobile-model-filters {
    width: max-content;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .table-panel {
    padding-left: var(--page-x);
    padding-right: var(--page-x);
    padding-bottom: var(--section-gap);
  }
}

/* SHARED */
/* BRAVIA page shared cleanup */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.bravia-page {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.bravia-page-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 12px;
}

.bravia-header {
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
}

.bravia-header .brand-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  margin-left: 0;
}

.brand-block .brand-mark,
.toolbar-actions,
.page-actions,
.floating-actions {
  display: none !important;
}

.bravia-header-actions,
.app-header-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.brand-title {
  min-width: 0;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

.bravia-table-brand {
  width: 100%;
  min-width: 96px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  text-align: center;
  overflow: visible;
}

.bravia-card-logo-wrap,
.bravia-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bravia-logo-svg {
  display: block;
  width: min(128px, 80%);
  max-width: 128px;
  min-width: 96px;
  height: 42px;
  max-height: 42px;
  background-color: var(--pg-logo-color);
  -webkit-mask: url("assets/placeholders/bravia-logo.svg") center / contain no-repeat;
  mask: url("assets/placeholders/bravia-logo.svg") center / contain no-repeat;
}

.bravia-card-logo {
  display: none;
}

.corner-logo-wrap,
.bravia-corner-logo,
.bravia-hero,
.userguide-hero,
.guide-hero {
  display: none !important;
}

.app-toolbar,
.desktop-toolbar-row,
.main-tabs,
.toolbar-filter-row,
.mobile-model-filter-row,
.mobile-model-filters,
.row-group-filters {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.app-toolbar {
  padding: 10px 12px;
  overflow-x: hidden;
}

.desktop-toolbar-row {
  gap: 10px;
  min-height: 44px;
  overflow-x: hidden;
}

.main-tabs-row,
.toolbar-filter-row,
.mobile-model-filter-row,
.main-tabs,
.row-group-filters,
.mobile-model-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.main-tabs-row::-webkit-scrollbar,
.toolbar-filter-row::-webkit-scrollbar,
.mobile-model-filter-row::-webkit-scrollbar,
.main-tabs::-webkit-scrollbar,
.row-group-filters::-webkit-scrollbar,
.mobile-model-filters::-webkit-scrollbar {
  display: none;
}

.main-tab,
.row-filter-btn,
.mobile-model-filters .model-tab {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  max-width: none;
  min-height: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  scroll-snap-align: start;
}

.mobile-card-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 8px;
}

.mobile-overview-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 0;
}

.mobile-overview-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 12px;
  text-align: left;
}

.overview-tv-image-wrap {
  min-height: 96px;
}

.overview-tv-image-wrap img {
  width: 100%;
  max-width: 160px;
  height: auto;
  object-fit: contain;
  display: block;
}

.overview-meta {
  min-width: 0;
}

.overview-model-name,
.overview-model-sizes,
.mobile-model-header h3,
.mobile-model-header p {
  overflow-wrap: anywhere;
}

.mobile-model-card {
  min-width: 0;
  width: 100%;
}

.mobile-model-header {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.mobile-model-header .panel-badge {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
}

.mobile-model-header img {
  width: 72px;
  height: 44px;
}

.mobile-feature-list,
.mobile-feature-row,
.mobile-feature-label,
.mobile-slot-stack {
  min-width: 0;
}

.mobile-feature-row {
  grid-template-columns: minmax(96px, 34%) 1fr;
}

@media (min-width: 480px) and (max-width: 1024px) {
  .mobile-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .bravia-page-inner {
    padding: 10px 8px;
  }

  .bravia-header {
    min-height: auto;
    padding: 7px 8px;
  }

  /* LEGACY MOBILE RULE - DISABLED BY RUNTIME MOBILE SOURCE OF TRUTH */
  html[data-mobile-legacy] .app-header {
    padding: 0;
  }

  html[data-mobile-legacy] .app-toolbar {
    padding: 8px 8px 0;
    gap: 8px;
  }

  .desktop-toolbar-row,
  .toolbar-cluster {
    display: grid;
    gap: 8px;
  }

  .main-tabs,
  .toolbar-filter-row,
  .row-group-filters,
  html[data-mobile-legacy] .mobile-model-filter-row,
  html[data-mobile-legacy] .mobile-model-filters {
    padding: 0;
    gap: 8px;
  }

  .main-tab,
  .row-filter-btn,
  html[data-mobile-legacy] .mobile-model-filters .model-tab {
    min-height: 42px;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }

  .mobile-card-view {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  html[data-mobile-legacy] .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 340px);
    max-width: 100%;
    transform: translateX(-108%);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
    z-index: 55;
  }

  html[data-mobile-legacy] .mobile-drawer[hidden] {
    display: none !important;
  }

  html[data-mobile-legacy] .mobile-drawer[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  html[data-mobile-legacy] .mobile-drawer[aria-hidden="true"] {
    transform: translateX(-108%);
    opacity: 0;
    pointer-events: none;
  }

  .mobile-model-header {
    position: static;
  }
}

@media (max-width: 420px) {
  .mobile-overview-grid {
    grid-template-columns: 1fr;
  }

  .mobile-overview-card {
    padding: 10px;
  }

  .mobile-model-header {
    grid-template-columns: 1fr;
  }

  .mobile-model-header img,
  .mobile-model-header .panel-badge {
    justify-self: start;
  }

  .mobile-feature-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-bottom-nav-height: 64px;
  }

  body {
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
    min-height: 100dvh;
  }

  /* LEGACY MOBILE RULE - DISABLED BY RUNTIME MOBILE SOURCE OF TRUTH */
  html[data-mobile-legacy] .app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 56px;
    padding: calc(var(--mobile-safe-top) + 6px) 12px 6px;
    background: linear-gradient(180deg, rgba(8, 22, 33, 0.96), rgba(6, 16, 24, 0.94));
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(125, 211, 252, 0.12);
  }

  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .app-header {
    background: rgba(250, 252, 253, 0.86);
    border-bottom-color: rgba(18, 39, 56, 0.08);
    box-shadow: 0 10px 30px rgba(18, 39, 56, 0.06);
    backdrop-filter: blur(18px);
  }

  .brand-block {
    gap: 8px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .brand-title {
    font-size: 15px;
    line-height: 1.15;
  }



  .mobile-menu-btn {
    display: inline-flex !important;
  }

  html[data-mobile-legacy] .app-toolbar {
    position: sticky;
    top: calc(var(--mobile-safe-top) + 56px);
    z-index: 35;
    display: grid;
    gap: 8px;
    padding: 10px 12px 8px;
    background:
      linear-gradient(180deg, rgba(6, 16, 23, 0.96) 0%, rgba(6, 16, 23, 0.90) 100%);
    border-bottom: 1px solid rgba(125, 211, 252, 0.08);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
  }

  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .app-toolbar {
    background: linear-gradient(180deg, rgba(251, 253, 254, 0.86) 0%, rgba(246, 249, 251, 0.80) 100%);
    border-bottom-color: rgba(18, 39, 56, 0.07);
    box-shadow: 0 10px 24px rgba(18, 39, 56, 0.04);
    backdrop-filter: blur(16px);
  }

  .mobile-search-row {
    display: block;
  }

  .mobile-search-row[hidden] {
    display: none !important;
  }

  .mobile-search-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-search-input-wrap {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  :is(html.light, html[data-theme="day"]) .mobile-search-field {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 76, 117, 0.12);
  }

  .mobile-search-icon,
  .mobile-bottom-nav-icon,
  .mobile-compare-fab-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .mobile-search-icon,
  .mobile-bottom-nav-icon--search {
    -webkit-mask-image: url("assets/ui-icons/sun.svg");
    mask-image: url("assets/ui-icons/sun.svg");
  }

  .mobile-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    font-size: 22px;
    line-height: 1;
  }

  .mobile-search-input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 14px;
  }

  .mobile-search-input::placeholder {
    color: var(--text-soft);
  }

  .desktop-toolbar-row,
  .toolbar-cluster {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .main-tabs-row,
  .toolbar-filter-row,
  html[data-mobile-legacy] .mobile-model-filter-row {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .main-tabs-row::-webkit-scrollbar,
  .toolbar-filter-row::-webkit-scrollbar,
  html[data-mobile-legacy] .mobile-model-filter-row::-webkit-scrollbar {
    display: none;
  }

  .main-tabs,
  .row-group-filters,
  html[data-mobile-legacy] .mobile-model-filters {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
  }

  .main-tab,
  .row-filter-btn,
  html[data-mobile-legacy] .mobile-model-filters .model-tab,
  .mobile-feature-summary {
    min-height: 44px;
  }

  .main-tab,
  .row-filter-btn,
  html[data-mobile-legacy] .mobile-model-filters .model-tab {
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
  }

  .main-tab {
    min-width: 104px;
    justify-content: center;
  }

  .row-filter-btn,
  html[data-mobile-legacy] .mobile-model-filters .model-tab {
    min-width: max-content;
  }

  html[data-mobile-legacy] .mobile-model-filter-row[hidden] {
    display: none !important;
  }

  html[data-mobile-legacy] .mobile-model-filters .model-tab {
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: rgba(255, 255, 255, 0.06);
  }

  html[data-mobile-legacy] .mobile-model-filters .model-tab.active,
  html[data-mobile-legacy] .mobile-model-filters .model-tab[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(29, 120, 168, 0.95) 0%, rgba(16, 55, 88, 1) 100%);
    border-color: rgba(125, 211, 252, 0.52);
    color: #fff;
  }

  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .mobile-model-filters .model-tab {
    background: rgba(255, 255, 255, 0.72);
  }

  .save-status {
    display: none;
  }

  .app-main {
    min-height: 0;
    padding: 4px 10px calc(var(--mobile-safe-bottom) + var(--mobile-bottom-nav-height) + 86px);
    overflow: hidden;
  }

  .table-panel,
  .matrix-panel {
    padding-left: 0;
    padding-right: 0;
  }

  .hint-box {
    min-height: 0;
    margin: 0 0 6px;
  }

  .mobile-card-view {
    display: grid;
    gap: 14px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 8px;
    align-content: start;
    overscroll-behavior: contain;
  }

  .mobile-overview-grid {
    gap: 10px;
  }

  .mobile-overview-card {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(14, 31, 44, 0.94) 0%, rgba(7, 17, 25, 0.96) 100%);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
  }

  :is(html.light, html[data-theme="day"]) .mobile-overview-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 245, 250, 0.98) 100%);
    box-shadow: 0 8px 20px rgba(15, 76, 117, 0.08);
  }

  .overview-tv-image-wrap {
    min-height: 72px;
    display: grid;
    place-items: center;
    padding: 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(125, 211, 252, 0.08);
  }

  .overview-tv-image-wrap img {
    width: 100%;
    max-width: 84px;
    max-height: 52px;
  }

  .overview-meta {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .overview-meta-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .overview-model-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    text-transform: uppercase;
  }

  .overview-model-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
  }

  .overview-model-series,
  .overview-model-sizes {
    font-size: 12px;
    color: var(--text-muted);
  }

  .mobile-model-card {
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 22px;
    background:
      radial-gradient(circle at top left, rgba(56, 189, 248, 0.10), transparent 24%),
      linear-gradient(180deg, rgba(9, 24, 35, 0.98) 0%, rgba(7, 17, 25, 0.98) 100%);
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
  }

  :is(html.light, html[data-theme="day"]) .mobile-model-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 245, 250, 0.98) 100%);
    box-shadow: 0 10px 22px rgba(15, 76, 117, 0.08);
  }

  .mobile-model-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
    background:
      linear-gradient(180deg, rgba(18, 42, 59, 0.96) 0%, rgba(10, 24, 35, 0.94) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
  }

  :is(html.light, html[data-theme="day"]) .mobile-model-header {
    background: linear-gradient(180deg, rgba(230, 243, 250, 0.98) 0%, rgba(242, 248, 252, 0.96) 100%);
    border-bottom-color: rgba(15, 76, 117, 0.08);
  }

  .mobile-model-media {
    display: grid;
    place-items: center;
    width: 88px;
    min-height: 64px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(125, 211, 252, 0.08);
    overflow: hidden;
  }

  .mobile-model-header img {
    width: 78px;
    height: 48px;
    object-fit: contain;
  }

  .mobile-model-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .mobile-model-code {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    text-transform: uppercase;
  }

  .mobile-model-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.1;
  }

  .mobile-model-series,
  .mobile-model-sizes {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
    color: var(--text-muted);
  }

  .mobile-model-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
  }

  .mobile-model-meta-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(125, 211, 252, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.16);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-feature-list {
    display: grid;
    gap: 0;
    padding-bottom: 6px;
  }

  .mobile-spec-accordion {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.01);
  }

  :is(html.light, html[data-theme="day"]) .mobile-spec-accordion {
    border-top-color: rgba(15, 76, 117, 0.08);
  }

  .mobile-feature-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  }

  .mobile-feature-summary::-webkit-details-marker {
    display: none;
  }

  .mobile-feature-summary-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .mobile-feature-label-text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .mobile-feature-summary-value {
    flex: 0 0 auto;
    max-width: 42%;
    font-size: 11px;
    line-height: 1.25;
    text-align: right;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(125, 211, 252, 0.08);
  }

  .mobile-feature-detail {
    padding: 0 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .mobile-slot-stack {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .mobile-slot-stack .slot {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
  }

  .mobile-slot-stack .slot:not(.boolean-slot):not(.has-icon) {
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  :is(html.light, html[data-theme="day"]) .mobile-slot-stack .slot:not(.boolean-slot):not(.has-icon) {
    background: rgba(255, 255, 255, 0.72);
  }

  .feature-boolean-cell .slot {
    justify-content: flex-start;
  }

  .mobile-feature-icon-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
  }

  .feature-picker-popover {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--mobile-safe-bottom) + 10px) !important;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  }

  .mobile-empty-state {
    padding: 22px 16px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    text-align: center;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
  }

  .mobile-empty-state h3 {
    margin: 0 0 6px;
    font-size: 16px;
  }

  .mobile-empty-state p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
  }

  .mobile-compare-chip {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-compare-chip.is-active {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(125, 211, 252, 0.42);
  }

  /* LEGACY MOBILE RULE - DISABLED BY RUNTIME MOBILE SOURCE OF TRUTH */
  html[data-mobile-legacy] .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom));
    padding: 8px 10px calc(8px + var(--mobile-safe-bottom));
    background: rgba(6, 16, 23, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .mobile-bottom-nav {
    background: rgba(238, 247, 251, 0.98);
    border-top-color: rgba(15, 76, 117, 0.12);
  }

  html[data-mobile-legacy] .mobile-bottom-nav-btn {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 6px 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
  }

  html[data-mobile-legacy] .mobile-bottom-nav-btn.is-active {
    color: var(--text-main);
    background: rgba(125, 211, 252, 0.1);
  }

  .mobile-bottom-nav-icon--guide {
    -webkit-mask-image: url("assets/ui-icons/fullscreen.svg");
    mask-image: url("assets/ui-icons/fullscreen.svg");
  }

  .mobile-bottom-nav-icon--compare,
  .mobile-compare-fab-icon {
    -webkit-mask-image: url("assets/ui-icons/hide.svg");
    mask-image: url("assets/ui-icons/hide.svg");
  }

  .mobile-bottom-nav-icon--more {
    -webkit-mask-image: url("assets/ui-icons/fullscreen.svg");
    mask-image: url("assets/ui-icons/fullscreen.svg");
  }

  .mobile-compare-fab {
    position: fixed;
    right: 14px;
    bottom: calc(var(--mobile-safe-bottom) + var(--mobile-bottom-nav-height) + 14px);
    z-index: 46;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #1590cf 0%, #0b3554 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(5, 15, 22, 0.28);
  }

  .mobile-compare-fab-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }

  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 47;
    background: rgba(3, 10, 15, 0.45);
  }

  .mobile-sheet-backdrop[hidden] {
    display: none !important;
  }

  .mobile-action-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 48;
    display: grid;
    gap: 12px;
    padding: 16px 16px calc(16px + var(--mobile-safe-bottom));
    border-radius: 22px 22px 0 0;
    background: rgba(7, 17, 25, 0.99);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.28);
  }

  .mobile-action-sheet[hidden] {
    display: none !important;
  }

  :is(html.light, html[data-theme="day"]) .mobile-action-sheet {
    background: rgba(248, 251, 253, 0.99);
    border-top-color: rgba(15, 76, 117, 0.12);
  }

  .mobile-action-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-action-sheet-title {
    font-size: 16px;
    font-weight: 700;
  }

  .mobile-action-sheet-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .mobile-action-sheet-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
  }

  .mobile-action-sheet-close::before {
    content: "×";
    font-size: 24px;
    line-height: 44px;
  }

  .mobile-action-sheet-body,
  .mobile-compare-sheet-list,
  .mobile-more-sheet-list {
    display: grid;
    gap: 10px;
  }

  .mobile-compare-sheet-item,
  .mobile-more-sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    text-align: left;
  }

  .mobile-compare-sheet-item small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
  }

  .mobile-compare-sheet-item.is-selected {
    border-color: rgba(125, 211, 252, 0.42);
    background: rgba(14, 165, 233, 0.14);
  }

  .mobile-compare-sheet-check {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-sheet-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .mobile-sheet-primary-btn,
  .mobile-sheet-secondary-btn {
    min-height: 48px;
    border-radius: 16px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-sheet-primary-btn {
    background: linear-gradient(135deg, #1590cf 0%, #0b3554 100%);
    color: #fff;
  }

  .mobile-sheet-secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
  }
}

@media (min-width: 1025px) {
  .bravia-page.app-shell {
    background: transparent;
  }

  .bravia-page .app-toolbar.tool-tab-box {
    background:
      linear-gradient(180deg, rgba(9, 18, 27, 0.88), rgba(7, 15, 23, 0.82));
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 24px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .app-toolbar.tool-tab-box {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 250, 0.94));
    border-color: rgba(18, 39, 56, 0.08);
    box-shadow: 0 16px 32px rgba(18, 39, 56, 0.08);
  }

  .bravia-page .desktop-toolbar-row {
    border-bottom-color: rgba(125, 211, 252, 0.12);
  }

  .bravia-page .matrix-panel.table-panel {
    background:
      linear-gradient(180deg, rgba(8, 19, 28, 0.94), rgba(5, 12, 19, 0.9));
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
    padding: 12px;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .matrix-panel.table-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.96));
    border-color: rgba(18, 39, 56, 0.08);
    box-shadow: 0 20px 40px rgba(18, 39, 56, 0.08);
  }

  .bravia-page .table-scroll {
    border-radius: 18px;
    background: rgba(4, 12, 19, 0.26);
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .table-scroll {
    background: rgba(255, 255, 255, 0.84);
  }

  .bravia-page .hint-box:not(:empty) {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 14px;
    background: rgba(6, 19, 28, 0.72);
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .hint-box:not(:empty) {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(18, 39, 56, 0.08);
    color: #355066;
  }

  .bravia-page .b2ii-page,
  .bravia-page .design-series-panel {
    background: transparent;
  }

  .bravia-page .b2ii-table-card {
    padding: 14px !important;
    border: 1px solid rgba(125, 211, 252, 0.12) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(8, 19, 28, 0.94), rgba(5, 12, 19, 0.9)) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .b2ii-table-card {
    border-color: rgba(18, 39, 56, 0.08) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.96)) !important;
    box-shadow: 0 20px 40px rgba(18, 39, 56, 0.08) !important;
  }

  .bravia-page .b2ii-table-wrap,
  .bravia-page .spec-table-shell {
    border-radius: 20px;
    background: rgba(4, 12, 19, 0.24) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .b2ii-table-wrap,
  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table-shell {
    background: rgba(255, 255, 255, 0.84) !important;
  }
}

@media (max-width: 1024px) {
  .mobile-nav-overlay { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); }
  /* LEGACY MOBILE RULE - DISABLED BY RUNTIME MOBILE SOURCE OF TRUTH */
  html[data-mobile-legacy] .mobile-drawer { display: block; width: min(92vw, 392px); padding: calc(var(--mobile-safe-top) + 12px) 0 12px 12px; background: linear-gradient(180deg, rgba(2, 6, 10, .99), rgba(6, 14, 22, .98)); border: 1px solid rgba(125,211,252,.12); box-shadow: 24px 0 60px rgba(0,0,0,.55); pointer-events: none; overflow: hidden; }
  html[data-mobile-legacy] .mobile-drawer-shell { display: grid; gap: 12px; min-height: calc(100dvh - var(--mobile-safe-top) - 24px); padding: 14px; border-radius: 28px 24px 24px 28px; background: transparent; border: 0; box-shadow: none; pointer-events: auto; backdrop-filter: blur(20px); overflow: hidden; }
  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .mobile-drawer-shell { background: linear-gradient(180deg, rgba(250,253,255,.99), rgba(236,245,250,.98)); border-color: rgba(15,76,117,.12); box-shadow: 24px 0 60px rgba(15,76,117,.16); }
  html[data-mobile-legacy] .mobile-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  html[data-mobile-legacy] .mobile-drawer-expand-btn,
  html[data-mobile-legacy] .mobile-drawer-close { background: transparent !important; border: 0 !important; color: var(--text-main) !important; box-shadow: none !important; width: 40px; height: 40px; border-radius: 12px; padding: 0; opacity: .92; }
  html[data-mobile-legacy] .mobile-drawer-expand-btn::before { content: "◧"; font-size: 22px; line-height: 40px; }
  html[data-mobile-legacy] .mobile-drawer-close::before { content: "×"; font-size: 28px; line-height: 40px; }
  html[data-mobile-legacy] .mobile-drawer-stats { display: none; }
  html[data-mobile-legacy] .mobile-drawer-stat, html[data-mobile-legacy] .mobile-drawer-section, html[data-mobile-legacy] .mobile-drawer-nav-btn, html[data-mobile-legacy] .mobile-drawer-action-btn, html[data-mobile-legacy] .mobile-drawer-chip, html[data-mobile-legacy] .mobile-drawer-model-btn { border: 1px solid rgba(125,211,252,.10); }
  html[data-mobile-legacy] .mobile-drawer-section { border-radius: 20px; background: rgba(255,255,255,.04); padding: 12px; }
  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .mobile-drawer-section { background: rgba(255,255,255,.64); border-color: rgba(15,76,117,.08); }
  html[data-mobile-legacy] .mobile-drawer-sections { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding-right: 2px; padding-bottom: calc(var(--mobile-safe-bottom) + 6px); flex: 1 1 auto; min-height: 0; }
  html[data-mobile-legacy] .mobile-drawer-section { gap: 10px; }
  html[data-mobile-legacy] .mobile-drawer-section--models { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html[data-mobile-legacy] .mobile-drawer-section--actions { flex: 0 0 auto; }
  html[data-mobile-legacy] .mobile-drawer-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  html[data-mobile-legacy] .mobile-drawer-section-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  html[data-mobile-legacy] .mobile-drawer-section-note { font-size: 11px; color: var(--text-muted); }
  html[data-mobile-legacy] .mobile-drawer-action-grid { display: grid; gap: 8px; }
  html[data-mobile-legacy] .mobile-drawer-action-btn { display: grid; gap: 3px; width: 100%; padding: 12px 14px; text-align: left; border: 1px solid rgba(125,211,252,.10); border-radius: 18px; background: rgba(255,255,255,.04); color: var(--text-main); }
  html[data-mobile-legacy] .mobile-drawer-action-btn.is-active { background: linear-gradient(135deg, rgba(29,155,240,.92), rgba(0,212,170,.72)); border-color: rgba(125,211,252,.42); color: #fff; box-shadow: 0 10px 24px rgba(29,155,240,.18); }
  html[data-mobile-legacy] .mobile-drawer-action-title { font-size: 14px; font-weight: 800; }
  html[data-mobile-legacy] .mobile-drawer-action-desc { font-size: 11px; color: var(--text-muted); }
  html[data-mobile-legacy] .mobile-drawer-model-list { display: grid; gap: 8px; overflow-y: auto; padding-right: 2px; flex: 1 1 auto; min-height: 0; }
  html[data-mobile-legacy] .mobile-drawer-selected { display: none; }
  html[data-mobile-legacy].collapsed .mobile-drawer { width: min(78vw, 320px); }
  html[data-mobile-legacy].collapsed .mobile-drawer-section-note,
  html[data-mobile-legacy].collapsed .mobile-drawer-model-main span,
  html[data-mobile-legacy].collapsed .mobile-drawer-action-desc { display: none; }
  html[data-mobile-legacy].collapsed .mobile-drawer-section-head { justify-content: flex-start; }
  html[data-mobile-legacy].collapsed .mobile-drawer-model-btn { padding: 12px; }
  html[data-mobile-legacy].collapsed .mobile-drawer-model-main strong { font-size: 13px; }
  html[data-mobile-legacy] .mobile-drawer-model-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px; text-align: left; border-radius: 18px; background: rgba(255,255,255,.04); color: var(--text-main); }
  html[data-mobile-legacy] .mobile-drawer-model-btn.is-active { background: linear-gradient(135deg, rgba(29,155,240,.92), rgba(0,212,170,.72)); border-color: rgba(125,211,252,.42); color: #fff; box-shadow: 0 10px 24px rgba(29,155,240,.18); }
  html[data-mobile-legacy] .mobile-drawer-model-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html[data-mobile-legacy] .mobile-drawer-model-main strong { font-size: 14px; line-height: 1.2; }
  html[data-mobile-legacy] .mobile-drawer-model-main span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-mobile-legacy] .mobile-drawer-model-btn.is-active .mobile-drawer-model-main span { color: rgba(255,255,255,.86); }
  html[data-mobile-legacy] .mobile-drawer-model-chev { font-size: 20px; line-height: 1; color: var(--text-muted); flex: 0 0 auto; }
  html[data-mobile-legacy] .mobile-drawer-model-btn.is-active .mobile-drawer-model-chev { color: rgba(255,255,255,.9); }
  .mobile-search-field { border-radius: 18px; border: 1px solid rgba(125,211,252,.18); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  .mobile-search-icon { -webkit-mask-image: url("assets/ui-icons/search.svg"); mask-image: url("assets/ui-icons/search.svg"); }
  html[data-mobile-legacy] .mobile-bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: min(94vw, 560px); bottom: calc(var(--mobile-safe-bottom) + 10px); min-height: 72px; padding: 10px; gap: 8px; border-radius: 24px; background: rgba(6,16,23,.96); border: 1px solid rgba(125,211,252,.12); box-shadow: 0 18px 38px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
  :is(html.light, html[data-theme="day"])[data-mobile-legacy] .mobile-bottom-nav { background: rgba(248,251,253,.94); border-color: rgba(15,76,117,.10); box-shadow: 0 18px 38px rgba(15,76,117,.12); }
  html[data-mobile-legacy] .mobile-bottom-nav-btn { min-height: 52px; padding: 8px 6px 6px; border-radius: 18px; background: transparent; color: var(--text-soft); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
  html[data-mobile-legacy] .mobile-bottom-nav-btn.is-active { color: #fff; background: linear-gradient(135deg, rgba(29,155,240,.94), rgba(0,212,170,.72)); box-shadow: 0 10px 18px rgba(29,155,240,.18); }
  html[data-mobile-legacy] .mobile-bottom-nav-label { display: block; font-size: 10px; line-height: 1; }
  html[data-mobile-legacy] .mobile-bottom-nav-icon { width: 20px; height: 20px; margin-bottom: 4px; }
  html[data-mobile-legacy] .mobile-bottom-nav-icon--guide { -webkit-mask-image: url("assets/ui-icons/view.svg"); mask-image: url("assets/ui-icons/view.svg"); }
  html[data-mobile-legacy] .mobile-bottom-nav-icon--search { -webkit-mask-image: url("assets/ui-icons/search.svg"); mask-image: url("assets/ui-icons/search.svg"); }
  html[data-mobile-legacy] .mobile-bottom-nav-icon--compare, html[data-mobile-legacy] .mobile-compare-fab-icon { -webkit-mask-image: url("assets/ui-icons/hide.svg"); mask-image: url("assets/ui-icons/hide.svg"); }
  html[data-mobile-legacy] .mobile-bottom-nav-icon--more { -webkit-mask-image: url("assets/ui-icons/design.svg"); mask-image: url("assets/ui-icons/design.svg"); }
  .mobile-compare-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(125,211,252,.16); background: rgba(125,211,252,.08); color: var(--text-main); font-size: 11px; font-weight: 800; white-space: nowrap; }
  .mobile-compare-chip.is-active { background: linear-gradient(135deg, rgba(29,155,240,.92), rgba(0,212,170,.78)); border-color: rgba(125,211,252,.36); color: #fff; }
  .mobile-compare-fab { right: 14px; bottom: calc(var(--mobile-safe-bottom) + 94px); min-height: 52px; padding: 0 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(29,155,240,.98), rgba(0,212,170,.72)); border: 1px solid rgba(125,211,252,.18); box-shadow: 0 16px 28px rgba(5,15,22,.3); }
  .mobile-action-sheet { width: min(94vw, 560px); left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--mobile-safe-bottom) + 82px); border-radius: 24px; border: 1px solid rgba(125,211,252,.12); background: rgba(7,17,25,.98); box-shadow: 0 18px 38px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
  :is(html.light, html[data-theme="day"]) .mobile-action-sheet { background: rgba(248,251,253,.98); border-color: rgba(15,76,117,.10); }
  .mobile-action-sheet-body,.mobile-compare-sheet-list,.mobile-more-sheet-list { display: grid; gap: 12px; }
  .mobile-compare-sheet-item,.mobile-more-sheet-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(125,211,252,.12); background: rgba(255,255,255,.04); color: var(--text-main); text-align: left; }
  .mobile-sheet-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-sheet-primary-btn,.mobile-sheet-secondary-btn { min-height: 50px; border-radius: 16px; border: 0; font-size: 13px; font-weight: 700; }
  .mobile-sheet-primary-btn { background: linear-gradient(135deg, rgba(29,155,240,.96), rgba(0,212,170,.76)); color: #fff; }
  .mobile-sheet-secondary-btn { background: rgba(125,211,252,.10); color: var(--text-main); }
  .mobile-overview-card,.mobile-model-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
  .mobile-overview-card:hover,.mobile-model-card:hover { transform: translateY(-2px); }
  .mobile-model-header { padding: 14px; gap: 12px; align-items: flex-start; }
  .mobile-model-header img { width: 74px; height: 46px; margin-top: 2px; }
  .mobile-model-cards { display: grid; gap: 14px; padding: 0 12px 14px; }
  .mobile-spec-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(125,211,252,.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,247,252,.92));
    box-shadow: 0 14px 28px rgba(15,76,117,.10);
    overflow: hidden;
  }
  :is(html.dark, html[data-theme="night"]) .mobile-spec-card {
    background:
      linear-gradient(180deg, rgba(10, 24, 35, 0.98), rgba(7, 17, 25, 0.96));
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
  }
  .mobile-spec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 2px; }
  .mobile-spec-card-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
  .mobile-spec-card-count { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--text-main); background: rgba(29,155,240,.10); }
  .mobile-model-card--full .mobile-feature-list { gap: 0; }

  .design-series-panel--mobile {
    gap: 12px;
    padding: 0 0 calc(var(--mobile-safe-bottom) + 12px);
  }

  .design-mobile-top {
    display: grid;
    gap: 10px;
    padding: 0 12px;
  }

  .design-mobile-top-copy {
    display: grid;
    gap: 8px;
  }

  .design-mobile-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7dd3fc;
  }

  .design-mobile-top-copy h1 {
    margin: 0;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.05;
  }

  .design-mobile-top-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
    font-size: 13px;
  }

  .design-mobile-series-switch {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px 2px;
    scrollbar-width: none;
  }

  .design-mobile-series-switch::-webkit-scrollbar {
    display: none;
  }

  .design-mobile-series-switch .b2ii-series-btn {
    width: auto;
    min-width: 112px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 12px;
  }

  .design-mobile-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 12px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    background: linear-gradient(180deg, rgba(12, 24, 36, 0.96), rgba(7, 16, 24, 0.92));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }

  :is(html.light, html[data-theme="day"]) .design-mobile-hero {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 248, 252, 0.94));
    border-color: rgba(15, 76, 117, 0.10);
  }

  .design-mobile-hero-copy {
    display: grid;
    gap: 8px;
    align-content: start;
  }

  .design-mobile-hero-copy h1 {
    margin: 0;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.05;
  }

  .design-mobile-hero-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
    font-size: 13px;
  }

  .design-mobile-hero-media {
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: center;
    min-height: 140px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.10);
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
  }

  .design-mobile-hero-media-copy {
    display: grid;
    gap: 2px;
    justify-items: center;
  }

  .design-mobile-hero-media-copy span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
  }

  .design-mobile-hero-media-copy strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
  }

  .design-mobile-hero-media-copy small {
    font-size: 11px;
    color: var(--text-muted);
  }

  :is(html.light, html[data-theme="day"]) .design-mobile-hero-media {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(15, 76, 117, 0.08);
  }

  .design-mobile-hero-media img {
    width: 100%;
    max-width: 180px;
    max-height: 170px;
    object-fit: contain;
  }

  .design-mobile-section {
    display: grid;
    gap: 10px;
    margin: 0 12px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    background: linear-gradient(180deg, rgba(12, 24, 36, 0.94), rgba(7, 16, 24, 0.92));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }

  :is(html.light, html[data-theme="day"]) .design-mobile-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 248, 252, 0.92));
    border-color: rgba(15, 76, 117, 0.10);
  }

  .design-mobile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .design-mobile-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
  }

  .design-mobile-section-note {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
  }

  .design-mobile-model-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(152px, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .design-mobile-model-rail::-webkit-scrollbar {
    display: none;
  }

  .design-mobile-model-btn,
  .design-mobile-energy-btn {
    border: 1px solid rgba(125, 211, 252, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
  }

  .design-mobile-model-btn {
    display: grid;
    gap: 4px;
    min-height: 92px;
    padding: 12px;
    border-radius: 18px;
    text-align: left;
  }

  .design-mobile-model-action {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7dd3fc;
  }

  .design-mobile-energy-row {
    display: grid;
    gap: 8px;
  }

  .design-mobile-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .design-mobile-energy-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }

  .design-mobile-row-list {
    display: grid;
    gap: 10px;
  }

  .design-mobile-row-card {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    background: rgba(255, 255, 255, 0.05);
  }

  :is(html.light, html[data-theme="day"]) .design-mobile-row-card {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(15, 76, 117, 0.08);
  }

  .design-mobile-row-summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
  }

  .design-mobile-row-summary::-webkit-details-marker {
    display: none;
  }

  .design-mobile-row-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
  }

  .design-mobile-row-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
  }

  .design-mobile-row-count {
    font-size: 11px;
    font-weight: 800;
    color: #7dd3fc;
    white-space: nowrap;
  }

  .design-mobile-row-values {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(128px, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding-top: 10px;
    scrollbar-width: none;
  }

  .design-mobile-row-values::-webkit-scrollbar {
    display: none;
  }

  .design-mobile-row-value {
    min-height: 76px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(125, 211, 252, 0.10);
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    gap: 4px;
    align-content: start;
  }

  :is(html.light, html[data-theme="day"]) .design-mobile-row-value {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(15, 76, 117, 0.08);
  }

  .design-mobile-row-value span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .design-mobile-row-value strong {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-main);
  }

  .design-mobile-row-value.is-muted strong {
    color: var(--text-muted);
  }

  .design-mobile-bento {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(calc(100vw - 48px), calc(100vw - 48px));
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px 4px;
    scroll-snap-type: x mandatory;
    scroll-padding: 12px;
    scrollbar-width: none;
  }

  .design-mobile-bento::-webkit-scrollbar {
    display: none;
  }

  .grid-c-1,
  .grid-c-2 {
    display: grid;
    gap: 12px;
    align-content: start;
    scroll-snap-align: start;
  }

  .design-mobile-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    background: linear-gradient(180deg, rgba(12, 24, 36, 0.94), rgba(7, 16, 24, 0.92));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }

  :is(html.light, html[data-theme="day"]) .design-mobile-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 248, 252, 0.92));
    border-color: rgba(15, 76, 117, 0.10);
  }

  .design-mobile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .design-mobile-card-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7dd3fc;
  }

  .design-mobile-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .design-mobile-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--text-main);
  }

  .design-mobile-desc {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .design-mobile-pill-row,
  .design-mobile-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .design-mobile-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }

  .design-mobile-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .design-mobile-stat {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(125, 211, 252, 0.10);
  }

  .design-mobile-stat span {
    font-size: 10px;
    color: var(--text-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .design-mobile-stat strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
  }

  .design-mobile-model-list {
    display: grid;
    gap: 8px;
  }

  .design-mobile-model-btn,
  .design-mobile-energy-btn {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    text-align: left;
  }

  .design-mobile-model-btn:active,
  .design-mobile-energy-btn:active {
    transform: translateY(1px);
  }

  .design-mobile-model-code {
    font-size: 13px;
    font-weight: 800;
  }

  .design-mobile-model-size {
    font-size: 11px;
    color: var(--text-muted);
  }

  .design-mobile-energy-row {
    display: grid;
    gap: 8px;
  }

  .design-mobile-energy-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7dd3fc;
  }

  .design-mobile-preview {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(125, 211, 252, 0.10);
  }

  .design-mobile-preview img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
  }

  .design-mobile-fact-list {
    display: grid;
    gap: 8px;
  }

  .design-mobile-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(125, 211, 252, 0.10);
  }

  .design-mobile-fact span {
    font-size: 11px;
    color: var(--text-soft);
  }

  .design-mobile-fact strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    text-align: right;
  }

  .design-mobile-empty-line {
    color: var(--text-muted);
    font-size: 13px;
  }

  .grid-c-1 .resilience {
    min-height: 180px;
  }

  .grid-c-1 .growth {
    min-height: 160px;
  }

  .grid-c-1 .visioning {
    min-height: 234px;
  }

  .grid-c-2 .engagement {
    min-height: 210px;
  }

  .grid-c-2 .goal-orientation {
    min-height: 168px;
  }

  .grid-c-2 .self-belief {
    min-height: 190px;
  }

  .design-mobile-hero {
    grid-template-columns: 1fr;
  }

  .design-mobile-model-rail {
    grid-auto-columns: minmax(136px, 1fr);
  }

  .design-mobile-row-values {
    grid-auto-columns: minmax(116px, 1fr);
  }

  /* Legacy mobile hide rules kept for non-runtime flows; do not re-add bottom nav here. */
  .mobile-search-row,
  .mobile-compare-fab,
  .mobile-action-sheet,
  .mobile-sheet-backdrop,
  .mobile-compare-chip {
    display: none !important;
  }

  .app-main {
    padding: 4px 10px calc(var(--mobile-safe-bottom) + 18px);
  }

}


:is(html.light, html[data-theme="day"]) .app-header-actions .bravia-action-button {
  --header-control-bg: rgba(15, 118, 160, 0.08);
  color: #1b2a35 !important;
  box-shadow: none !important;
}

:is(html.light, html[data-theme="day"]) .app-header-actions .bravia-action-button:hover {
  --header-control-bg: rgba(15, 118, 160, 0.14);
  color: #102030 !important;
}

:is(html.light, html[data-theme="day"]) .main-tab,
:is(html.light, html[data-theme="day"]) .filter-btn,
:is(html.light, html[data-theme="day"]) .model-filter-btn {
  color: #23313c;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(18, 39, 56, 0.10);
  box-shadow: 0 4px 12px rgba(18, 39, 56, 0.04);
}

:is(html.light, html[data-theme="day"]) .main-tab:hover,
:is(html.light, html[data-theme="day"]) .filter-btn:hover,
:is(html.light, html[data-theme="day"]) .model-filter-btn:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(74, 144, 181, 0.22);
}

:is(html.light, html[data-theme="day"]) .main-tab.active,
:is(html.light, html[data-theme="day"]) .main-tab.is-active,
:is(html.light, html[data-theme="day"]) .main-tab[aria-selected="true"],
:is(html.light, html[data-theme="day"]) .filter-btn.active,
:is(html.light, html[data-theme="day"]) .filter-btn.is-active,
:is(html.light, html[data-theme="day"]) .filter-btn[aria-selected="true"] {
  color: #0f2532;
  background: linear-gradient(180deg, #f5fbff 0%, #dff1fb 100%);
  border-color: rgba(90, 156, 191, 0.34);
  box-shadow: 0 8px 20px rgba(90, 156, 191, 0.10);
}

:is(html.light, html[data-theme="day"]) .desktop-toolbar-separator.control-separator {
  background: rgba(18, 39, 56, 0.14);
}

:is(html.light, html[data-theme="day"]) .table-panel,
:is(html.light, html[data-theme="day"]) .matrix-panel,
:is(html.light, html[data-theme="day"]) #lineupTable,
:is(html.light, html[data-theme="day"]) .lineup-table,
:is(html.light, html[data-theme="day"]) .model-header-row {
  background: transparent;
}

:is(html.light, html[data-theme="day"]) #lineupTable th,
:is(html.light, html[data-theme="day"]) #lineupTable td {
  border-color: rgba(18, 39, 56, 0.08);
}

:is(html.light, html[data-theme="day"]) .model-header-cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,249,252,0.94)) !important;
  border-color: rgba(18, 39, 56, 0.08) !important;
}

:is(html.light, html[data-theme="day"]) .tv-image-frame img,
:is(html.light, html[data-theme="day"]) .tv-placeholder-img {
  filter: drop-shadow(0 10px 16px rgba(18,39,56,0.16));
}

:is(html.light, html[data-theme="day"]) .row-label-cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,250,0.96));
  color: #22313d;
  border-color: rgba(18, 39, 56, 0.08) !important;
}

:is(html.light, html[data-theme="day"]) #lineupTable tbody tr:hover .feature-cell,
:is(html.light, html[data-theme="day"]) #lineupTable tbody tr:hover .row-label-cell {
  background-color: rgba(229, 239, 246, 0.86);
}

:is(html.light, html[data-theme="day"]) .feature-cell .slot.boolean-slot,
:is(html.light, html[data-theme="day"]) .drop-slot.boolean-slot,
:is(html.light, html[data-theme="day"]) .slot.boolean-slot {
  background: rgba(244, 248, 251, 0.96);
  border-color: rgba(18, 39, 56, 0.08);
}

:is(html.light, html[data-theme="day"]) .mobile-search-field {
  background: rgba(255,255,255,0.88);
  border-color: rgba(18,39,56,0.08);
  box-shadow: 0 6px 16px rgba(18,39,56,0.04);
}

/* Desktop row labels: keep the technology icon and title as one centered unit. */
@media (min-width: 1025px) {
  :root {
    --row-label-width: 220px;
  }

  .row-label-cell {
    width: var(--row-label-width);
    min-width: var(--row-label-width);
    max-width: var(--row-label-width);
    padding-inline: 10px !important;
  }

  .row-label-inner {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: left;
  }

  .row-label-icon,
  .row-label-icon-mask {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .row-label-text {
    width: auto;
    max-width: calc(100% - 29px);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    text-align: left;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  :root {
    --row-label-width: 168px;
  }

  .row-label-text {
    font-size: 10px;
    white-space: normal;
  }
}


@media (min-width: 1025px) {
  .app-toolbar {
    width: auto;
    margin: 10px var(--page-x) 14px;
    padding: 12px 16px 10px;
    border: 1px solid rgba(125, 211, 252, 0.10);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(9, 28, 40, 0.82) 0%, rgba(7, 21, 30, 0.74) 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(16px);
  }

  .table-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-top: 0;
  }

  .table-scroll {
    border-radius: 22px;
    background: rgba(5, 19, 29, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  :is(html.light, html[data-theme="day"]) .app-toolbar {
    border-color: rgba(88, 129, 157, 0.10);
    background: linear-gradient(180deg, rgba(235, 243, 248, 0.94) 0%, rgba(228, 238, 244, 0.88) 100%);
    box-shadow: 0 12px 24px rgba(18, 39, 56, 0.05);
  }

  :is(html.light, html[data-theme="day"]) .table-scroll {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(18, 39, 56, 0.06);
    box-shadow: 0 10px 24px rgba(18, 39, 56, 0.04);
  }
}

@media (min-width: 1025px) {
  #appShell > section.app-toolbar.tool-tab-box > div.desktop-toolbar-row {
    border-bottom: none !important;
    box-shadow: none !important;
  }

  #saveStatus {
    display: none !important;
  }

  #tableScroll > section {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  #tableScroll > section::before,
  #tableScroll > section::after {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

.brand-title.pocket-guide-title {
  color: var(--pocket-guide-title-color) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: var(--pocket-guide-title-shadow) !important;
  transition: color 180ms ease, text-shadow 180ms ease;
  opacity: 1;
}

.bravia-logo-svg {
  background-color: var(--pg-logo-color) !important;
}

@media (min-width: 1025px) {
  .bravia-page #tableScroll,
  .bravia-page #tableScroll > section,
  .bravia-page .matrix-panel.table-panel,
  .bravia-page .design-series-content,
  .bravia-page .design-spec-section,
  .bravia-page .b2ii-table-card,
  :is(html.light, html[data-theme="day"]) .bravia-page .b2ii-table-card,
  :is(html.dark, html[data-theme="night"]) .bravia-page .b2ii-table-card,
  .bravia-page .b2ii-table-wrap,
  .bravia-page .spec-table-shell {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .bravia-page #tableScroll,
  .bravia-page .matrix-panel.table-panel,
  .bravia-page .b2ii-table-card,
  .bravia-page .b2ii-table-wrap,
  .bravia-page .spec-table-shell {
    border-radius: 0 !important;
  }

  .bravia-page .spec-table-shell {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bravia-page .spec-table-frame {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    background: rgba(5, 20, 30, 0.96) !important;
    box-shadow: none !important;
    outline: none !important;
    isolation: isolate !important;
  }

  .bravia-page .spec-table-scroller {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
    max-height: min(72vh, 760px) !important;
    border-radius: inherit !important;
    background: rgba(5, 20, 30, 0.98) !important;
    overscroll-behavior: contain !important;
  }

  .bravia-page #tableScroll > section::before,
  .bravia-page #tableScroll > section::after,
  .bravia-page .b2ii-table-card::before,
  .bravia-page .b2ii-table-card::after,
  .bravia-page .b2ii-table-wrap::before,
  .bravia-page .b2ii-table-wrap::after,
  .bravia-page .spec-table-shell::before,
  .bravia-page .spec-table-shell::after,
  .bravia-page .spec-table-scroller::before,
  .bravia-page .spec-table-scroller::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #tableScroll,
  #tableScroll > section,
  .b2ii-table-card,
  .b2ii-table-wrap,
  .spec-table-shell,
  .spec-table-scroller,
  .design-series-content,
  .design-spec-section {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #tableScroll,
  .b2ii-table-card,
  .b2ii-table-wrap,
  .spec-table-shell {
    border-radius: 0 !important;
  }

  #tableScroll > section::before,
  #tableScroll > section::after,
  .b2ii-table-card::before,
  .b2ii-table-card::after,
  .b2ii-table-wrap::before,
  .b2ii-table-wrap::after,
  .spec-table-shell::before,
  .spec-table-shell::after,
  .spec-table-scroller::before,
  .spec-table-scroller::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .spec-table {
    width: max(100%, 1280px) !important;
    min-width: 1280px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .bravia-page .b2ii-table.spec-table {
    min-width: 1280px !important;
  }

  .bravia-page .spec-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }

  .bravia-page .spec-table thead th {
    position: sticky;
    top: 0;
    z-index: 51;
    background: linear-gradient(180deg, rgba(76, 103, 130, 0.98) 0%, rgba(58, 82, 105, 0.98) 100%) !important;
    background-clip: padding-box;
  }

  .bravia-page .spec-table tbody th,
  .bravia-page .spec-table tbody td {
    position: relative;
    z-index: 1;
  }

  .bravia-page .spec-table th:first-child,
  .bravia-page .spec-table td:first-child,
  .bravia-page .spec-table tbody .b2ii-sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    background: linear-gradient(180deg, rgba(116, 137, 155, 0.99) 0%, rgba(99, 121, 141, 0.99) 100%) !important;
    background-clip: padding-box;
  }

  .bravia-page .spec-table thead .b2ii-sticky-col {
    left: 0 !important;
    z-index: 80 !important;
    background: linear-gradient(180deg, rgba(76, 103, 130, 0.99) 0%, rgba(58, 82, 105, 0.99) 100%) !important;
  }

  .bravia-page .spec-table-frame::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 14px !important;
    height: 2px !important;
    z-index: 100 !important;
    background: linear-gradient(180deg, rgba(76, 103, 130, 0.99) 0%, rgba(58, 82, 105, 0.99) 100%) !important;
    pointer-events: none !important;
  }

  .bravia-page .spec-table thead tr:first-child th:first-child {
    border-top-left-radius: 21px !important;
  }

  .bravia-page .spec-table thead tr:first-child th:last-child {
    border-top-right-radius: 21px !important;
  }

  .bravia-page .spec-table tbody tr:last-child th:first-child,
  .bravia-page .spec-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 21px !important;
  }

  .bravia-page .spec-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 21px !important;
  }

  :is(html.light, html[data-theme="day"]) .spec-table {
    background: transparent !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table-frame {
    border-color: rgba(18, 39, 56, 0.12) !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table thead th {
    background: linear-gradient(180deg, rgba(76, 103, 130, 0.98) 0%, rgba(58, 82, 105, 0.98) 100%) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table tbody .b2ii-sticky-col {
    background: linear-gradient(180deg, rgba(116, 137, 155, 0.98) 0%, rgba(99, 121, 141, 0.98) 100%) !important;
  }

  .design-energy-label-rail,
  .design-energy-label-cell,
  .design-energy-label-cell--empty {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

@media (min-width: 1025px) {
  .bravia-page section.matrix-panel.table-panel {
    border-radius: 24px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
  }

  .bravia-page section.matrix-panel.table-panel > * {
    border-radius: inherit !important;
  }

  .bravia-page section.matrix-panel.table-panel::before,
  .bravia-page section.matrix-panel.table-panel::after {
    border-radius: inherit !important;
  }

  .bravia-page .spec-table-frame {
    border-radius: 24px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
  }

  .bravia-page .spec-table-scroller {
    border-radius: inherit !important;
    overflow: auto !important;
    background-clip: padding-box !important;
  }

  .bravia-page .spec-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .bravia-page .spec-table thead tr:first-child th:first-child {
    border-top-left-radius: 23px !important;
  }

  .bravia-page .spec-table thead tr:first-child th:last-child {
    border-top-right-radius: 23px !important;
  }

  .bravia-page .spec-table tbody tr:last-child th:first-child,
  .bravia-page .spec-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 23px !important;
  }

  .bravia-page .spec-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 23px !important;
  }
}

@media (min-width: 1025px) {
  .bravia-page .model-header-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: #203545 !important;
    background-image: none !important;
    isolation: isolate !important;
  }

  .bravia-page .model-header-cell {
    position: sticky !important;
    top: 0 !important;
    z-index: 81 !important;
    background: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    background-color: #203545 !important;
    background-image: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    background-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    background-clip: padding-box !important;
  }

  .bravia-page .corner-cell {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 100 !important;
    background: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    background-color: #343434 !important;
    background-image: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    background-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  .bravia-page .model-header-cell *,
  .bravia-page .corner-cell * {
    opacity: 1 !important;
  }

  .bravia-page .spec-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: #203545 !important;
    background-image: none !important;
    isolation: isolate !important;
  }

  .bravia-page .spec-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 81 !important;
    background: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    background-color: #203545 !important;
    background-image: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    background-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    background-clip: padding-box !important;
  }

  .bravia-page .spec-table thead th:first-child {
    left: 0 !important;
    z-index: 100 !important;
    background: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    background-color: #343434 !important;
    background-image: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  .bravia-page .spec-table thead th * {
    opacity: 1 !important;
  }

  .bravia-page .spec-table-frame {
    overflow: hidden !important;
    isolation: isolate !important;
  }

  .bravia-page .spec-table-scroller,
  .bravia-page .table-scroll {
    background: #061824 !important;
  }

  .bravia-page .table-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    isolation: isolate !important;
  }
}

@media (min-width: 1025px) {
  :is(html.dark, html[data-theme="night"]) .bravia-page .model-header-row {
    background: #203545 !important;
    background-image: none !important;
  }

  :is(html.dark, html[data-theme="night"]) .bravia-page .model-header-cell {
    background: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    background-color: #203545 !important;
    background-image: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  :is(html.dark, html[data-theme="night"]) .bravia-page .corner-cell {
    background: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    background-color: #343434 !important;
    background-image: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  :is(html.dark, html[data-theme="night"]) .bravia-page .spec-table thead {
    background: #203545 !important;
    background-image: none !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .model-header-row {
    background: #f2f7fb !important;
    background-image: none !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .model-header-cell {
    background: linear-gradient(180deg, #fbfdff 0%, #eef4f8 100%) !important;
    background-color: #f4f8fb !important;
    background-image: linear-gradient(180deg, #fbfdff 0%, #eef4f8 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .corner-cell {
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%) !important;
    background-color: #f7fafc !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table thead {
    background: #f2f7fb !important;
    background-image: none !important;
  }

  :is(html.dark, html[data-theme="night"]) .bravia-page .spec-table thead th,
  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table thead th {
    background: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    background-color: #203545 !important;
    background-image: linear-gradient(180deg, #29465d 0%, #1f3445 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  :is(html.dark, html[data-theme="night"]) .bravia-page .spec-table thead th:first-child,
  :is(html.light, html[data-theme="day"]) .bravia-page .spec-table thead th:first-child {
    background: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    background-color: #343434 !important;
    background-image: linear-gradient(180deg, #3c3c3c 0%, #303030 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1024px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body {
    position: static !important;
  }

  .app-shell,
  .bravia-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .app-main,
  #mainLayout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom) + 28px) !important;
  }

  .matrix-panel,
  .matrix-panel.table-panel,
  #tableScroll,
  #tableScroll > section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-card-view,
  #mobileCardView {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
    padding-bottom: 12px !important;
  }

  .mobile-overview-grid,
  .mobile-model-cards,
  .mobile-feature-list {
    overflow: visible !important;
  }

  .mobile-model-card,
  .mobile-spec-card {
    overflow: visible !important;
  }

  .mobile-model-header {
    position: relative !important;
    top: auto !important;
  }

  .mobile-bottom-nav {
    position: fixed;
  }

  .mobile-drawer[aria-hidden="true"] {
    pointer-events: none !important;
  }

  .mobile-drawer[aria-hidden="false"] {
    pointer-events: auto !important;
  }

  .mobile-drawer {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .mobile-drawer-header {
    flex: 0 0 auto !important;
  }

  #mobileDrawerContent,
  .mobile-drawer-sections,
  .mobile-drawer-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--mobile-safe-top) - 24px) !important;
  }

  #mobileDrawerContent,
  .mobile-drawer-sections {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(var(--mobile-safe-bottom) + 10px) !important;
  }

  .mobile-drawer-shell {
    overflow: visible !important;
  }

  .mobile-drawer-model-list {
    overflow: visible !important;
  }
}

/* MOBILE <=1024 */
/* Final mobile runtime overrides: keep these as the authoritative mobile reference layer. */
@media (max-width: 1024px) {
  /* Mobile header */
  .app-header {
    margin: 0 12px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 28px;
    border-color: var(--bravia-mobile-border);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 88%, var(--bravia-mobile-bg))
    );
    box-shadow: 0 18px 44px var(--bravia-mobile-shadow);
    backdrop-filter: blur(18px);
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  /* Mobile filters and tabs */
  .app-toolbar {
    margin: 10px 12px 0;
    padding: 10px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 28px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 90%, var(--bravia-mobile-bg))
    );
    box-shadow: 0 18px 40px var(--bravia-mobile-shadow);
    backdrop-filter: blur(18px);
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    display: grid;
    gap: 10px;
    overflow: hidden;
  }

  .mobile-search-row {
    display: none !important;
    margin: 0 !important;
  }

  .mobile-search-field {
    display: none !important;
  }

  .mobile-search-input {
    pointer-events: none;
  }

  .desktop-toolbar-row {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
  }

  .toolbar-cluster,
  .desktop-toolbar-group,
  .main-tabs-row,
  .toolbar-filter-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible !important;
  }

  .desktop-toolbar-separator {
    display: none !important;
  }

  .main-tabs,
  .row-group-filters,
  .mobile-model-filters {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 22px;
    background: var(--bravia-mobile-ghost-bg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
    box-sizing: border-box;
    overflow: visible !important;
  }

  .main-tabs,
  .row-group-filters {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }

  .row-group-filters:empty {
    display: none !important;
  }

  .mobile-model-filter-row,
  .mobile-model-filter-row:not([hidden]) {
    display: none !important;
    width: 100%;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .mobile-model-filters {
    display: none !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .main-tab,
  .row-filter-btn,
  .mobile-model-filters .model-tab {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px;
    height: auto !important;
    justify-content: center;
    padding: 9px 8px !important;
    border-radius: 16px !important;
    text-align: center;
    white-space: normal !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .main-tab,
  .row-filter-btn,
  .mobile-model-filters .model-tab,
  .mobile-bottom-nav-btn,
  .mobile-drawer-tab-btn,
  .mobile-drawer-model-btn,
  .mobile-drawer-action-btn {
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  /* Active pill state */
  .main-tab.active,
  .main-tab.is-active,
  .main-tab[aria-selected="true"],
  .row-filter-btn.active,
  .row-filter-btn.is-active,
  .row-filter-btn[aria-pressed="true"],
  .mobile-model-filters .model-tab.active,
  .mobile-model-filters .model-tab[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(124, 106, 255, 0.22);
  }

  /* Mobile cards */
  .mobile-card-view {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 4px 0 calc(var(--mobile-safe-bottom) + 18px);
    overflow-x: hidden;
  }

  .mobile-pagination {
    display: flex;
    position: relative;
    z-index: 20;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 calc(var(--mobile-safe-bottom) + 24px);
    padding: 0 8px;
  }

  .mobile-pagination-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 92%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent);
    color: var(--bravia-mobile-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
    font-size: 13px;
    font-weight: 800;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
  }

  .mobile-pagination-node svg,
  .mobile-pagination-node span[aria-hidden="true"] {
    pointer-events: none;
  }

  .mobile-pagination-node:is(:hover, :focus-visible):not(.is-active):not(.is-disabled):not(.is-dots) {
    border-color: color-mix(in srgb, var(--bravia-mobile-primary) 30%, var(--bravia-mobile-border));
    background: color-mix(in srgb, var(--bravia-mobile-surface) 88%, var(--bravia-mobile-bg));
    transform: translateY(-1px);
  }

  .mobile-pagination-node:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bravia-mobile-primary) 72%, #fff);
    outline-offset: 2px;
  }

  .mobile-pagination-node.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent));
    color: #fff;
    box-shadow: 0 10px 22px rgba(124, 106, 255, 0.24);
  }

  .mobile-pagination-node.is-disabled {
    opacity: 0.42;
    cursor: not-allowed;
  }

  .mobile-pagination-node.is-dots {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    width: 24px;
  }

  .mobile-card-page-enter {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    animation: braviaMobileCardFadeInUp 320ms ease forwards;
    animation-delay: var(--mobile-card-enter-delay, 0ms);
    will-change: transform, opacity;
  }

  .mobile-search-empty {
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 84%, transparent);
    border-radius: 22px;
    padding: 18px 16px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 90%, var(--bravia-mobile-bg));
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    text-align: center;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
  }

  .mobile-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
    gap: 14px;
  }

  .mobile-overview-card,
  .mobile-model-card {
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 28px;
    border-color: var(--bravia-mobile-border);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 98%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 90%, var(--bravia-mobile-bg))
    );
    box-shadow: 0 20px 40px var(--bravia-mobile-shadow);
    overflow: hidden;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    position: relative;
  }

  .mobile-overview-card::before,
  .mobile-model-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--mobile-model-accent, var(--bravia-mobile-primary)), var(--mobile-model-accent-soft, var(--bravia-mobile-accent)));
    opacity: 0.95;
  }

  .mobile-overview-card {
    padding: 12px;
    gap: 12px;
    box-shadow:
      0 20px 40px var(--bravia-mobile-shadow),
      inset 0 1px 0 color-mix(in srgb, var(--mobile-model-accent-soft, #fff) 18%, transparent);
  }

  .overview-tv-image-wrap {
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 82%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 100%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 84%, var(--bravia-mobile-bg))
    );
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
    position: relative;
  }

  .overview-meta {
    gap: 4px;
  }

  .mobile-model-cards {
    display: grid;
    gap: 14px;
    padding: 0 14px 14px;
  }

  .mobile-spec-card {
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 88%, transparent);
    border-radius: 22px;
    padding: 14px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 88%, var(--bravia-mobile-bg));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
      0 12px 24px color-mix(in srgb, var(--bravia-mobile-shadow) 78%, transparent);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .mobile-spec-card-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 82%, transparent);
  }

  .mobile-spec-card-title {
    color: var(--bravia-mobile-text);
  }

  .mobile-spec-card-count {
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 72%, transparent);
    background: var(--bravia-mobile-ghost-bg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  }

  .mobile-feature-list {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 0;
  }

  .mobile-spec-row,
  .mobile-feature-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 78%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 82%, var(--bravia-mobile-bg));
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .mobile-feature-label,
  .mobile-slot-stack,
  .mobile-spec-label,
  .mobile-spec-value,
  .series-value-cell,
  .series-value-main,
  .series-value-line,
  .slot {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-feature-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.35;
  }

  .mobile-slot-stack {
    display: grid;
    gap: 8px;
    width: 100%;
    justify-items: start;
    line-height: 1.4;
  }

  .mobile-model-header {
    padding: 14px;
    gap: 12px;
    border-bottom-color: var(--bravia-mobile-border);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--mobile-model-accent-soft, var(--bravia-mobile-surface)) 28%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 88%, var(--bravia-mobile-bg))
    );
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  }

  .mobile-model-header img {
    filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--bravia-mobile-shadow) 84%, transparent));
  }

  .mobile-design-section,
  .mobile-design-section * {
    box-sizing: border-box;
    min-width: 0;
  }

  .mobile-design-section {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 14px;
    padding: 0;
    overflow-x: hidden;
  }

  .mobile-design-section .design-mobile-series-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 0 12px 2px;
    overflow: visible;
  }

  .mobile-design-section .design-mobile-series-switch .b2ii-series-btn {
    flex: 1 1 calc(50% - 8px);
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 42px;
    white-space: normal;
    line-height: 1.2;
  }

  .mobile-design-model-list {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 14px;
    padding: 0 12px 12px;
    overflow-x: hidden;
  }

  .mobile-design-model {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-shadow:
      0 20px 40px var(--bravia-mobile-shadow),
      inset 0 1px 0 color-mix(in srgb, var(--mobile-model-accent-soft, #fff) 20%, transparent);
  }

  .mobile-design-model-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 16px 16px 14px;
  }

  .mobile-design-model-header-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .mobile-design-model-eyebrow,
  .mobile-design-model-meta {
    margin: 0;
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-design-model-title {
    margin: 0;
    color: var(--bravia-mobile-text);
    font-size: 20px;
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-design-model-meta {
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-design-card-list {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 12px;
    overflow-x: hidden;
  }

  .mobile-design-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--bravia-mobile-border) 88%, transparent);
  }

  .mobile-design-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-design-image-frame {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 156px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 82%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 82%, var(--bravia-mobile-bg));
    overflow: hidden;
  }

  .mobile-design-image-button {
    appearance: none;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .mobile-design-image-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bravia-mobile-primary) 72%, #fff);
    outline-offset: 4px;
    border-radius: 14px;
  }

  .mobile-design-image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--bravia-mobile-shadow) 78%, transparent));
  }

  .mobile-design-image-empty,
  .mobile-design-image-fallback {
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .mobile-design-image-fallback {
    display: none;
  }

  .mobile-design-image-button.is-image-missing .mobile-design-image-fallback {
    display: block;
  }

  .mobile-design-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .mobile-design-table tbody {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .mobile-design-spec-row {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    row-gap: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 80%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 84%, var(--bravia-mobile-bg));
    overflow: hidden;
    box-sizing: border-box;
  }

  .mobile-design-spec-label,
  .mobile-design-spec-value {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-design-spec-label {
    color: var(--bravia-mobile-text-soft, var(--text-soft)) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    line-height: 1.3 !important;
    text-transform: uppercase;
  }

  .mobile-design-spec-value {
    color: var(--bravia-mobile-text) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  .mobile-design-spec-row.is-muted .mobile-design-spec-value {
    color: var(--bravia-mobile-text-soft, var(--text-soft)) !important;
  }

  .mobile-design-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
  }

  .mobile-design-action {
    width: auto;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(html.light, html[data-theme="day"]) .mobile-design-image-frame,
  :is(html.light, html[data-theme="day"]) .mobile-design-spec-row {
    background: color-mix(in srgb, var(--bravia-mobile-surface) 94%, #fff);
  }

  :is(html.light, html[data-theme="day"]) .mobile-design-model-title,
  :is(html.light, html[data-theme="day"]) .mobile-design-spec-value {
    color: #102030 !important;
  }

  :is(html.light, html[data-theme="day"]) .mobile-design-model-eyebrow,
  :is(html.light, html[data-theme="day"]) .mobile-design-model-meta,
  :is(html.light, html[data-theme="day"]) .mobile-design-spec-label,
  :is(html.light, html[data-theme="day"]) .mobile-design-image-empty,
  :is(html.light, html[data-theme="day"]) .mobile-design-image-fallback {
    color: #475569 !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  .app-main,
  #mainLayout {
    padding-bottom: calc(var(--mobile-safe-bottom) + 24px) !important;
    overflow-x: hidden !important;
  }

  .matrix-panel.table-panel,
  .mobile-card-view,
  #mobileCardView,
  .mobile-overview-grid,
  .mobile-model-card,
  .mobile-spec-card,
  .mobile-spec-row,
  .mobile-feature-row,
  .mobile-design-card,
  .mobile-design-table,
  .mobile-drawer,
  #mobileDrawerContent,
  .mobile-drawer-shell,
  .mobile-drawer-section,
  .mobile-drawer-tab-list,
  .mobile-drawer-model-list,
  .mobile-drawer-action-grid,
  .mobile-drawer-tab-btn,
  .mobile-drawer-model-btn,
  .mobile-drawer-action-btn {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .app-header,
  .app-toolbar {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }

  .mobile-model-filter-row {
    max-width: 100%;
    contain: paint;
  }

  /* Mobile bottom nav */
  .mobile-bottom-nav {
    display: none !important;
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(var(--mobile-safe-bottom) + 10px);
    z-index: 45;
    width: min(94vw, 560px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    transform: translateX(-50%);
    border-color: var(--bravia-mobile-border);
    border-radius: 26px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent),
      color-mix(in srgb, var(--bravia-mobile-surface) 90%, var(--bravia-mobile-bg))
    );
    box-shadow: 0 18px 38px var(--bravia-mobile-shadow);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav-btn {
    border-radius: 18px;
  }

  /* Mobile drawer */
  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: color-mix(in srgb, #02070d 72%, transparent);
    backdrop-filter: blur(4px);
  }

  .mobile-nav-overlay[hidden] {
    display: none !important;
  }

  .mobile-drawer {
    position: fixed !important;
    inset: calc(var(--mobile-safe-top) + 10px) auto calc(var(--mobile-safe-bottom) + 10px) 10px !important;
    z-index: 80;
    display: flex !important;
    flex-direction: column !important;
    width: min(88vw, 360px);
    max-width: calc(100vw - 20px);
    min-width: 0;
    border: 1px solid var(--bravia-mobile-border);
    border-radius: 28px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bravia-mobile-surface) 98%, var(--bravia-mobile-bg)),
      color-mix(in srgb, var(--bravia-mobile-surface) 90%, var(--bravia-mobile-bg))
    );
    box-shadow: 22px 0 54px color-mix(in srgb, var(--bravia-mobile-shadow) 90%, transparent);
    box-sizing: border-box;
    overflow: hidden !important;
    transform: translateX(calc(-100% - 24px));
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease, background 180ms ease, border-color 180ms ease;
  }

  .mobile-drawer[hidden] {
    display: none !important;
  }

  .mobile-drawer[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto !important;
  }

  .mobile-drawer[aria-hidden="true"] {
    pointer-events: none !important;
  }

  .mobile-drawer-header {
    display: flex;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 12px 0;
  }

  .mobile-drawer-expand-btn {
    display: none !important;
  }

  .mobile-drawer-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 78%, transparent) !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    color: var(--bravia-mobile-text) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
  }

  .mobile-drawer-close::before {
    content: "×";
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
  }

  #mobileDrawerContent {
    display: block;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 12px 14px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-shell,
  .mobile-drawer-sections {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 16px;
    overflow-x: hidden !important;
  }

  .mobile-drawer-shell {
    display: grid;
    max-height: none !important;
  }

  .mobile-drawer-section {
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 84%, transparent);
    border-radius: 22px;
    padding: 14px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 88%, var(--bravia-mobile-bg));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
    display: grid;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .mobile-drawer-section-head {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-drawer-section-kicker {
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-drawer-section-title {
    color: var(--bravia-mobile-text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .mobile-drawer-tab-list,
  .mobile-drawer-model-list,
  .mobile-drawer-action-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    overflow-x: hidden !important;
  }

  .mobile-drawer-tab-list,
  .mobile-drawer-model-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-drawer-current {
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 72%, transparent);
    border-radius: 18px;
    padding: 10px 12px;
    background: var(--bravia-mobile-ghost-bg);
    color: var(--bravia-mobile-text);
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-drawer-current span {
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }

  .mobile-drawer-current strong {
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .mobile-drawer-tab-btn,
  .mobile-drawer-model-btn,
  .mobile-drawer-action-btn {
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 76%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 78%, var(--bravia-mobile-bg));
    color: var(--bravia-mobile-text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    box-sizing: border-box;
  }

  .mobile-drawer-tab-btn,
  .mobile-drawer-action-btn {
    display: grid;
    gap: 4px;
    align-content: center;
    padding: 10px 11px;
    text-align: left;
  }

  .mobile-drawer-model-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    text-align: left;
  }

  .mobile-drawer-item-title,
  .mobile-drawer-action-title,
  .mobile-drawer-model-main strong {
    display: block;
    color: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-drawer-item-desc,
  .mobile-drawer-action-desc,
  .mobile-drawer-model-main span {
    display: block;
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-drawer-model-main {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-drawer-model-chev {
    flex: 0 0 auto;
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    font-size: 18px;
    line-height: 1;
  }

  .mobile-drawer-tab-btn.is-active,
  .mobile-drawer-model-btn.is-active,
  .mobile-drawer-action-btn.is-active {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent)) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(124, 106, 255, 0.22);
  }

  .mobile-drawer-tab-btn.is-active .mobile-drawer-item-desc,
  .mobile-drawer-model-btn.is-active .mobile-drawer-model-main span,
  .mobile-drawer-action-btn.is-active .mobile-drawer-action-desc {
    color: rgba(255, 255, 255, 0.86);
  }

  :is(html.light, html[data-theme="day"]) .mobile-drawer-section,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-tab-btn,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-model-btn,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-action-btn,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-current {
    background: color-mix(in srgb, var(--bravia-mobile-surface) 94%, #fff);
  }

  :is(html.light, html[data-theme="day"]) .mobile-drawer-section-title,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-current strong,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-item-title,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-action-title,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-model-main strong {
    color: #102030;
  }

  :is(html.light, html[data-theme="day"]) .mobile-drawer-section-kicker,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-current span,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-item-desc,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-action-desc,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-model-main span {
    color: #475569;
  }

  :is(html.light, html[data-theme="day"]) .mobile-drawer-tab-btn.is-active .mobile-drawer-item-title,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-model-btn.is-active .mobile-drawer-model-main strong,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-action-btn.is-active .mobile-drawer-action-title {
    color: #fff;
  }

  :is(html.light, html[data-theme="day"]) .mobile-drawer-tab-btn.is-active .mobile-drawer-item-desc,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-model-btn.is-active .mobile-drawer-model-main span,
  :is(html.light, html[data-theme="day"]) .mobile-drawer-action-btn.is-active .mobile-drawer-action-desc {
    color: rgba(255, 255, 255, 0.86);
  }

  /* Shared mobile active accents */
  .mobile-bottom-nav-btn.is-active,
  .mobile-compare-chip.is-active,
  .mobile-drawer-tab-btn.is-active,
  .mobile-drawer-model-btn.is-active,
  .mobile-drawer-action-btn.is-active,
  .mobile-compare-fab,
  .mobile-sheet-primary-btn {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent)) !important;
    color: #fff !important;
  }

  /* Mobile drawer */
}

@keyframes braviaMobileCardFadeInUp {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-pagination-node,
  .mobile-card-page-enter {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


.model-header-row {
  position: relative;
  isolation: isolate;
}

.model-header-cell,
.corner-cell {
  background-clip: padding-box;
}

.model-header-cell {
  z-index: 26;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 10px 18px rgba(0, 0, 0, 0.18);
}

.corner-cell {
  z-index: 32;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 10px 18px rgba(0, 0, 0, 0.22);
}

.model-header-cell::after,
.corner-cell::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -10px;
  height: 12px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, rgba(37, 56, 72, 0.96) 0%, rgba(8, 22, 33, 0.94) 100%);
  border-bottom: 1px solid rgba(125, 211, 252, 0.10);
}

.model-header-content {
  position: relative;
  z-index: 3;
}

:is(html.dark, html[data-theme="night"]) .model-header-cell {
  background: linear-gradient(180deg, rgba(43, 63, 82, 0.98) 0%, rgba(34, 49, 65, 0.98) 100%) !important;
  border-color: rgba(125, 211, 252, 0.10) !important;
}

:is(html.dark, html[data-theme="night"]) .corner-cell {
  background: linear-gradient(180deg, rgba(62, 62, 62, 0.98) 0%, rgba(48, 48, 48, 0.98) 100%) !important;
}

:is(html.light, html[data-theme="day"]) .model-header-cell {
  background: linear-gradient(180deg, rgba(247, 251, 254, 0.98) 0%, rgba(236, 243, 248, 0.98) 100%) !important;
  border-color: rgba(18, 39, 56, 0.11) !important;
  box-shadow:
    inset 0 -1px 0 rgba(18,39,56,0.06),
    0 10px 18px rgba(18, 39, 56, 0.08);
}

:is(html.light, html[data-theme="day"]) .corner-cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(242,247,250,0.98) 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(18,39,56,0.06),
    0 10px 18px rgba(18, 39, 56, 0.08);
}

:is(html.light, html[data-theme="day"]) .model-header-cell::after,
:is(html.light, html[data-theme="day"]) .corner-cell::after {
  background: linear-gradient(180deg, rgba(243, 248, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
  border-bottom-color: rgba(18, 39, 56, 0.08);
}

:is(html.light, html[data-theme="day"]) .tv-model-name {
  color: #162532;
}

:is(html.light, html[data-theme="day"]) .tv-model-sizes {
  color: #516170;
}

:is(html.dark, html[data-theme="night"]) .tv-model-name {
  color: #f8fafc;
}

:is(html.dark, html[data-theme="night"]) .tv-model-sizes {
  color: #d2dbe6;
}

/* Authoritative iPhone presentation: compact, vertically scrollable, and low-chrome. */
@media (max-width: 1024px) {
  .bravia-page {
    --bravia-mobile-bg: #000000;
    --bravia-mobile-surface: #1c1c1e;
    --bravia-mobile-surface-secondary: #2c2c2e;
    --bravia-mobile-primary: #0a84ff;
    --bravia-mobile-accent: #64d2ff;
    --bravia-mobile-text: #f5f5f7;
    --bravia-mobile-muted: #98989d;
    --bravia-mobile-border: rgba(255, 255, 255, 0.09);
    --bravia-mobile-shadow: rgba(0, 0, 0, 0.28);
    --bravia-mobile-ghost-bg: rgba(255, 255, 255, 0.06);
    background: var(--bravia-mobile-bg) !important;
    color: var(--bravia-mobile-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page {
    --bravia-mobile-bg: #f2f2f7;
    --bravia-mobile-surface: #ffffff;
    --bravia-mobile-surface-secondary: #f2f2f7;
    --bravia-mobile-primary: #007aff;
    --bravia-mobile-accent: #5ac8fa;
    --bravia-mobile-text: #1c1c1e;
    --bravia-mobile-muted: #6e6e73;
    --bravia-mobile-border: rgba(60, 60, 67, 0.12);
    --bravia-mobile-shadow: rgba(60, 60, 67, 0.10);
    --bravia-mobile-ghost-bg: rgba(118, 118, 128, 0.10);
    background: var(--bravia-mobile-bg) !important;
  }

  body,
  .app-shell,
  .bravia-page {
    background: var(--bravia-mobile-bg) !important;
  }

  .app-shell {
    display: block !important;
  }

  .app-header {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 6px 10px 0 !important;
    padding: calc(var(--mobile-safe-top) + 4px) 8px 4px !important;
    border: 1px solid color-mix(in srgb, #7dd3fc 48%, transparent) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 94%, transparent) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
    backdrop-filter: blur(20px) saturate(150%);
  }

  .mobile-menu-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    box-shadow: none !important;
  }

  .brand-title {
    color: var(--bravia-mobile-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    text-shadow: none !important;
  }

  .bravia-page .app-header .brand-title,
  .bravia-page .app-header .pocket-guide-title {
    color: var(--bravia-mobile-text) !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  .mobile-menu-btn,
  .mobile-menu-btn .toolbar-icon-mask {
    color: var(--bravia-mobile-text) !important;
  }

  .app-toolbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 6px 10px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--pg-action-bg) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .bravia-page .mobile-drawer .mobile-drawer-section {
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-drawer .mobile-drawer-section--actions {
    border-bottom: 0 !important;
  }

  .desktop-toolbar-row {
    display: grid !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .main-tabs,
  .row-group-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
  }

  .main-tab,
  .row-filter-btn {
    min-height: 36px !important;
    padding: 8px 5px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bravia-mobile-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .main-tab.active,
  .main-tab.is-active,
  .main-tab[aria-selected="true"],
  .row-filter-btn.active,
  .row-filter-btn.is-active,
  .row-filter-btn[aria-pressed="true"] {
    background: var(--bravia-mobile-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .save-status,
  .mobile-pagination {
    display: none !important;
  }

  .app-main,
  #mainLayout {
    padding: 10px 10px calc(var(--mobile-safe-bottom) + 24px) !important;
    overflow-x: hidden !important;
  }

  .matrix-panel.table-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-card-view,
  #mobileCardView {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .mobile-overview-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .mobile-overview-card {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 92px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
    text-align: left !important;
  }

  .mobile-overview-card::before,
  .mobile-model-card--full::before,
  .mobile-design-model::before {
    display: none !important;
  }

  .overview-tv-image-wrap {
    width: 108px !important;
    min-height: 68px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-surface-secondary) !important;
    box-shadow: none !important;
  }

  .overview-tv-image-wrap img {
    width: 96px !important;
    height: 58px !important;
  }

  .overview-meta {
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .overview-model-code {
    color: var(--bravia-mobile-muted) !important;
    font-size: 11px !important;
    letter-spacing: 0.04em;
  }

  .overview-model-name {
    color: var(--bravia-mobile-text) !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .overview-model-sizes {
    color: var(--bravia-mobile-muted) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .mobile-model-card--full {
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .mobile-model-card--full > .mobile-model-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
  }

  .mobile-model-card--full > .mobile-model-header img {
    width: 90px !important;
    height: 58px !important;
  }

  .mobile-model-cards {
    display: grid !important;
    gap: 22px !important;
    width: 100% !important;
    padding: 18px 0 0 !important;
  }

  .mobile-spec-card {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .mobile-spec-card-head {
    margin: 0 !important;
    padding: 0 4px 8px !important;
    border: 0 !important;
  }

  .mobile-spec-card-title {
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }

  .mobile-spec-card-count {
    border: 0 !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: none !important;
  }

  .mobile-feature-list {
    display: grid !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
    overflow: hidden !important;
  }

  .mobile-spec-row,
  .mobile-feature-row {
    display: grid !important;
    grid-template-columns: minmax(116px, 0.88fr) minmax(0, 1.12fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .mobile-feature-row:last-child {
    border-bottom: 0 !important;
  }

  .mobile-feature-label {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--bravia-mobile-muted) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }

  .mobile-feature-icon-dot {
    width: 6px !important;
    height: 6px !important;
    justify-self: center;
    background: var(--bravia-mobile-primary) !important;
    box-shadow: none !important;
  }

  .mobile-slot-stack,
  .feature-boolean-cell,
  .audio-speaker-cell,
  .audio-power-cell,
  .audio-format-cell,
  .series-value-cell,
  .no-feature-mark,
  .series-value-empty,
  .audio-speaker-empty,
  .audio-power-empty {
    justify-items: end !important;
    text-align: right !important;
    color: var(--bravia-mobile-text) !important;
  }

  .mobile-feature-row .drop-slot,
  .mobile-feature-row .slot,
  .mobile-feature-row .boolean-slot {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bravia-mobile-text) !important;
    text-align: right !important;
  }

  .mobile-feature-row .feature-yes {
    color: var(--bravia-mobile-primary) !important;
    font-size: 18px !important;
  }

  .mobile-design-section {
    gap: 16px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .mobile-design-section .design-mobile-series-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .mobile-design-section .design-series-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
    color: var(--bravia-mobile-text) !important;
  }

  .mobile-design-section .design-series-tab.active,
  .mobile-design-section .design-series-tab.is-active {
    background: var(--bravia-mobile-primary) !important;
    color: #fff !important;
  }

  .mobile-design-model-list {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .mobile-design-model {
    width: 100% !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 3px var(--bravia-mobile-shadow) !important;
    overflow: hidden !important;
  }

  .mobile-design-model-header {
    display: block !important;
    padding: 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  .mobile-design-model-header-copy {
    justify-items: center !important;
    text-align: center !important;
  }

  .mobile-design-card-body {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px 14px 14px !important;
  }

  .mobile-design-spec-section {
    min-width: 0 !important;
  }

  .mobile-design-image-frame {
    min-height: 140px !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-surface-secondary) !important;
  }

  .mobile-design-table {
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-surface-secondary) !important;
    overflow: hidden !important;
  }

  .mobile-design-table tbody {
    display: block !important;
  }

  .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: minmax(118px, 0.9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .mobile-design-spec-row:last-child {
    border-bottom: 0 !important;
  }

  .mobile-design-spec-label {
    color: var(--bravia-mobile-muted) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    text-align: left !important;
  }

  .mobile-design-spec-value {
    color: var(--bravia-mobile-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    text-align: right !important;
  }

  .mobile-design-actions {
    justify-content: center !important;
    margin-top: 12px !important;
  }

  .mobile-design-action {
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 1px solid color-mix(in srgb, #7dd3fc 48%, transparent) !important;
    border-radius: var(--pg-action-radius) !important;
    background: var(--pg-action-bg) !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      inset 0 -1px 0 rgba(2, 30, 48, 0.3),
      inset 0 0 16px rgba(34, 211, 238, 0.12) !important;
  }

  .mobile-nav-overlay {
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(10px) !important;
  }

  .mobile-drawer {
    inset: calc(var(--mobile-safe-top) + 8px) 8px calc(var(--mobile-safe-bottom) + 8px) 8px !important;
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(24px) saturate(160%);
  }

  .bravia-page .mobile-drawer {
    inset: calc(var(--mobile-safe-top) + 8px) 8px calc(var(--mobile-safe-bottom) + 8px) 8px !important;
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 96%, transparent) !important;
    background-image: none !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  }

  .mobile-drawer-header {
    padding: 8px 10px 0 !important;
  }

  .mobile-drawer-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-drawer .mobile-drawer-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #mobileDrawerContent {
    padding: 4px 16px calc(var(--mobile-safe-bottom) + 16px) !important;
  }

  .mobile-drawer-shell,
  .mobile-drawer-sections {
    gap: 16px !important;
  }

  .mobile-drawer-section {
    display: grid !important;
    gap: 10px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .mobile-drawer-section--actions {
    border-bottom: 0 !important;
  }

  .mobile-drawer-section-title {
    font-size: 20px !important;
    font-weight: 750 !important;
    letter-spacing: -0.02em;
  }

  .mobile-drawer-tab-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .mobile-drawer-model-list,
  .mobile-drawer-action-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .mobile-drawer-tab-btn {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--bravia-mobile-surface-secondary) !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  .mobile-drawer-model-btn,
  .mobile-drawer-action-btn {
    min-height: 56px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-drawer .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer .mobile-drawer-action-btn {
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .mobile-drawer-model-btn:last-child,
  .mobile-drawer-action-btn:last-child {
    border-bottom: 0 !important;
  }

  .mobile-drawer-tab-btn.is-active,
  .mobile-drawer-model-btn.is-active,
  .mobile-drawer-action-btn.is-active {
    border-color: transparent !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 18%, transparent) !important;
    color: var(--bravia-mobile-primary) !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-drawer .mobile-drawer-tab-btn.is-active,
  .bravia-page .mobile-drawer .mobile-drawer-model-btn.is-active,
  .bravia-page .mobile-drawer .mobile-drawer-action-btn.is-active {
    border: 0 !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 18%, transparent) !important;
    background-image: none !important;
    color: var(--bravia-mobile-primary) !important;
    box-shadow: none !important;
  }

  .mobile-drawer-tab-btn.is-active .mobile-drawer-item-title,
  .mobile-drawer-model-btn.is-active .mobile-drawer-model-main strong,
  .mobile-drawer-action-btn.is-active .mobile-drawer-action-title {
    color: var(--bravia-mobile-primary) !important;
  }

  .mobile-drawer-model-btn.is-active .mobile-drawer-model-main span,
  .mobile-drawer-action-btn.is-active .mobile-drawer-action-desc {
    color: var(--bravia-mobile-muted) !important;
  }

  .mobile-drawer-item-title,
  .mobile-drawer-action-title,
  .mobile-drawer-model-main strong {
    font-size: 14px !important;
  }

  .mobile-drawer-model-main span,
  .mobile-drawer-action-desc {
    color: var(--bravia-mobile-muted) !important;
    font-size: 12px !important;
  }
}

/* Final desktop table geometry: aligned labels, sealed sticky header, rounded frame. */
@media (min-width: 1025px) {
  .bravia-page #lineupTable .feature-row .row-label-cell {
    padding-left: 24px !important;
    padding-right: 14px !important;
  }

  .bravia-page #lineupTable .feature-row .row-label-inner {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .bravia-page #lineupTable .feature-row .row-label-icon,
  .bravia-page #lineupTable .feature-row .row-label-icon-mask {
    flex: 0 0 20px !important;
    justify-self: start !important;
  }

  .bravia-page #lineupTable .feature-row .row-label-text {
    flex: 1 1 auto !important;
    max-width: calc(100% - 29px) !important;
    text-align: left !important;
  }

  .bravia-page #tableScroll:has(> #lineupTable .model-header-row) {
    position: relative !important;
    box-sizing: border-box !important;
    border: 2px solid rgba(125, 211, 252, 0.20) !important;
    border-radius: 20px !important;
    background: #061824 !important;
    background-clip: padding-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    isolation: isolate !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.025),
      0 8px 24px rgba(0, 0, 0, 0.12) !important;
  }

  .bravia-page #lineupTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #061824 !important;
  }

  .bravia-page #lineupTable .model-header-row {
    background: #203545 !important;
  }

  .bravia-page #lineupTable .model-header-cell,
  .bravia-page #lineupTable .corner-cell {
    overflow: hidden !important;
    border-top: 5px solid #35566f !important;
    box-shadow:
      inset 0 -3px 0 #142a3a,
      0 9px 16px rgba(0, 0, 0, 0.22) !important;
  }

  .bravia-page #lineupTable .corner-cell {
    border-top-left-radius: 17px !important;
  }

  .bravia-page #lineupTable .model-header-cell:last-child {
    border-top-right-radius: 17px !important;
  }

  .bravia-page #lineupTable .model-header-cell::before,
  .bravia-page #lineupTable .corner-cell::before {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    left: -2px;
    z-index: 5;
    height: 5px;
    background: #35566f;
    pointer-events: none;
  }

  .bravia-page #lineupTable .model-header-cell::after,
  .bravia-page #lineupTable .corner-cell::after {
    right: -2px !important;
    bottom: 0 !important;
    left: -2px !important;
    z-index: 5 !important;
    height: 3px !important;
    border: 0 !important;
    background: #142a3a !important;
  }

  .bravia-page #lineupTable .feature-row:last-child .row-label-cell {
    border-bottom-left-radius: 17px !important;
  }

  .bravia-page #lineupTable .feature-row:last-child .feature-cell:last-child {
    border-bottom-right-radius: 17px !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page #tableScroll:has(> #lineupTable .model-header-row) {
    border-color: rgba(58, 91, 116, 0.18) !important;
    background: #ffffff !important;
    box-shadow:
      inset 0 0 0 1px rgba(18, 39, 56, 0.025),
      0 8px 24px rgba(18, 39, 56, 0.07) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable {
    background: #ffffff !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable .model-header-cell,
  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable .corner-cell {
    border-top-color: #a9c0d1 !important;
    box-shadow:
      inset 0 -3px 0 #d5e1e9,
      0 8px 16px rgba(18, 39, 56, 0.10) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable .model-header-cell::before,
  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable .corner-cell::before {
    background: #a9c0d1 !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable .model-header-cell::after,
  :is(html.light, html[data-theme="day"]) .bravia-page #lineupTable .corner-cell::after {
    background: #d5e1e9 !important;
  }
}

/* Mobile app v2: Apple-style navigation, model-only drawer, vertical content. */
@media (max-width: 1024px) {
  html,
  body,
  .bravia-page,
  .app-shell,
  .app-main,
  #mainLayout,
  #mobileCardView {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .bravia-page .app-header {
    min-height: 50px !important;
    margin: 4px 10px 0 !important;
    padding: calc(var(--mobile-safe-top) + 4px) 2px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .bravia-page .brand-block {
    gap: 8px !important;
  }

  .bravia-page .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    color: var(--bravia-mobile-text) !important;
    box-shadow: none !important;
  }

  .bravia-page .app-header-actions,
  .bravia-page .bravia-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
  }

  .bravia-page #fullscreenToggleBtn {
    display: none !important;
  }

  .bravia-page #themeToggleBtn .toolbar-icon-img,
  .bravia-page #themeToggleBtn .toolbar-icon-mask,
  .bravia-page .mobile-menu-btn .toolbar-icon-mask {
    width: 18px !important;
    height: 18px !important;
    color: var(--bravia-mobile-text) !important;
    opacity: 0.92 !important;
  }

  .bravia-page .app-toolbar {
    margin: 2px 10px 0 !important;
  }

  .bravia-page .main-tabs,
  .bravia-page .row-group-filters {
    gap: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .main-tab,
  .bravia-page .row-filter-btn {
    min-height: 36px !important;
    border-radius: 12px !important;
    background: transparent !important;
  }

  .bravia-page .main-tab.active,
  .bravia-page .main-tab.is-active,
  .bravia-page .main-tab[aria-selected="true"],
  .bravia-page .row-filter-btn.active,
  .bravia-page .row-filter-btn.is-active,
  .bravia-page .row-filter-btn[aria-pressed="true"] {
    background: var(--bravia-mobile-primary) !important;
    color: #ffffff !important;
  }

  .bravia-page .matrix-panel.table-panel {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-overview-grid,
  .bravia-page .mobile-model-card--full,
  .bravia-page .mobile-design-section,
  .bravia-page .mobile-design-model-list {
    width: 100% !important;
    max-width: 430px !important;
    margin-inline: auto !important;
  }

  .bravia-page .mobile-overview-card,
  .bravia-page .mobile-model-card--full > .mobile-model-header,
  .bravia-page .mobile-feature-list,
  .bravia-page .mobile-design-model,
  .bravia-page .mobile-design-table,
  .bravia-page .mobile-design-image-frame {
    border: 0 !important;
    background-clip: padding-box !important;
  }

  .bravia-page .mobile-overview-card,
  .bravia-page .mobile-model-card--full > .mobile-model-header,
  .bravia-page .mobile-feature-list,
  .bravia-page .mobile-design-model {
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
  }

  .bravia-page .mobile-overview-card,
  .bravia-page .mobile-model-card--full > .mobile-model-header {
    border-radius: 22px !important;
  }

  .bravia-page .mobile-feature-list {
    border-radius: 20px !important;
  }

  .bravia-page .mobile-design-model {
    border-radius: 24px !important;
  }

  .bravia-page .mobile-design-table,
  .bravia-page .mobile-design-image-frame {
    border-radius: 16px !important;
  }

  .bravia-page .mobile-spec-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-design-model-header,
  .bravia-page .mobile-design-model-header-copy,
  .bravia-page .mobile-design-actions {
    text-align: center !important;
    justify-items: center !important;
    justify-content: center !important;
  }

  .bravia-page .mobile-design-section .design-mobile-series-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
  }

  .bravia-page .mobile-design-section .design-series-tab {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-design-section .design-series-tab.active,
  .bravia-page .mobile-design-section .design-series-tab.is-active {
    background: var(--bravia-mobile-primary) !important;
    color: #ffffff !important;
  }

  .bravia-page .mobile-nav-overlay {
    background: rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
  }

  .bravia-page .mobile-drawer {
    inset: calc(var(--mobile-safe-top) + 8px) 8px calc(var(--mobile-safe-bottom) + 8px) 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 26px !important;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 97%, transparent) !important;
    background-image: none !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.30) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
  }

  .bravia-page #mobileDrawerContent {
    padding: 0 16px calc(var(--mobile-safe-bottom) + 16px) !important;
  }

  .bravia-page .mobile-drawer-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bravia-page .mobile-drawer-section--guide,
  .bravia-page .mobile-drawer-section--actions,
  .bravia-page .mobile-drawer-tab-list,
  .bravia-page .mobile-drawer-action-grid {
    display: none !important;
  }

  .bravia-page .mobile-drawer-section--models {
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-drawer-section--models .mobile-drawer-section-head {
    display: block !important;
    padding: 2px 4px 10px !important;
    text-align: center !important;
  }

  .bravia-page .mobile-drawer-section--models .mobile-drawer-section-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  .bravia-page .mobile-drawer-model-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .bravia-page .mobile-drawer-model-btn {
    min-height: 58px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-drawer-model-btn:last-child {
    border-bottom: 0 !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active {
    border-bottom-color: transparent !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 16%, transparent) !important;
    color: var(--bravia-mobile-primary) !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-main strong,
  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-chev {
    color: var(--bravia-mobile-primary) !important;
  }

  .bravia-page .mobile-drawer-model-chev {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    font-size: 17px !important;
  }

}

/* Theme-safe design cards stay last so legacy mobile rules cannot override contrast. */
@media (max-width: 1024px) {
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model {
    background-color: #1c1c1e !important;
    background-image: none !important;
    color: #f5f5f7 !important;
  }

  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-model-header,
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-card-body,
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-spec-section {
    background-color: transparent !important;
    background-image: none !important;
  }

  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-model-title,
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-spec-value,
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-card-head {
    color: #f5f5f7 !important;
  }

  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-model-eyebrow,
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-model-meta,
  html.dark[data-theme="night"] .bravia-page article.mobile-design-model .mobile-design-spec-label {
    color: #98989d !important;
  }
}

/* Mobile v3 authoritative cascade. */
@media (max-width: 1024px) {
  .bravia-page .design-mobile-series-switch,
  .bravia-page .mobile-spec-card-count,
  .bravia-page .mobile-design-model-meta {
    display: none !important;
  }

  .bravia-page .main-tabs-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .bravia-page .main-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 6px !important;
  }

  .bravia-page .main-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    padding-inline: 15px !important;
    white-space: nowrap !important;
  }

  .bravia-page .mobile-drawer-section--models .mobile-drawer-section-head {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    padding: 0 4px 12px !important;
  }

  .bravia-page .mobile-drawer-section-title {
    grid-column: 2 !important;
    text-align: center !important;
  }

  .bravia-page .mobile-drawer-theme-toggle {
    grid-column: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-ghost-bg) !important;
  }

  .bravia-page .mobile-drawer-theme-toggle img {
    width: 16px !important;
    height: 16px !important;
  }

  .bravia-page .mobile-drawer-model-list {
    gap: 8px !important;
  }

  .bravia-page .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer-model-btn:last-child {
    min-height: 64px !important;
    padding: 11px 12px !important;
    border: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-ghost-bg) !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active {
    border-color: color-mix(in srgb, var(--bravia-mobile-primary) 34%, transparent) !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 14%, var(--bravia-mobile-surface)) !important;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.15fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    min-height: 54px !important;
    padding: 13px 12px !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-feature-row > :last-child,
  .bravia-page .mobile-design-spec-label,
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-feature-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .bravia-page .mobile-feature-icon-dot {
    width: 7px !important;
    height: 7px !important;
    margin-top: 6px !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-primary) !important;
  }

  .bravia-page .mobile-design-image {
    opacity: 0.58;
    filter: blur(8px) saturate(0.82);
    transform: scale(1.025);
    transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
  }

  .bravia-page .mobile-design-image.is-full-resolution {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .bravia-page .mobile-nav-overlay {
    opacity: 0 !important;
    transition: opacity 200ms ease !important;
  }

  .bravia-page .mobile-nav-overlay.is-visible {
    opacity: 1 !important;
  }

  .bravia-page .mobile-drawer {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease !important;
  }
}

/* Mobile specification matrix: one layout and one type scale for every data group. */
@media (max-width: 1024px) {
  .bravia-page {
    --mobile-spec-label-width: 118px;
    --mobile-spec-row-padding-y: 13px;
    --mobile-spec-row-padding-x: 12px;
    --mobile-spec-label-size: 12px;
    --mobile-spec-value-size: 13px;
    --mobile-spec-line-height: 1.45;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: var(--mobile-spec-label-width) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    min-height: 56px !important;
    padding: var(--mobile-spec-row-padding-y) var(--mobile-spec-row-padding-x) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-feature-row:last-child,
  .bravia-page .mobile-design-spec-row:last-child {
    border-bottom: 0 !important;
  }

  .bravia-page .mobile-feature-row:has(.audio-speaker-config-list, .audio-power-lines, .mobile-slot-stack > :nth-child(2)),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) {
    align-items: start !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-design-spec-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bravia-mobile-muted) !important;
    font-family: inherit !important;
    font-size: var(--mobile-spec-label-size) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: var(--mobile-spec-line-height) !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-design-spec-label {
    display: block !important;
  }

  .bravia-page .mobile-feature-icon-dot {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 5px 0 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bravia-mobile-primary) !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-feature-row > :last-child,
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-cell,
  .bravia-page .audio-format-cell,
  .bravia-page .audio-power-cell,
  .bravia-page .series-value-cell,
  .bravia-page .feature-boolean-cell,
  .bravia-page .no-feature-mark,
  .bravia-page .series-value-empty,
  .bravia-page .audio-speaker-empty,
  .bravia-page .audio-power-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bravia-mobile-text) !important;
    font-family: inherit !important;
    font-size: var(--mobile-spec-value-size) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: var(--mobile-spec-line-height) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-feature-row :is(
    .slot,
    .drop-slot,
    .slot-fallback,
    .audio-speaker-main,
    .audio-speaker-config,
    .audio-speaker-config-list,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-format-slot,
    .audio-format-sep,
    .audio-format-empty,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .audio-power-line,
    .series-value-main,
    .series-value-line,
    .feature-yes,
    .feature-no
  ) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bravia-mobile-text) !important;
    font-family: inherit !important;
    font-size: var(--mobile-spec-value-size) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: var(--mobile-spec-line-height) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-feature-row .slot {
    display: flex !important;
  }

  .bravia-page .mobile-feature-row .feature-yes,
  .bravia-page .mobile-feature-row .feature-no {
    display: inline-flex !important;
    width: auto !important;
  }
}

/* Mobile primary tabs: content-aware sizing with safe horizontal overflow. */
@media (max-width: 1024px) {
  .bravia-page .app-toolbar.tool-tab-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .bravia-page .desktop-toolbar-row,
  .bravia-page .toolbar-cluster,
  .bravia-page .desktop-main-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .bravia-page .desktop-toolbar-separator,
  .bravia-page .desktop-filters,
  .bravia-page .desktop-toolbar-row > .toolbar-cluster:last-child {
    display: none !important;
  }

  .bravia-page .main-tabs-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding-inline:
      max(10px, env(safe-area-inset-left, 0px))
      max(10px, env(safe-area-inset-right, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(10px, env(safe-area-inset-left, 0px));
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .bravia-page .main-tabs-row::-webkit-scrollbar,
  .bravia-page .main-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .bravia-page .main-tabs {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    gap: clamp(7px, 2vw, 10px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .main-tab {
    flex: 1 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 clamp(14px, 4vw, 20px) !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    overflow: visible !important;
    scroll-snap-align: center;
    scroll-margin-inline: 10px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0) scale(1) !important;
    transform-origin: center;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  .bravia-page .main-tab.active,
  .bravia-page .main-tab.is-active,
  .bravia-page .main-tab[aria-selected="true"] {
    transform: translateZ(0) scale(1.025) !important;
  }

  .bravia-page .main-tab:active {
    transform: translateZ(0) scale(0.975) !important;
    transition-duration: 80ms !important;
  }

  .bravia-page .main-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bravia-mobile-primary) 72%, #ffffff) !important;
    outline-offset: 2px !important;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bravia-page .main-tabs-row {
    scroll-behavior: auto !important;
  }

  .bravia-page .main-tab {
    transition: none !important;
  }
}

/* Design gallery: image-derived surfaces without a visible media card. */
@media (max-width: 1024px) {
  .bravia-page .mobile-design-image-frame {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 340px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto !important;
    padding: 2px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background-color: transparent;
    background-image: none !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    isolation: isolate;
    transition: background-color 320ms ease !important;
  }

  .bravia-page .mobile-design-image-frame.has-transparent-image {
    background-color: transparent !important;
  }

  .bravia-page .mobile-design-image-button {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bravia-page .mobile-design-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0.86;
    filter: none !important;
    transform: none !important;
    transition: opacity 260ms ease !important;
  }

  .bravia-page .mobile-design-image.is-full-resolution {
    opacity: 1;
    filter: none !important;
    transform: none !important;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bravia-page .mobile-design-image-frame,
  .bravia-page .mobile-design-image {
    transition: none !important;
  }
}

/* Mobile specification values: one fixed left edge across every two-column table. */
@media (max-width: 1024px) {
  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    grid-template-columns: var(--mobile-spec-label-width) minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value {
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-feature-row > :nth-child(2) :is(
    .mobile-slot-stack,
    .slot,
    .drop-slot,
    .slot-fallback,
    .tech-text,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .audio-speaker-cell,
    .audio-speaker-main,
    .audio-speaker-config-list,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-power-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .audio-power-line,
    .series-value-cell,
    .series-value-main,
    .series-value-line,
    .feature-boolean-cell,
    .feature-yes,
    .feature-no,
    .no-feature-mark
  ),
  .bravia-page .mobile-design-spec-value {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .bravia-page .mobile-feature-row .bravia-spec-text,
  .bravia-page .mobile-feature-row .bravia-spec-text-stack,
  .bravia-page .mobile-feature-row .tech-text,
  .bravia-page .mobile-feature-row .slot,
  .bravia-page .mobile-feature-row .drop-slot {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .bravia-page .mobile-feature-row .bravia-spec-text-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .bravia-page .mobile-feature-row .bravia-spec-text-stack > span,
  .bravia-page .mobile-feature-row :is(
    .audio-speaker-config-line,
    .audio-power-line,
    .series-value-line
  ) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: var(--mobile-spec-line-height) !important;
    text-align: left !important;
    text-indent: 0 !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) {
    align-items: start !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ) > :nth-child(2),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) > :nth-child(2) {
    align-self: start !important;
  }

  html body .bravia-page .mobile-feature-row .spec-value-primary {
    color: var(--bravia-mobile-text) !important;
    font-size: var(--mobile-spec-value-size, 13px) !important;
    font-style: normal !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body .bravia-page .mobile-feature-row .spec-value-secondary {
    color: var(--bravia-mobile-muted) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.32 !important;
  }
}
/* Authoritative mobile model context and compact four-tab layout. */
@media (max-width: 1024px) {
  html body .bravia-page .mobile-model-context {
    display: block !important;
    width: 100% !important;
    padding: 12px max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body .bravia-page .mobile-model-context-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .bravia-page .main-tab-all {
    display: none !important;
  }

  html body .bravia-page .main-tabs-viewport,
  html body .bravia-page .main-tabs-viewport .main-tabs-row {
    height: 54px !important;
    min-height: 54px !important;
  }

  html body .bravia-page .main-tabs-viewport .main-tabs-row {
    padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)) !important;
    scroll-padding-inline: 14px !important;
  }

  html body .bravia-page .main-tabs-viewport .main-tabs {
    display: grid !important;
    grid-template-columns: minmax(62px, 1fr) minmax(68px, 1.08fr) minmax(50px, .76fr) minmax(62px, 1fr) !important;
    align-items: center !important;
    gap: clamp(4px, 1.5vw, 7px) !important;
    width: 100% !important;
    min-width: 286px !important;
    height: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all),
  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all).active,
  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all).is-active,
  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all)[aria-selected="true"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 clamp(5px, 1.7vw, 9px) !important;
    overflow: hidden !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    filter: none !important;
    font-size: clamp(11.5px, 3.35vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body .bravia-page .mobile-model-content-card {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .bravia-page .mobile-model-content-card::before,
  html body .bravia-page .mobile-model-content-card::after {
    content: none !important;
  }
}

@media (max-width: 319px) {
  html body .bravia-page .main-tabs-viewport .main-tabs {
    width: max-content !important;
  }
}


/* Mobile sidebar grid and unified technology model summary. */
@media (max-width: 1024px) {
  .bravia-page .mobile-drawer-model-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    overflow-x: hidden !important;
  }

  .bravia-page .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer-model-btn:last-child,
  .bravia-page .mobile-drawer-model-btn.is-active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active {
    border-color: color-mix(in srgb, var(--bravia-mobile-primary) 38%, var(--bravia-mobile-border)) !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 14%, var(--bravia-mobile-surface)) !important;
  }

  .bravia-page .mobile-drawer-model-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .bravia-page .mobile-drawer-model-main > * {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .bravia-page .mobile-drawer-model-name {
    color: var(--bravia-mobile-text) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  .bravia-page .mobile-drawer-model-code,
  .bravia-page .mobile-drawer-model-sizes {
    color: var(--bravia-mobile-muted) !important;
    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 1.3 !important;
  }

  .bravia-page .mobile-drawer-model-chev {
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 28px !important;
  }

  .bravia-page .mobile-model-card--full > .mobile-model-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 96px !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--bravia-mobile-surface) !important;
    box-shadow: 0 1px 2px var(--bravia-mobile-shadow) !important;
    isolation: isolate;
  }

  .bravia-page .mobile-model-card--full.has-technology-border > .mobile-model-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--mobile-model-border-gradient);
    background-size: 300% 100%;
    background-position: 0% 50%;
    opacity: 0.42;
    pointer-events: none;
    animation: braviaTechnologyBorderFlow 18s linear infinite;
    animation-play-state: paused;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  .bravia-page .mobile-model-card--full.is-selected-model.has-technology-border > .mobile-model-header::before {
    padding: 2px;
    opacity: 0.72;
  }

  .bravia-page .mobile-model-card--full.is-border-animated > .mobile-model-header::before {
    animation-play-state: running;
    will-change: background-position;
  }

  .bravia-page .mobile-model-summary {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 88px minmax(0, max-content) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  .bravia-page .mobile-model-summary > img,
  .bravia-page .mobile-model-card--full > .mobile-model-header .mobile-model-summary > img {
    display: block !important;
    width: 86px !important;
    height: 56px !important;
    min-width: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--bravia-mobile-shadow) 64%, transparent)) !important;
  }

  .bravia-page .mobile-model-summary-copy {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .bravia-page .mobile-model-series-row {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .bravia-page .mobile-model-series-row .mobile-model-code,
  .bravia-page .mobile-model-summary-copy h3,
  .bravia-page .mobile-model-sizes {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .bravia-page .mobile-model-series-row .mobile-model-code {
    flex: 0 1 auto !important;
    color: var(--bravia-mobile-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .bravia-page .mobile-model-summary-copy h3 {
    color: var(--bravia-mobile-text) !important;
    font-size: 18px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .bravia-page .mobile-model-sizes {
    color: var(--bravia-mobile-muted) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .bravia-page .mobile-model-tech-chip,
  .bravia-page .mobile-model-series-row .panel-badge {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--mobile-model-chip-gradient) !important;
    background-size: 180% 100% !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-model-card--full.has-technology-border > .mobile-model-header::before {
    opacity: 0.34;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-model-card--full.is-selected-model.has-technology-border > .mobile-model-header::before {
    opacity: 0.56;
  }
}

@media (max-width: 359px) {
  .bravia-page .mobile-model-summary {
    grid-template-columns: 74px minmax(0, max-content) !important;
    gap: 10px !important;
  }

  .bravia-page .mobile-model-summary > img,
  .bravia-page .mobile-model-card--full > .mobile-model-header .mobile-model-summary > img {
    width: 72px !important;
    height: 48px !important;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bravia-page .mobile-model-card--full.has-technology-border > .mobile-model-header::before {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}

.tab-scroll-indicator {
  display: none;
}

@media (min-width: 1025px) {
  .main-tabs-viewport {
    display: contents;
  }
}

/* Mobile tab overflow affordance: edge fades, accessible controls and one-shot hint. */
@media (max-width: 1024px) {
  .bravia-page .main-tabs-viewport {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  .bravia-page .main-tabs-viewport::before,
  .bravia-page .main-tabs-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 54px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .bravia-page .main-tabs-viewport::before {
    left: 0;
    background: linear-gradient(90deg, var(--bravia-mobile-bg) 18%, color-mix(in srgb, var(--bravia-mobile-bg) 72%, transparent) 58%, transparent);
  }

  .bravia-page .main-tabs-viewport::after {
    right: 0;
    background: linear-gradient(270deg, var(--bravia-mobile-bg) 18%, color-mix(in srgb, var(--bravia-mobile-bg) 72%, transparent) 58%, transparent);
  }

  .bravia-page .main-tabs-viewport.can-scroll-left::before,
  .bravia-page .main-tabs-viewport.can-scroll-right::after {
    opacity: 1;
  }

  .bravia-page .main-tabs-viewport .main-tabs-row {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    padding-inline:
      max(14px, env(safe-area-inset-left, 0px))
      max(14px, env(safe-area-inset-right, 0px)) !important;
    scroll-padding-inline: 48px !important;
  }

  .bravia-page .main-tabs-viewport .main-tabs {
    padding-inline: 3px !important;
  }

  .bravia-page .tab-scroll-indicator {
    appearance: none;
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bravia-mobile-text);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 160ms ease, transform 160ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .bravia-page .tab-scroll-indicator::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 82%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 94%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bravia-mobile-shadow) 58%, transparent);
  }

  .bravia-page .tab-scroll-indicator--left {
    left: max(2px, env(safe-area-inset-left, 0px));
  }

  .bravia-page .tab-scroll-indicator--right {
    right: max(2px, env(safe-area-inset-right, 0px));
  }

  .bravia-page .tab-scroll-indicator.is-visible {
    opacity: 0.92;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .bravia-page .tab-scroll-indicator > span {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-1px);
  }

  .bravia-page .tab-scroll-indicator:active {
    transform: translateY(-50%) scale(0.94);
  }

  .bravia-page .tab-scroll-indicator:focus-visible {
    outline: 2px solid var(--bravia-mobile-primary);
    outline-offset: -4px;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .main-tabs-viewport::before {
    background: linear-gradient(90deg, var(--bravia-mobile-bg) 18%, color-mix(in srgb, var(--bravia-mobile-bg) 82%, transparent) 62%, transparent);
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .main-tabs-viewport::after {
    background: linear-gradient(270deg, var(--bravia-mobile-bg) 18%, color-mix(in srgb, var(--bravia-mobile-bg) 82%, transparent) 62%, transparent);
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bravia-page .main-tabs-viewport::before,
  .bravia-page .main-tabs-viewport::after,
  .bravia-page .tab-scroll-indicator {
    transition: none !important;
  }
}

/* Final mobile tab surface cleanup: no filled strip behind primary tabs. */
@media (max-width: 1024px) {
  html body .bravia-page .app-toolbar.tool-tab-box,
  html body .bravia-page .desktop-toolbar-row,
  html body .bravia-page .toolbar-cluster,
  html body .bravia-page .desktop-main-tabs,
  html body .bravia-page .main-tabs-viewport,
  html body .bravia-page .main-tabs-viewport .main-tabs-row,
  html body .bravia-page .main-tabs-viewport .main-tabs {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
  }

  html body .bravia-page .app-toolbar.tool-tab-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html body .bravia-page .desktop-toolbar-row,
  html body .bravia-page .toolbar-cluster,
  html body .bravia-page .desktop-main-tabs,
  html body .bravia-page .main-tabs-viewport,
  html body .bravia-page .main-tabs-viewport .main-tabs-row {
    border: 0 !important;
  }

  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all) {
    color: var(--bravia-mobile-text) !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all).active,
  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all).is-active,
  html body .bravia-page .main-tabs .main-tab:not(.main-tab-all)[aria-selected="true"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent)) !important;
    background-image: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent)) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tabs .main-tab:not(.main-tab-all) {
    color: #173041 !important;
  }
}

/* Mobile sidebar technology borders: shared palette, compact two-line items. */
@media (max-width: 1024px) {
  .bravia-page .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer-model-btn:last-child,
  .bravia-page .mobile-drawer-model-btn.is-active {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    align-items: center !important;
    min-height: 70px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 16px !important;
    background: var(--bravia-mobile-ghost-bg) !important;
    box-shadow: none !important;
    isolation: isolate;
  }

  .bravia-page .mobile-drawer-model-btn > * {
    position: relative;
    z-index: 1;
  }

  .bravia-page .mobile-drawer-model-main {
    align-content: center !important;
    gap: 4px !important;
  }

  .bravia-page .mobile-drawer-model-name,
  .bravia-page .mobile-drawer-model-sizes {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .bravia-page .mobile-drawer-model-sizes {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.has-technology-border {
    border-color: transparent !important;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--mobile-model-border-gradient);
    background-size: 300% 100%;
    background-position: 50% 50%;
    opacity: 0.38;
    pointer-events: none;
    animation: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border.is-active {
    border-color: transparent !important;
    background: color-mix(in srgb, var(--mobile-model-accent) 10%, var(--bravia-mobile-surface)) !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active:not(.has-technology-border) {
    border-color: color-mix(in srgb, var(--bravia-mobile-primary) 34%, var(--bravia-mobile-border)) !important;
    background: color-mix(in srgb, var(--bravia-mobile-primary) 12%, var(--bravia-mobile-surface)) !important;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border.is-active::before {
    padding: 2px;
    opacity: 0.76;
    animation: braviaTechnologyBorderFlow 20s linear infinite;
  }

  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-name,
  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-chev {
    color: var(--bravia-mobile-text) !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-chev {
    background: color-mix(in srgb, var(--mobile-model-accent) 20%, var(--bravia-mobile-ghost-bg)) !important;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-model-btn.has-technology-border::before {
    opacity: 0.28;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-model-btn.has-technology-border.is-active::before {
    opacity: 0.58;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bravia-page .mobile-drawer-model-btn.has-technology-border.is-active::before {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}

/* Mobile value hierarchy: fixed left axis, strong primary values, light supporting lines. */
@media (max-width: 1024px) {
  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: var(--mobile-spec-label-width, 118px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value {
    justify-self: stretch !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bravia-mobile-text) !important;
    font-size: var(--mobile-spec-value-size, 13px) !important;
    line-height: var(--mobile-spec-line-height, 1.45) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2) :is(
    .mobile-slot-stack,
    .slot,
    .drop-slot,
    .slot-fallback,
    .tech-text,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .audio-speaker-cell,
    .audio-speaker-main,
    .audio-speaker-config,
    .audio-speaker-config-list,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-format-slot,
    .audio-power-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .audio-power-line,
    .series-value-cell,
    .series-value-main,
    .series-value-line,
    .feature-boolean-cell,
    .feature-yes,
    .feature-no,
    .no-feature-mark,
    .series-value-empty,
    .audio-speaker-empty,
    .audio-power-empty
  ) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
  }

  .bravia-page .mobile-feature-row :is(
    .mobile-slot-stack,
    .slot,
    .drop-slot,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .audio-speaker-cell,
    .audio-speaker-config-list,
    .audio-power-cell,
    .audio-power-lines,
    .series-value-cell
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .bravia-page .mobile-feature-row :is(
    .bravia-spec-text,
    .tech-text,
    .audio-speaker-main,
    .audio-format-cell,
    .audio-power-main,
    .series-value-main,
    .feature-yes
  ),
  .bravia-page .mobile-design-spec-value {
    font-weight: 650 !important;
  }

  .bravia-page .mobile-feature-row :is(
    .audio-speaker-config,
    .audio-speaker-config-line,
    .audio-power-note,
    .audio-power-line,
    .series-value-line
  ) {
    color: var(--bravia-mobile-muted) !important;
    font-weight: 400 !important;
  }

  .bravia-page .mobile-feature-row .bravia-spec-text-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .bravia-page .mobile-feature-row .bravia-spec-text-stack > span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 450 !important;
    line-height: var(--mobile-spec-line-height, 1.45) !important;
    text-align: left !important;
    text-indent: 0 !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) {
    align-items: start !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ) > :nth-child(2),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) > :nth-child(2) {
    align-self: start !important;
  }
}

/* MOBILE <=1024 text fit audit: keep labels stable without shrinking global type. */
@media (max-width: 1024px) {
  .bravia-page {
    --mobile-spec-label-width: clamp(144px, 42vw, 176px);
    --mobile-spec-row-min-height: 58px;
    --mobile-spec-column-gap: 12px;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    grid-template-columns: minmax(var(--mobile-spec-label-width), 0.98fr) minmax(0, 1.02fr) !important;
    align-items: center !important;
    column-gap: var(--mobile-spec-column-gap) !important;
    row-gap: 0 !important;
    min-height: var(--mobile-spec-row-min-height) !important;
    padding-block: 12px !important;
    overflow: hidden !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) {
    align-items: start !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-design-spec-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: center !important;
    align-self: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-label > span:last-child,
  .bravia-page .mobile-design-spec-label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bravia-page .mobile-feature-icon-dot {
    align-self: center !important;
    justify-self: center !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-cell,
  .bravia-page .audio-power-cell,
  .bravia-page .audio-format-cell,
  .bravia-page .series-value-cell,
  .bravia-page .feature-boolean-cell,
  .bravia-page .no-feature-mark,
  .bravia-page .series-value-empty,
  .bravia-page .audio-speaker-empty,
  .bravia-page .audio-power-empty {
    align-self: center !important;
    justify-self: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ) > :nth-child(2),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) > :nth-child(2) {
    align-self: start !important;
    justify-content: flex-start !important;
  }

  .bravia-page .mobile-feature-row .slot,
  .bravia-page .mobile-feature-row .drop-slot,
  .bravia-page .mobile-feature-row .boolean-slot {
    min-height: 34px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .bravia-page .mobile-feature-row .feature-yes,
  .bravia-page .mobile-feature-row .feature-no {
    align-self: center !important;
    justify-self: start !important;
    line-height: 1 !important;
  }

  .bravia-page .mobile-feature-row[data-row-id="airplay-google-cast"],
  .bravia-page .mobile-feature-row:has([data-row-id="airplay-google-cast"]) {
    grid-template-columns: minmax(166px, 1.08fr) minmax(0, 0.92fr) !important;
  }

  .bravia-page .mobile-feature-row[data-row-id="airplay-google-cast"] .mobile-feature-label > span:last-child,
  .bravia-page .mobile-feature-row:has([data-row-id="airplay-google-cast"]) .mobile-feature-label > span:last-child {
    white-space: nowrap !important;
  }

  .bravia-page {
    --mobile-info-label-width: clamp(150px, 40vw, 174px);
    --mobile-info-column-gap: 12px;
    --mobile-info-row-min-height: 60px;
    --mobile-info-row-padding-y: 12px;
    --mobile-info-row-padding-x: 14px;
    --mobile-info-label-size: 12.5px;
    --mobile-info-value-size: 13px;
    --mobile-info-sub-size: 11.25px;
    --mobile-info-line-height: 1.34;
    --mobile-info-value-line-height: 1.36;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: minmax(0, var(--mobile-info-label-width)) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: var(--mobile-info-column-gap) !important;
    row-gap: 0 !important;
    min-height: var(--mobile-info-row-min-height) !important;
    padding: var(--mobile-info-row-padding-y) var(--mobile-info-row-padding-x) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .bravia-page .mobile-feature-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: center !important;
    align-self: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .bravia-page .mobile-feature-icon-dot {
    align-self: center !important;
    justify-self: center !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .bravia-page .mobile-feature-label-text,
  .bravia-page .mobile-design-spec-label {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bravia-mobile-muted) !important;
    font-size: var(--mobile-info-label-size) !important;
    font-weight: 650 !important;
    line-height: var(--mobile-info-line-height) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-label-text-main,
  .bravia-page .mobile-feature-label-text-sub {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-label-text-sub {
    color: color-mix(in srgb, var(--bravia-mobile-muted) 72%, var(--bravia-mobile-text)) !important;
    font-size: var(--mobile-info-sub-size) !important;
    font-weight: 500 !important;
    line-height: 1.22 !important;
  }

  .bravia-page .mobile-feature-label-text[data-label-id="airplay-google-cast"] .mobile-feature-label-text-main {
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-cell,
  .bravia-page .audio-power-cell,
  .bravia-page .audio-format-cell,
  .bravia-page .series-value-cell,
  .bravia-page .feature-boolean-cell,
  .bravia-page .no-feature-mark,
  .bravia-page .series-value-empty,
  .bravia-page .audio-speaker-empty,
  .bravia-page .audio-power-empty {
    align-self: center !important;
    justify-self: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--bravia-mobile-text) !important;
    font-size: var(--mobile-info-value-size) !important;
    line-height: var(--mobile-info-value-line-height) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-design-value-content,
  .bravia-page .mobile-feature-row :is(
    .bravia-spec-text,
    .tech-text,
    .slot,
    .drop-slot,
    .slot-fallback,
    .audio-speaker-main,
    .audio-format-cell,
    .audio-power-main,
    .series-value-main,
    .feature-yes,
    .feature-no,
    .no-feature-mark
  ) {
    font-size: var(--mobile-info-value-size) !important;
    font-weight: 650 !important;
    line-height: var(--mobile-info-value-line-height) !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bravia-page .mobile-feature-row :is(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-cell
  ) {
    gap: 3px !important;
  }

  .bravia-page .mobile-feature-row :is(
    .spec-value-secondary,
    .audio-speaker-config-line,
    .audio-power-note,
    .audio-power-line,
    .series-value-line
  ) {
    color: var(--bravia-mobile-muted) !important;
    font-size: var(--mobile-info-sub-size) !important;
    font-weight: 450 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-spec-value br) {
    align-items: center !important;
  }
}

/* Mobile info tables canonical row system. Keep last in cascade. */
@media (max-width: 1024px) {
  .bravia-page {
    --mobile-info-label-col: clamp(150px, 42vw, 178px);
    --mobile-info-row-gap: 12px;
    --mobile-info-row-py: 12px;
    --mobile-info-row-px: 14px;
    --mobile-info-row-min: 60px;
    --mobile-info-label-font: 12px;
    --mobile-info-value-font: 12.75px;
    --mobile-info-sub-font: 11px;
    --mobile-info-line: 1.34;
    --mobile-info-sub-line: 1.28;
  }

  .bravia-page .mobile-feature-list,
  .bravia-page .mobile-design-table,
  .bravia-page .mobile-design-table tbody {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: minmax(0, var(--mobile-info-label-col)) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: var(--mobile-info-row-gap) !important;
    row-gap: 0 !important;
    min-height: var(--mobile-info-row-min) !important;
    padding: var(--mobile-info-row-py) var(--mobile-info-row-px) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--bravia-mobile-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .bravia-page .mobile-feature-row:last-child,
  .bravia-page .mobile-design-spec-row:last-child {
    border-bottom: 0 !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-design-spec-label {
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bravia-mobile-muted) !important;
    font-size: var(--mobile-info-label-font) !important;
    font-weight: 650 !important;
    line-height: var(--mobile-info-line) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .bravia-page .mobile-feature-icon-dot {
    align-self: center !important;
    justify-self: center !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    transform: none !important;
  }

  .bravia-page .mobile-feature-label-text,
  .bravia-page .mobile-feature-label-text-main,
  .bravia-page .mobile-feature-label-text-sub {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-label-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .bravia-page .mobile-feature-label-text-sub {
    color: color-mix(in srgb, var(--bravia-mobile-muted) 74%, var(--bravia-mobile-text)) !important;
    font-size: var(--mobile-info-sub-font) !important;
    font-weight: 500 !important;
    line-height: var(--mobile-info-sub-line) !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-cell,
  .bravia-page .audio-power-cell,
  .bravia-page .audio-format-cell,
  .bravia-page .series-value-cell,
  .bravia-page .feature-boolean-cell,
  .bravia-page .no-feature-mark,
  .bravia-page .series-value-empty,
  .bravia-page .audio-speaker-empty,
  .bravia-page .audio-power-empty {
    align-self: center !important;
    justify-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--bravia-mobile-text) !important;
    font-size: var(--mobile-info-value-font) !important;
    font-weight: 500 !important;
    line-height: var(--mobile-info-line) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-row :is(
    .slot,
    .drop-slot,
    .slot-fallback,
    .tech-text,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .audio-speaker-cell,
    .audio-speaker-main,
    .audio-speaker-config-list,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-power-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .audio-power-line,
    .series-value-cell,
    .series-value-main,
    .series-value-line,
    .feature-boolean-cell,
    .feature-yes,
    .feature-no,
    .no-feature-mark
  ),
  .bravia-page .mobile-design-value-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: var(--mobile-info-value-font) !important;
    line-height: var(--mobile-info-line) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .bravia-page .mobile-feature-row :is(
    .bravia-spec-text,
    .tech-text,
    .audio-speaker-main,
    .audio-power-main,
    .series-value-main,
    .feature-yes
  ),
  .bravia-page .mobile-design-value-content {
    font-weight: 650 !important;
  }

  .bravia-page .mobile-feature-row :is(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-cell
  ) {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .bravia-page .mobile-feature-row :is(
    .spec-value-secondary,
    .audio-speaker-config-line,
    .audio-power-note,
    .audio-power-line,
    .series-value-line
  ) {
    color: var(--bravia-mobile-muted) !important;
    font-size: var(--mobile-info-sub-font) !important;
    font-weight: 450 !important;
    line-height: var(--mobile-info-sub-line) !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-value-content br) {
    align-items: center !important;
  }

  .bravia-page .mobile-feature-row .slot,
  .bravia-page .mobile-feature-row .drop-slot,
  .bravia-page .mobile-feature-row .boolean-slot {
    min-height: 34px !important;
    border-radius: 0 !important;
  }

  .bravia-page .mobile-feature-row .feature-yes,
  .bravia-page .mobile-feature-row .feature-no {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }

  .bravia-page .mobile-spec-keep {
    white-space: nowrap !important;
  }

  .bravia-page .mobile-design-spec-label {
    display: flex !important;
    align-items: center !important;
  }
}

@media (max-width: 430px) {
  .bravia-page {
    --mobile-info-label-col: clamp(148px, 41vw, 168px);
    --mobile-info-row-gap: 10px;
    --mobile-info-row-px: 12px;
    --mobile-info-label-font: 11.75px;
    --mobile-info-value-font: 12.35px;
    --mobile-info-sub-font: 10.75px;
  }
}

/* Mobile component pass: model gate, centered value column, clean tabs and inner-glow actions. */
@media (max-width: 767px) {
  .bravia-page.mobile-model-pending .mobile-model-context,
  .bravia-page.mobile-model-pending .app-toolbar {
    display: none !important;
  }

  .bravia-page.mobile-model-pending .mobile-card-view {
    display: block !important;
    padding: 18px max(18px, env(safe-area-inset-left, 0px)) 24px max(18px, env(safe-area-inset-right, 0px)) !important;
  }

  .bravia-page .mobile-model-choice-screen {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    box-sizing: border-box;
  }

  .bravia-page .mobile-model-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 396px;
    margin-inline: auto;
    justify-content: center;
    box-sizing: border-box;
  }

  .bravia-page .mobile-model-choice {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    min-height: 118px;
    padding: 18px 12px 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mobile-model-accent, #8fb3d9) 28%, rgba(255,255,255,.74));
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
      color-mix(in srgb, var(--mobile-model-accent-soft, #eef6ff) 18%, #ffffff);
    color: #111827;
    text-align: center;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      0 8px 20px rgba(15, 23, 42, .055);
    -webkit-tap-highlight-color: transparent;
  }

  .bravia-page .mobile-model-choice::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.44), transparent 42%);
    pointer-events: none;
  }

  .bravia-page .mobile-model-choice > * {
    position: relative;
    z-index: 1;
  }

  .bravia-page .mobile-model-choice.has-technology-border::before,
  .bravia-page .mobile-drawer-model-btn.has-technology-border::before,
  .bravia-page .mobile-model-card--full.has-technology-border > .mobile-model-header::before {
    animation-duration: 24s !important;
    opacity: 0.48 !important;
  }

  .bravia-page .mobile-model-choice strong {
    font-size: 15.5px;
    font-weight: 720;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .bravia-page .mobile-model-choice span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
  }

  .bravia-page .mobile-model-tech-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 20px;
    min-height: 20px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--mobile-model-chip-gradient);
    background-size: 180% 100%;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  }

  .bravia-page .mobile-size-list {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .bravia-page .mobile-size-token {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  .bravia-page .mobile-model-context {
    display: block !important;
    padding: 8px max(14px, env(safe-area-inset-left, 0px)) 6px max(14px, env(safe-area-inset-right, 0px)) !important;
  }

  .bravia-page .mobile-model-context-card {
    max-width: 560px !important;
    margin-inline: auto !important;
  }

  .bravia-page .mobile-model-card--full > .mobile-model-header {
    justify-content: center !important;
    text-align: center !important;
  }

  .bravia-page .mobile-model-summary {
    grid-template-columns: minmax(82px, 96px) minmax(0, max-content) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    width: fit-content !important;
    margin-inline: auto !important;
  }

  .bravia-page .mobile-model-summary-copy {
    justify-items: center !important;
    text-align: center !important;
  }

  .bravia-page .mobile-model-summary-copy h3,
  .bravia-page .mobile-model-summary-copy .mobile-model-code,
  .bravia-page .mobile-model-summary-copy .mobile-model-sizes {
    text-align: center !important;
  }

  .bravia-page .mobile-model-summary-copy .mobile-model-code {
    order: 4;
  }

  .bravia-page .mobile-model-summary-copy h3 {
    order: 2;
  }

  .bravia-page .mobile-model-summary-copy .mobile-model-tech-badge {
    order: 1;
  }

  .bravia-page .mobile-model-summary-copy .mobile-model-sizes {
    order: 3;
  }

  .bravia-page .main-tabs-viewport::before,
  .bravia-page .main-tabs-viewport::after {
    content: none !important;
    display: none !important;
  }

  .bravia-page .app-toolbar,
  .bravia-page .desktop-toolbar-row,
  .bravia-page .main-tabs-viewport,
  .bravia-page .main-tabs-row,
  .bravia-page .main-tabs {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .bravia-page .main-tabs-viewport,
  .bravia-page .main-tabs-row {
    height: 46px !important;
    min-height: 46px !important;
    overflow: visible !important;
  }

  .bravia-page .main-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(3px, 1.2vw, 6px) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
  }

  .bravia-page .main-tab-all {
    display: none !important;
  }

  .bravia-page .main-tabs .main-tab:not(.main-tab-all) {
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 clamp(3px, 1.4vw, 7px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--bravia-mobile-text) !important;
    font-size: clamp(10.8px, 3.05vw, 12.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  .bravia-page .main-tabs .main-tab:not(.main-tab-all).active,
  .bravia-page .main-tabs .main-tab:not(.main-tab-all).is-active,
  .bravia-page .main-tabs .main-tab:not(.main-tab-all)[aria-selected="true"] {
    background: linear-gradient(135deg, var(--bravia-mobile-primary), var(--bravia-mobile-accent)) !important;
    color: #fff !important;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    grid-template-columns: minmax(0, var(--mobile-info-label-col, 154px)) minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-design-spec-label {
    justify-self: stretch !important;
    text-align: left !important;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-cell,
  .bravia-page .audio-format-cell,
  .bravia-page .audio-power-cell,
  .bravia-page .series-value-cell,
  .bravia-page .feature-boolean-cell,
  .bravia-page .mobile-design-value-content {
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-items: start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .bravia-page .mobile-feature-row > :is(
    .mobile-slot-stack,
    .audio-speaker-cell,
    .audio-format-cell,
    .audio-power-cell,
    .series-value-cell,
    .feature-boolean-cell
  ) {
    justify-content: center !important;
  }

  .bravia-page .mobile-feature-row:has(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-line
  ) > :is(
    .mobile-slot-stack,
    .audio-speaker-cell,
    .audio-power-cell,
    .series-value-cell
  ),
  .bravia-page .mobile-design-spec-row:has(.mobile-design-value-content br) > .mobile-design-spec-value {
    align-self: center !important;
    justify-content: center !important;
  }

  .bravia-page .feature-yes,
  .bravia-page .feature-no,
  .bravia-page .no-feature-mark,
  .bravia-page .series-value-empty,
  .bravia-page .audio-speaker-empty,
  .bravia-page .audio-power-empty {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .bravia-page .mobile-feature-row :is(
    .spec-value-secondary,
    .audio-speaker-config-line,
    .audio-power-note,
    .audio-power-line,
    .series-value-line,
    .bravia-spec-text-stack > span:not(:first-child)
  ) {
    color: color-mix(in srgb, var(--bravia-mobile-muted) 78%, transparent) !important;
    font-size: var(--mobile-info-sub-font, 10.75px) !important;
    font-weight: 400 !important;
  }

  .bravia-page .mobile-design-card-head,
  .bravia-page .mobile-spec-card-head {
    display: none !important;
  }

  .bravia-page .mobile-design-image-frame {
    background-image: none !important;
    background-color: transparent;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .bravia-page .mobile-design-image-frame.has-adaptive-background {
    background-image: none !important;
  }

  .bravia-page .b2ii-action-btn,
  .bravia-page .mobile-design-action,
  .bravia-page .design-energy-label-button {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-primary) 54%, transparent) !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--bravia-mobile-primary) 88%, #061017), color-mix(in srgb, var(--bravia-mobile-accent) 74%, #061017)) !important;
    background-size: 220% 220% !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .28),
      inset 0 0 18px color-mix(in srgb, var(--bravia-mobile-primary) 46%, transparent) !important;
    filter: none !important;
    animation: braviaInnerGlowFlow 8s ease-in-out infinite !important;
  }

  .bravia-page .b2ii-action-btn::before,
  .bravia-page .mobile-design-action::before,
  .bravia-page .design-energy-label-button::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background:
      radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 34%),
      linear-gradient(120deg, transparent 18%, rgba(255,255,255,.22) 45%, transparent 72%);
    background-size: 180% 180%;
    background-position: 0% 50%;
    opacity: .72;
    pointer-events: none;
    animation: braviaInnerGlowSheen 7s ease-in-out infinite;
  }

  .bravia-page .b2ii-action-btn::after,
  .bravia-page .mobile-design-action::after,
  .bravia-page .design-energy-label-button::after {
    display: none !important;
    content: none !important;
  }

  .bravia-page .b2ii-modal:not([hidden]) {
    display: flex !important;
    pointer-events: auto !important;
  }

  .bravia-page .b2ii-modal-close {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
}

/* Static VI/EN language switch shared by desktop and mobile headers. */
.bravia-page .language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-sizing: border-box;
}

.bravia-page .language-chip {
  min-width: 44px;
  height: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.76);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.bravia-page .header-control-group .header-language-toggle {
  width: var(--header-control-size);
  min-width: var(--header-control-size);
  height: var(--header-control-size);
  padding: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}

.bravia-page .header-language-flag {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.bravia-page .language-chip:hover {
  color: #ffffff;
  background: rgba(125, 211, 252, 0.10);
}

.bravia-page .language-chip.is-active,
.bravia-page .language-chip[aria-pressed="true"] {
  color: #ffffff;
  background: rgba(14, 165, 166, 0.26);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.08);
}

.bravia-page .header-control-chip[aria-pressed="true"] {
  --header-control-bg: rgba(14, 165, 166, 0.24);
}

.bravia-page .language-chip:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.82);
  outline-offset: 1px;
}

:is(html.light, html[data-theme="day"]) .bravia-page .language-switch {
  background: transparent;
}

:is(html.light, html[data-theme="day"]) .bravia-page .language-chip {
  color: rgba(15, 23, 42, 0.72);
  background: rgba(15, 118, 160, 0.08);
}

:is(html.light, html[data-theme="day"]) .bravia-page .language-chip.is-active,
:is(html.light, html[data-theme="day"]) .bravia-page .language-chip[aria-pressed="true"] {
  color: #0f485c;
  background: rgba(14, 165, 166, 0.18);
}

@media (max-width: 1024px) {
  .bravia-page .header-control-group {
    --header-control-size: 36px;
    gap: 4px;
  }

  .bravia-page .language-switch,
  .bravia-page .language-chip {
    height: 36px;
  }
}

@media (max-width: 430px) {
  .bravia-page .app-header-actions,
  .bravia-page .bravia-header-actions {
    gap: 4px !important;
    min-width: 0;
  }

  .bravia-page .language-switch {
    gap: 2px;
    padding: 0;
  }

  .bravia-page .language-chip {
    min-width: 42px;
    height: 36px;
    padding-inline: 5px;
    font-size: 10.5px;
  }
}

@media (max-width: 393px) {
  .bravia-page .language-chip {
    min-width: 40px;
    padding-inline: 5px;
  }
}

@keyframes braviaInnerGlowFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes braviaInnerGlowSheen {
  0%, 100% { background-position: 0% 50%; opacity: .48; }
  50% { background-position: 100% 50%; opacity: .82; }
}

@media (max-width: 767px) {
  html,
  body {
    scrollbar-gutter: auto !important;
  }

  .bravia-page .mobile-drawer-model-list {
    display: grid !important;
    gap: 12px !important;
  }

  .bravia-page .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer .mobile-drawer-model-btn,
  .bravia-page .mobile-drawer-model-btn:last-child,
  .bravia-page .mobile-drawer-model-btn.is-active {
    min-height: 84px !important;
    padding: 14px 14px !important;
    border: 1px solid color-mix(in srgb, var(--mobile-model-accent, #8fb3d9) 28%, rgba(255,255,255,.72)) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
      color-mix(in srgb, var(--mobile-model-accent-soft, #eef6ff) 18%, #ffffff) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      0 8px 20px rgba(15, 23, 42, .055) !important;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border {
    border-color: color-mix(in srgb, var(--mobile-model-accent, #8fb3d9) 32%, rgba(255,255,255,.72)) !important;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border::before {
    opacity: .42 !important;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border.is-active::before {
    opacity: .64 !important;
  }

  .bravia-page .mobile-drawer-model-main {
    gap: 8px !important;
  }

  .bravia-page .mobile-drawer-model-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .bravia-page .mobile-drawer-model-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
  }

  .bravia-page .mobile-drawer-model-sizes {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .bravia-page .mobile-drawer-model-sizes .mobile-size-list {
    justify-content: flex-start !important;
  }

  .bravia-page .mobile-drawer-model-chev {
    color: color-mix(in srgb, var(--mobile-model-accent, #2563eb) 74%, #334155) !important;
    background: rgba(255,255,255,.62) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  }

  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-name,
  .bravia-page .mobile-drawer-model-btn.is-active .mobile-drawer-model-sizes {
    color: #111827 !important;
  }

  .bravia-page .mobile-model-context-card .mobile-model-tech-badge {
    margin-block: 1px;
  }
}

@media (max-width: 767px) {
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn:last-child,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active {
    border: 1px solid color-mix(in srgb, var(--mobile-model-accent, #8fb3d9) 30%, rgba(255,255,255,.72)) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
      color-mix(in srgb, var(--mobile-model-accent-soft, #eef6ff) 18%, #ffffff) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      0 8px 20px rgba(15, 23, 42, .055) !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn .mobile-model-tech-badge {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: var(--mobile-model-chip-gradient) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes .mobile-size-list {
    justify-content: flex-start !important;
  }
}

/* Mobile spec alignment 355-358: left labels, centered value column. */
@media (max-width: 1024px) {
  .bravia-page {
    --mobile-info-label-col: clamp(156px, 43vw, 186px);
    --mobile-info-row-gap: 10px;
  }

  .bravia-page .mobile-feature-row,
  .bravia-page .mobile-design-spec-row {
    grid-template-columns: minmax(0, var(--mobile-info-label-col)) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: var(--mobile-info-row-gap) !important;
  }

  .bravia-page .mobile-feature-label,
  .bravia-page .mobile-design-spec-label {
    justify-self: stretch !important;
    align-self: center !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty;
  }

  .bravia-page .mobile-feature-label-text,
  .bravia-page .mobile-feature-label-text-main,
  .bravia-page .mobile-feature-label-text-sub {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty;
  }

  .bravia-page .mobile-feature-row > :nth-child(2),
  .bravia-page .mobile-design-spec-row > :nth-child(2),
  .bravia-page .mobile-design-spec-value,
  .bravia-page .mobile-slot-stack,
  .bravia-page .audio-speaker-cell,
  .bravia-page .audio-format-cell,
  .bravia-page .audio-power-cell,
  .bravia-page .series-value-cell,
  .bravia-page .feature-boolean-cell,
  .bravia-page .no-feature-mark,
  .bravia-page .series-value-empty,
  .bravia-page .audio-speaker-empty,
  .bravia-page .audio-power-empty {
    justify-self: stretch !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    text-align: center !important;
  }

  .bravia-page .mobile-feature-row :is(
    .slot,
    .drop-slot,
    .slot-fallback,
    .tech-text,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .bravia-spec-text-stack > span,
    .audio-speaker-cell,
    .audio-speaker-main,
    .audio-speaker-config-list,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-format-slot,
    .audio-format-empty,
    .audio-power-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .audio-power-line,
    .series-value-cell,
    .series-value-main,
    .series-value-line,
    .feature-boolean-cell,
    .feature-yes,
    .feature-no,
    .no-feature-mark
  ),
  .bravia-page .mobile-design-value-content {
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  .bravia-page .mobile-feature-row :is(
    .bravia-spec-text-stack,
    .audio-speaker-config-list,
    .audio-power-lines,
    .series-value-cell
  ) {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .bravia-page .mobile-feature-row :is(
    .spec-value-primary,
    .audio-speaker-main,
    .audio-power-main,
    .series-value-main
  ) {
    text-align: center !important;
    text-wrap: balance;
  }

  .bravia-page .mobile-feature-row :is(
    .spec-value-secondary,
    .audio-speaker-config-line,
    .audio-power-note,
    .audio-power-line,
    .series-value-line,
    .bravia-spec-text-stack > span:not(:first-child)
  ) {
    text-align: center !important;
    text-wrap: balance;
  }

  .bravia-page .mobile-feature-row .slot,
  .bravia-page .mobile-feature-row .drop-slot,
  .bravia-page .mobile-feature-row .boolean-slot {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .bravia-page .mobile-feature-row .feature-yes,
  .bravia-page .mobile-feature-row .feature-no,
  .bravia-page .mobile-feature-row .no-feature-mark {
    display: inline-flex !important;
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  .bravia-page {
    --mobile-info-label-col: clamp(154px, 42vw, 178px);
    --mobile-info-value-font: 12.2px;
    --mobile-info-sub-font: 10.7px;
  }
}

/* Final mobile value centering override for items 355-358. */
@media (max-width: 1024px) {
  html body .bravia-page .mobile-feature-row,
  html body .bravia-page .mobile-design-spec-row {
    grid-template-columns: minmax(0, var(--mobile-info-label-col)) minmax(0, 1fr) !important;
    align-items: center !important;
  }

  html body .bravia-page .mobile-feature-label,
  html body .bravia-page .mobile-feature-label *,
  html body .bravia-page .mobile-design-spec-label {
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: pretty;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2),
  html body .bravia-page .mobile-design-spec-row > :nth-child(2),
  html body .bravia-page .mobile-feature-row > .mobile-slot-stack,
  html body .bravia-page .mobile-feature-row > .audio-speaker-cell,
  html body .bravia-page .mobile-feature-row > .audio-format-cell,
  html body .bravia-page .mobile-feature-row > .audio-power-cell,
  html body .bravia-page .mobile-feature-row > .series-value-cell,
  html body .bravia-page .mobile-feature-row > .feature-boolean-cell,
  html body .bravia-page .mobile-design-spec-value {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2) .slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .drop-slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .boolean-slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .tech-text,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .bravia-spec-text,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .bravia-spec-text-stack,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .bravia-spec-text-stack > span,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-speaker-main,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-speaker-config-list,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-speaker-config-line,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-format-slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-format-empty,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-main,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-note,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-lines,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-line,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .series-value-main,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .series-value-line,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .feature-yes,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .feature-no,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .no-feature-mark,
  html body .bravia-page .mobile-design-spec-value .mobile-design-value-content,
  html body .bravia-page .mobile-design-spec-value .mobile-design-value-content * {
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2) .slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .drop-slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .boolean-slot,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .feature-yes,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .feature-no,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .no-feature-mark {
    width: 100% !important;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-speaker-config-list,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-lines,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .series-value-cell,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .bravia-spec-text-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2) .spec-value-secondary,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-speaker-config-line,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-note,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .audio-power-line,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .series-value-line,
  html body .bravia-page .mobile-feature-row > :nth-child(2) .bravia-spec-text-stack > span:not(:first-child) {
    font-size: var(--mobile-info-sub-font, 10.75px) !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > :nth-child(2) .bravia-spec-text[title="Ambient Optimization with RGB Sensor"] {
    max-width: 19ch !important;
  }
}

/* Final mobile value-axis normalization 373-384. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-feature-row,
  html body .bravia-page .mobile-design-spec-row {
    grid-template-columns:
      minmax(0, var(--mobile-info-label-col))
      minmax(0, calc(100% - var(--mobile-info-label-col) - var(--mobile-info-row-gap))) !important;
    column-gap: var(--mobile-info-row-gap) !important;
    align-items: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone {
    display: grid !important;
    place-items: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 24px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-design-spec-value {
    display: grid !important;
    place-items: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .bravia-page .mobile-value-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body .bravia-page .mobile-value-content :is(
    .slot,
    .drop-slot,
    .tech-text,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .audio-speaker-cell,
    .audio-speaker-main,
    .audio-speaker-config-list,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-format-empty,
    .audio-power-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-lines,
    .audio-power-line,
    .series-value-cell,
    .series-value-main,
    .series-value-line,
    .mobile-design-value-content
  ) {
    text-align: left !important;
  }

  html body .bravia-page .mobile-value-content :is(
    .feature-no,
    .no-feature-mark,
    .series-value-empty,
    .audio-speaker-empty,
    .audio-power-empty
  ),
  html body .bravia-page .mobile-check-icon {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-check-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body .bravia-page .mobile-value-zone .boolean-slot {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile design labels 389-394: fixed left edge, value column unchanged. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-design-spec-row > .mobile-design-spec-label {
    display: block !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-block: 0 !important;
    padding-inline: var(--mobile-info-row-px, 12px) 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-indent: 0 !important;
  }
}

/* Mobile spec typography 395-398: audio format is a primary value, not detail text. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-feature-row .audio-format-cell,
  html body .bravia-page .mobile-feature-row .audio-format-cell .spec-value-primary {
    color: var(--bravia-mobile-text) !important;
    font-size: var(--mobile-info-value-font) !important;
    font-weight: 650 !important;
    line-height: var(--mobile-info-line) !important;
  }

  html body .bravia-page .mobile-feature-row :is(
    .spec-value-secondary,
    .audio-speaker-config-line,
    .audio-power-note,
    .audio-power-line,
    .series-value-line
  ) {
    color: var(--bravia-mobile-muted) !important;
    font-size: var(--mobile-info-sub-font) !important;
    font-weight: 450 !important;
    line-height: var(--mobile-info-sub-line) !important;
  }
}

/* Mobile sidebar model badges 405-411: keep badge attached to model name, sizes from shared tokens. */
@media (max-width: 767px) {
  html body .bravia-page #mobileDrawer .mobile-drawer-model-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-title-row {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-name {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-badge {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    overflow: visible !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes .mobile-size-list {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px 6px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes .mobile-size-token {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }
}

/* Desktop primary navigation 419-428: keep comparison table intact, restore centered Mobile-style chips. */
@media (min-width: 1025px) {
  html body .bravia-page.app-shell,
  html body .bravia-page .app-shell {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  html body .bravia-page .app-header {
    grid-row: 1 !important;
  }

  html body .bravia-page #mobileNavOverlay,
  html body .bravia-page #mobileDrawer,
  html body .bravia-page #mobileModelContext {
    grid-row: 1 !important;
  }

  html body .bravia-page .app-toolbar.tool-tab-box {
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px var(--page-x, 16px) 8px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    position: relative !important;
    z-index: 8 !important;
  }

  html body .bravia-page .app-main,
  html body .bravia-page #mainLayout {
    grid-row: 3 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  html body .bravia-page .desktop-toolbar-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }

  html body .bravia-page .desktop-toolbar-row > .toolbar-cluster:first-child,
  html body .bravia-page .desktop-main-tabs,
  html body .bravia-page .main-tabs-viewport,
  html body .bravia-page .main-tabs-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .bravia-page .desktop-toolbar-separator,
  html body .bravia-page .desktop-filters,
  html body .bravia-page .desktop-toolbar-row > .toolbar-cluster:last-child,
  html body .bravia-page .tab-scroll-indicator {
    display: none !important;
  }

  html body .bravia-page .main-tabs {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .bravia-page .main-tab,
  html body .bravia-page .main-tab.main-tab-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    overflow: visible !important;
    border: 1px solid rgba(125, 211, 252, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: var(--text-muted) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    cursor: pointer !important;
    transform: none !important;
    transition:
      background 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  html body .bravia-page .main-tab:hover {
    color: var(--text-main) !important;
    border-color: rgba(125, 211, 252, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px) !important;
  }

  html body .bravia-page .main-tab.active,
  html body .bravia-page .main-tab.is-active,
  html body .bravia-page .main-tab[aria-selected="true"] {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #1d9bf0 0%, #00d4aa 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 8px 18px rgba(29, 155, 240, 0.18) !important;
    transform: none !important;
  }

  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tab,
  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tab.main-tab-all {
    color: #405160 !important;
    border-color: rgba(18, 39, 56, 0.10) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 4px 12px rgba(18, 39, 56, 0.04) !important;
  }

  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tab:hover {
    color: #13202b !important;
    border-color: rgba(29, 155, 240, 0.22) !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tab.active,
  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tab.is-active,
  :is(html.light, html[data-theme="day"]) body .bravia-page .main-tab[aria-selected="true"] {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #1d9bf0 0%, #00d4aa 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 8px 18px rgba(29, 155, 240, 0.16) !important;
  }
}

/* Desktop spacing 435-443: keep the tab chips and comparison header visually connected. */
@media (min-width: 1025px) {
  html body .bravia-page .app-toolbar.tool-tab-box {
    min-height: 48px !important;
    padding-top: 4px !important;
    padding-bottom: 2px !important;
  }

  html body .bravia-page .desktop-toolbar-row,
  html body .bravia-page .desktop-toolbar-row > .toolbar-cluster:first-child,
  html body .bravia-page .desktop-main-tabs,
  html body .bravia-page .main-tabs-viewport,
  html body .bravia-page .main-tabs-row {
    min-height: 42px !important;
  }

  html body .bravia-page .main-tabs {
    height: 42px !important;
    min-height: 42px !important;
  }

  html body .bravia-page .app-main,
  html body .bravia-page #mainLayout {
    padding-top: 2px !important;
  }

  html body .bravia-page section.matrix-panel.table-panel {
    padding-top: 4px !important;
  }

  html body .bravia-page #tableScroll {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body .bravia-page #lineupTable,
  html body .bravia-page #lineupTable .model-header-row {
    margin-top: 0 !important;
  }
}

/* Desktop design spec lightbox 429-434: modal is image-only; navigation remains on the main page. */
@media (min-width: 1025px) {
  html body .bravia-page .spec-modal-overlay:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 24px !important;
    overflow: hidden !important;
    background: #05070a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
  }

  html.design-spec-modal-open body .bravia-page .app-toolbar.tool-tab-box,
  html.design-spec-modal-open body .bravia-page .desktop-toolbar-row,
  html.design-spec-modal-open body .bravia-page .main-tabs {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body .bravia-page .spec-modal-overlay:not([hidden]) .spec-modal {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .bravia-page .spec-modal-overlay:not([hidden]) .spec-modal-close {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top, 0px)) !important;
    right: max(18px, env(safe-area-inset-right, 0px)) !important;
    z-index: 2 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(10, 15, 22, 0.88) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  html body .bravia-page .spec-modal-overlay:not([hidden]) .spec-modal-body,
  html body .bravia-page .spec-modal-overlay:not([hidden]) .b2ii-spec-stage {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html body .bravia-page .spec-modal-overlay:not([hidden]) .spec-modal-image,
  html body .bravia-page .spec-modal-overlay:not([hidden]) .b2ii-spec-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    box-shadow: none !important;
  }

  html.design-lightbox-open body .bravia-page .app-header,
  html.design-lightbox-open body .bravia-page .app-toolbar.tool-tab-box,
  html.design-lightbox-open body .bravia-page .desktop-toolbar-row,
  html.design-lightbox-open body .bravia-page .main-tabs,
  html.design-lightbox-open body .bravia-page .mobile-model-context,
  html.design-lightbox-open body .bravia-page .matrix-panel.table-panel {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 24px !important;
    overflow: hidden !important;
    background: #05070a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-modal-dialog {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-modal-close {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top, 0px)) !important;
    right: max(18px, env(safe-area-inset-right, 0px)) !important;
    z-index: 2 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(10, 15, 22, 0.88) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-modal-body,
  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-stage {
    display: grid !important;
    place-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-header {
    display: grid !important;
    justify-items: center !important;
    gap: 4px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-frame {
    display: grid !important;
    place-items: center !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body .bravia-page .energy-label-modal:not([hidden]) .energy-label-modal-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 72px) !important;
    max-height: calc(100dvh - 128px) !important;
    margin: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    box-shadow: none !important;
  }
}

/* Shared image viewer: image-only surface above a dimmed, blurred page. */
html.design-image-viewer-open,
html.design-image-viewer-open body,
body.design-image-viewer-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html body .b2ii-modal.image-viewer-modal:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)) !important;
  overflow: hidden !important;
  background: rgba(3, 7, 12, 0.64) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  isolation: isolate !important;
}

html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-dialog,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-content,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .image-viewer-stage,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-stage,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .energy-label-frame {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-image,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .energy-label-modal-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  box-shadow: none !important;
}

html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-close {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  z-index: 2147483001 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: 999px !important;
  background: rgba(8, 16, 24, 0.9) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-close:hover,
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-close:focus-visible {
  background: rgba(30, 41, 59, 0.96) !important;
}

/* Mobile sidebar selected model 450-456: keep model name, badge, and inch sizes readable. */
@media (max-width: 1024px) {
  .bravia-page {
    --mobile-drawer-model-name-color: #111827;
    --mobile-drawer-model-name-selected-color: color-mix(in srgb, var(--mobile-model-accent, #2563eb) 68%, #0f172a);
    --mobile-drawer-size-color: #64748b;
    --mobile-drawer-size-selected-color: #475569;
  }

  :is(html.dark, html[data-theme="night"]) .bravia-page {
    --mobile-drawer-model-name-color: #f8fafc;
    --mobile-drawer-model-name-selected-color: #ffffff;
    --mobile-drawer-size-color: #cbd5e1;
    --mobile-drawer-size-selected-color: #d6e1ea;
  }

  :is(html.dark, html[data-theme="night"]) body .bravia-page #mobileDrawer .mobile-drawer-model-btn,
  :is(html.dark, html[data-theme="night"]) body .bravia-page #mobileDrawer .mobile-drawer-model-btn:last-child {
    border-color: color-mix(in srgb, var(--mobile-model-accent, #38bdf8) 34%, rgba(125, 211, 252, 0.18)) !important;
    background:
      linear-gradient(180deg, rgba(12, 24, 36, 0.98), rgba(7, 17, 25, 0.96)),
      color-mix(in srgb, var(--mobile-model-accent-soft, #0f2638) 16%, #08131d) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 8px 20px rgba(0, 0, 0, 0.18) !important;
  }

  :is(html.dark, html[data-theme="night"]) body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active {
    border-color: color-mix(in srgb, var(--mobile-model-accent, #38bdf8) 58%, rgba(125, 211, 252, 0.28)) !important;
    background:
      linear-gradient(180deg, rgba(14, 30, 44, 0.99), rgba(8, 20, 31, 0.98)),
      color-mix(in srgb, var(--mobile-model-accent-soft, #0f2638) 22%, #08131d) !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-name {
    color: var(--mobile-drawer-model-name-color) !important;
    opacity: 1 !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes .mobile-size-list,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-sizes .mobile-size-token {
    color: var(--mobile-drawer-size-color) !important;
    opacity: 1 !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active .mobile-drawer-model-name {
    color: var(--mobile-drawer-model-name-selected-color) !important;
    opacity: 1 !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active .mobile-drawer-model-sizes,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active .mobile-drawer-model-sizes .mobile-size-list,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active .mobile-drawer-model-sizes .mobile-size-token {
    color: var(--mobile-drawer-size-selected-color) !important;
    opacity: 1 !important;
  }

  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn .mobile-model-tech-badge,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active .mobile-model-tech-badge {
    background: var(--mobile-model-chip-gradient) !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
}

/* Mobile info table axis: fixed label column, fixed value zone, centered value blocks. */
@media (max-width: 767px) {
  .bravia-page {
    --mobile-axis-label-col: var(--mobile-info-label-col, clamp(148px, 41vw, 168px));
    --mobile-axis-gap: var(--mobile-info-row-gap, 10px);
  }

  html body .bravia-page .mobile-feature-row,
  html body .bravia-page .mobile-feature-row[data-row-id="airplay-google-cast"],
  html body .bravia-page .mobile-feature-row:has([data-row-id="airplay-google-cast"]),
  html body .bravia-page .mobile-design-spec-row {
    grid-template-columns:
      minmax(0, var(--mobile-axis-label-col))
      minmax(0, calc(100% - var(--mobile-axis-label-col) - var(--mobile-axis-gap))) !important;
    column-gap: var(--mobile-axis-gap) !important;
    align-items: center !important;
  }

  html body .bravia-page .mobile-design-spec-label {
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-feature-label {
    display: grid !important;
    grid-template-columns: 7px minmax(0, 1fr) !important;
    align-items: center !important;
    align-self: center !important;
    justify-items: start !important;
    gap: 8px !important;
  }

  html body .bravia-page .mobile-feature-icon-dot {
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  html body .bravia-page .mobile-feature-label-text,
  html body .bravia-page .mobile-feature-label-text-main,
  html body .bravia-page .mobile-feature-label-text-sub {
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone {
    display: grid !important;
    place-items: center !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .bravia-page .mobile-value-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-value-content > :is(
    .mobile-slot-stack,
    .audio-speaker-cell,
    .audio-format-cell,
    .audio-power-cell,
    .series-value-cell,
    .feature-boolean-cell,
    .mobile-design-value-content
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-value-content :is(
    .audio-speaker-config-list,
    .audio-power-lines,
    .bravia-spec-text-stack
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-value-content :is(
    .slot,
    .drop-slot,
    .boolean-slot,
    .tech-text,
    .bravia-spec-text,
    .bravia-spec-text-stack,
    .bravia-spec-text-stack > span,
    .audio-speaker-main,
    .audio-speaker-config-line,
    .audio-format-cell,
    .audio-power-main,
    .audio-power-note,
    .audio-power-line,
    .series-value-main,
    .series-value-line,
    .mobile-design-value-content,
    .mobile-design-value-content *,
    .feature-yes,
    .feature-no,
    .no-feature-mark,
    .series-value-empty,
    .audio-speaker-empty,
    .audio-power-empty
  ) {
    text-align: left !important;
  }

  html body .bravia-page .mobile-value-content :is(
    .feature-yes,
    .feature-no,
    .no-feature-mark,
    .series-value-empty,
    .audio-speaker-empty,
    .audio-power-empty
  ),
  html body .bravia-page .mobile-check-icon,
  html body .bravia-page .mobile-value-zone .boolean-slot {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

/* Mobile info table axis correction: center the wrapper, then left-align text inside it. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-feature-row > .mobile-value-zone,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content {
    flex: 0 1 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > :is(
    .audio-speaker-cell,
    .audio-power-cell,
    .series-value-cell,
    .audio-format-cell,
    .mobile-slot-stack,
    .feature-boolean-cell
  ),
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content > .mobile-design-value-content {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content :is(
    .audio-speaker-config-list,
    .audio-power-lines,
    .bravia-spec-text-stack
  ) {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content :is(
    .audio-speaker-main,
    .audio-speaker-config-line,
    .audio-power-main,
    .audio-power-note,
    .audio-power-line,
    .series-value-main,
    .series-value-line,
    .bravia-spec-text-stack > span
  ) {
    text-align: left !important;
  }
}

/* Mobile design specs 466-474: use one vertical item per specification. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-design-table,
  html body .bravia-page .mobile-design-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .bravia-page .mobile-design-spec-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 5px !important;
    column-gap: 0 !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
  }

  html body .bravia-page .mobile-design-spec-label,
  html body .bravia-page .mobile-design-spec-value {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body .bravia-page .mobile-design-spec-label {
    align-self: start !important;
    justify-self: stretch !important;
  }

  html body .bravia-page .mobile-design-spec-value,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content,
  html body .bravia-page .mobile-design-spec-value .mobile-design-value-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* Mobile audio multi-line values 475-485: center the whole speaker/power cluster. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > :is(
    .audio-speaker-cell,
    .audio-power-cell
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content :is(
    .audio-speaker-main,
    .audio-power-main
  ) {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content :is(
    .audio-speaker-config-list,
    .audio-power-lines
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 5px auto 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content :is(
    .audio-speaker-config-line,
    .audio-power-line,
    .audio-power-note
  ) {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell > .audio-speaker-main,
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-power-cell > .audio-power-main,
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-power-cell > .audio-power-note {
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell > .audio-speaker-config-list,
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-power-cell > .audio-power-lines {
    align-items: center !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell > .audio-speaker-config-list > .audio-speaker-config-line,
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-power-cell > .audio-power-lines > .audio-power-line {
    text-align: center !important;
  }
}

/* Keep mobile design value text on the same left axis as its label. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content > .mobile-design-value-content,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content > .mobile-design-value-content * {
    justify-content: flex-start !important;
    justify-items: start !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-inline: 0 !important;
    text-align: left !important;
  }
}

/* Mobile speaker value 486-495: BRAVIA 7II/9II use one fixed-width vertical value column. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content:has(> .audio-speaker-cell--single-column) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    align-items: stretch !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell--single-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell--single-column > .audio-speaker-main,
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell--single-column > .audio-speaker-config-list,
  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell--single-column > .audio-speaker-config-list > .audio-speaker-config-line {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-feature-row > .mobile-value-zone > .mobile-value-content > .audio-speaker-cell--single-column > .audio-speaker-config-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 3px !important;
    margin-top: 5px !important;
  }
}

/* Mobile drawer controls: compact touch targets, independent of environment color. */
@media (max-width: 1024px) {
  .bravia-page .app-header-actions {
    display: none !important;
  }

  .bravia-page .mobile-drawer-header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 0;
    padding: 10px 16px 6px;
  }

  .bravia-page .mobile-drawer-header-balance {
    grid-column: 1;
    width: 64px;
    height: 30px;
  }

  .bravia-page .mobile-drawer-brand {
    grid-column: 2;
    display: grid;
    place-items: center;
    min-width: 0;
  }

  .bravia-page .mobile-drawer-brand-logo {
    display: block;
    width: min(84px, 100%);
    aspect-ratio: 891.66 / 143.85;
    background-color: var(--pg-logo-color);
    -webkit-mask: url("assets/placeholders/bravia-logo.svg") center / contain no-repeat;
    mask: url("assets/placeholders/bravia-logo.svg") center / contain no-repeat;
  }

  .bravia-page .mobile-drawer-controls {
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: 0;
  }

  .bravia-page .mobile-drawer-theme-toggle,
  .bravia-page .mobile-drawer-language-toggle {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: var(--bravia-mobile-ghost-bg);
    color: var(--bravia-mobile-text);
    box-shadow: none;
    font: inherit;
    font-weight: 750;
    line-height: 1;
  }

  .bravia-page .mobile-drawer-theme-toggle {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
  }

  .bravia-page .mobile-drawer-theme-toggle::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("assets/ui-icons/moon.svg") center / contain no-repeat;
    mask: url("assets/ui-icons/moon.svg") center / contain no-repeat;
  }

  :is(html.light, html[data-theme="day"]) .bravia-page .mobile-drawer-theme-toggle::before {
    -webkit-mask-image: url("assets/ui-icons/sun.svg");
    mask-image: url("assets/ui-icons/sun.svg");
  }

  .bravia-page .mobile-drawer-language-toggle {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .bravia-page .mobile-drawer-theme-toggle:active,
  .bravia-page .mobile-drawer-language-toggle:active {
    background: color-mix(in srgb, var(--bravia-mobile-text) 12%, var(--bravia-mobile-ghost-bg));
  }

  .bravia-page .mobile-drawer-section--models {
    margin-top: 4px;
  }

  .bravia-page .mobile-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 9px;
    margin: 16px 0 0;
    padding: 0 0 calc(var(--mobile-safe-bottom) + 8px);
  }

  .bravia-page .mobile-drawer-footer-divider {
    display: none;
  }

  .bravia-page .mobile-drawer-version-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bravia-mobile-text-soft, var(--text-soft));
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.03em;
  }

  .bravia-page .mobile-drawer-slot-dot {
    font-size: 19px;
    line-height: 1;
  }

  html[data-bravia-env="blue"] .bravia-page .mobile-drawer-slot-dot { color: #2563eb; }
  html[data-bravia-env="green"] .bravia-page .mobile-drawer-slot-dot { color: #16a34a; }
  .bravia-page .mobile-drawer-slot-dot--unknown { color: var(--bravia-mobile-text-soft, var(--text-soft)); }

  .bravia-page .mobile-drawer-release-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 32px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 78%, transparent);
    border-radius: 999px;
    background: var(--bravia-mobile-ghost-bg);
    color: var(--bravia-mobile-text);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
  }

  .bravia-page .mobile-drawer-release-btn:hover,
  .bravia-page .mobile-drawer-release-btn:focus-visible {
    background: color-mix(in srgb, var(--bravia-mobile-text) 9%, var(--bravia-mobile-ghost-bg));
  }

  .bravia-page .mobile-drawer-release-btn:active {
    transform: translateY(1px);
  }

  .release-notes-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    background: rgba(2, 7, 13, 0.56);
    backdrop-filter: blur(6px);
  }

  .release-notes-dialog {
    width: min(100%, 360px);
    max-height: min(76dvh, 560px);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 88%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bravia-mobile-surface) 96%, var(--bravia-mobile-bg));
    color: var(--bravia-mobile-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  }

  .release-notes-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
  }

  .release-notes-dialog h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
  }

  .release-notes-close {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bravia-mobile-border) 78%, transparent);
    border-radius: 50%;
    background: var(--bravia-mobile-ghost-bg);
    color: var(--bravia-mobile-text);
    font: inherit;
    font-size: 26px;
    line-height: 1;
  }

  .release-notes-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 4px 24px 22px 36px;
    color: var(--bravia-mobile-text);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

/* Light sidebar surface must stay opaque so the page gradient cannot show through. */
@media (max-width: 1024px) {
  :is(html.light, html[data-theme="day"]) body .bravia-page .mobile-drawer {
    background: var(--bravia-mobile-surface) !important;
  }
}

/* Mobile design specs: keep the one-column layout, but center the card and each item axis. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-design-spec-section {
    width: min(100%, calc(100vw - 48px)) !important;
    max-width: 390px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  html body .bravia-page .mobile-design-table,
  html body .bravia-page .mobile-design-table tbody {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  html body .bravia-page .mobile-design-spec-row {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 5px !important;
    width: 100% !important;
    padding: 12px 14px !important;
  }

  html body .bravia-page .mobile-design-spec-label,
  html body .bravia-page .mobile-design-spec-row > .mobile-design-spec-label,
  html body .bravia-page .mobile-design-spec-value,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content > .mobile-design-value-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html body .bravia-page .mobile-design-spec-row > .mobile-design-spec-label {
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
  }

  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content > .mobile-design-value-content,
  html body .bravia-page .mobile-design-spec-value > .mobile-value-zone > .mobile-value-content > .mobile-design-value-content * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: center !important;
  }
}

/* Final mobile technology-border geometry override. */
@media (max-width: 1024px) {
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.has-technology-border {
    box-sizing: border-box;
    border: 1px solid transparent !important;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border::before,
  .bravia-page .mobile-model-card--full.has-technology-border > .mobile-model-header::before {
    box-sizing: border-box;
    inset: 0;
    padding: 1px !important;
    border-radius: inherit;
    pointer-events: none;
  }

  .bravia-page .mobile-drawer-model-btn.has-technology-border.is-active::before,
  .bravia-page .mobile-model-card--full.is-selected-model.has-technology-border > .mobile-model-header::before {
    padding: 1px !important;
  }
}

/* Square mobile model cards reserve two controlled size rows only when needed. */
@media (max-width: 767px) {
  html body .bravia-page .mobile-model-choice .mobile-model-choice-sizes.mobile-size-list--split {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, auto));
    justify-items: center;
    gap: 3px;
    width: 100%;
  }

  html body .bravia-page .mobile-model-choice .mobile-size-list--split .mobile-size-list__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    white-space: nowrap;
  }

  html body .bravia-page .mobile-model-choice .mobile-size-list--split .mobile-size-token--value,
  html body .bravia-page .mobile-model-choice .mobile-size-list--split .mobile-size-separator {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Final mobile header and model-list surface guard. */
@media (max-width: 1024px) {
  .bravia-page .app-header {
    display:flex !important; grid-template-columns:none !important;
    align-items:center !important; justify-content:space-between !important;
    gap:8px !important;
  }
  .bravia-page .brand-block {
    display:flex !important; align-items:center !important; gap:8px !important;
    flex:1 1 auto !important; min-width:0 !important;
  }
  .bravia-page .mobile-menu-btn {
    flex:0 0 auto !important; grid-column:auto !important; justify-self:auto !important;
  }
  .bravia-page .brand-mark { display:none !important; }
  .bravia-page .brand-title,
  .bravia-page .pocket-guide-title {
    display:block !important; min-width:0 !important; margin:0 !important; overflow:hidden !important;
    color:var(--bravia-mobile-text) !important;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif !important;
    font-size:15px !important; font-weight:700 !important; line-height:1.15 !important;
    letter-spacing:-0.01em !important; text-transform:uppercase !important;
    text-shadow:none !important;
    text-overflow:ellipsis !important; white-space:nowrap !important;
  }
  .bravia-page .app-header-actions,
  .bravia-page .bravia-header-actions {
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
    flex:0 0 auto !important; min-width:0 !important; height:30px !important;
    margin-left:auto !important; gap:4px !important;
  }
  .bravia-page .header-control-group {
    --header-control-size:30px;
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
    gap:4px !important; min-width:0 !important;
  }
  .bravia-page .app-header-actions .theme-icon-btn,
  .bravia-page .app-header-actions .header-language-toggle {
    width:30px !important; height:30px !important;
    min-width:30px !important; min-height:30px !important;
    padding:0 !important; border:0 !important; border-radius:50% !important;
    display:inline-grid !important; place-items:center !important;
    flex:0 0 30px !important; line-height:1 !important; box-shadow:none !important;
  }
  .bravia-page .app-header-actions .header-language-toggle {
    font-size:17px !important; font-family:inherit !important;
  }
  .bravia-page .app-header-actions #fullscreenToggleBtn { display:none !important; }

  .bravia-page .mobile-drawer-header {
    display:grid !important; grid-template-columns:44px minmax(0,1fr) 44px !important;
    align-items:center !important; gap:0 !important; padding:6px 16px 4px !important;
  }
  .bravia-page .mobile-drawer-header-balance {
    grid-column:1 !important; display:block !important;
    width:40px !important; height:40px !important; justify-self:start !important;
  }
  .bravia-page .mobile-drawer-brand {
    grid-column:2 !important; display:grid !important; place-items:center !important;
    width:100% !important; min-width:0 !important;
  }
  .bravia-page .mobile-drawer-brand-logo {
    display:block !important; width:min(139.5px,100%) !important; height:auto !important;
    aspect-ratio:891.66 / 143.85 !important; flex:0 0 auto !important;
  }
  .bravia-page #mobileDrawerCloseBtn {
    grid-column:3 !important; justify-self:end !important; align-self:center !important;
    display:inline-grid !important; place-items:center !important;
    width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
    margin:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important;
    background:transparent !important; color:var(--bravia-mobile-text) !important;
    box-shadow:none !important; line-height:1 !important;
  }
  .bravia-page #mobileDrawerCloseBtn::before {
    content:"×" !important; display:block !important;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif !important;
    font-size:18px !important; font-weight:600 !important; line-height:1 !important;
  }
  .bravia-page #mobileDrawerCloseBtn:hover {
    background:var(--bravia-mobile-ghost-bg) !important;
  }
  .bravia-page #mobileDrawerCloseBtn:focus-visible {
    outline:2px solid color-mix(in srgb,var(--bravia-mobile-accent) 60%,transparent) !important;
    outline-offset:0 !important;
  }

  html:has(body .bravia-page) {
    --mobile-model-page-surface:#08131d;
    background-color:var(--mobile-model-page-surface) !important;
    background-image:none !important;
  }
  :is(html.light,html[data-theme="day"]):has(body .bravia-page) {
    --mobile-model-page-surface:#fff;
  }
  html:has(body .bravia-page) body {
    background-color:var(--mobile-model-page-surface) !important;
    background-image:none !important;
  }
  .bravia-page { --mobile-model-list-surface:var(--mobile-model-page-surface,#08131d); }
  .bravia-page,
  .bravia-page .app-main,
  .bravia-page #mainLayout,
  .bravia-page .matrix-panel,
  .bravia-page #mobileCardView,
  .bravia-page .mobile-model-choice-screen,
  .bravia-page .mobile-model-choice-grid {
    background-color:var(--mobile-model-list-surface) !important; background-image:none !important;
  }
  :is(html.light,html[data-theme="day"]) body .bravia-page,
  :is(html.light,html[data-theme="day"]) body .bravia-page .app-main,
  :is(html.light,html[data-theme="day"]) body .bravia-page #mainLayout,
  :is(html.light,html[data-theme="day"]) body .bravia-page .matrix-panel,
  :is(html.light,html[data-theme="day"]) body .bravia-page #mobileCardView,
  :is(html.light,html[data-theme="day"]) body .bravia-page .mobile-model-choice-screen,
  :is(html.light,html[data-theme="day"]) body .bravia-page .mobile-model-choice-grid {
    background-color:var(--mobile-model-list-surface) !important; background-image:none !important;
  }
  :is(html.dark,html[data-theme="night"]) body .bravia-page,
  :is(html.dark,html[data-theme="night"]) body .bravia-page .app-main,
  :is(html.dark,html[data-theme="night"]) body .bravia-page #mainLayout,
  :is(html.dark,html[data-theme="night"]) body .bravia-page .matrix-panel,
  :is(html.dark,html[data-theme="night"]) body .bravia-page #mobileCardView,
  :is(html.dark,html[data-theme="night"]) body .bravia-page .mobile-model-choice-screen,
  :is(html.dark,html[data-theme="night"]) body .bravia-page .mobile-model-choice-grid {
    background-color:var(--mobile-model-list-surface) !important; background-image:none !important;
  }
  .bravia-page .mobile-model-choice-screen::before,
  .bravia-page .mobile-model-choice-screen::after,
  .bravia-page .mobile-model-choice-grid::before,
  .bravia-page .mobile-model-choice-grid::after {
    content:none !important; display:none !important; pointer-events:none !important;
  }
  .bravia-page .mobile-model-choice-screen,
  .bravia-page .mobile-model-choice-grid {
    box-sizing:border-box !important; margin-inline:auto !important;
  }
  .bravia-page.mobile-model-pending .app-main,
  .bravia-page.mobile-model-pending #mainLayout {
    min-height:calc(100dvh - var(--mobile-safe-top,0px) - 54px) !important;
  }
  .bravia-page.mobile-model-pending #mobileCardView {
    min-height:calc(100dvh - var(--mobile-safe-top,0px) - 88px) !important;
    align-content:start !important;
    overflow-x:clip !important;
    overflow-y:visible !important;
  }
  .bravia-page #mobileDrawer,
  .bravia-page #mobileDrawerContent,
  .bravia-page .mobile-drawer-shell,
  .bravia-page .mobile-drawer-section--models,
  .bravia-page .mobile-drawer-model-list {
    background-color:var(--mobile-model-list-surface) !important;
    background-image:none !important; box-shadow:none !important; filter:none !important;
  }
  .bravia-page #mobileDrawer {
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .bravia-page .mobile-drawer-shell {
    box-sizing:border-box !important; padding-inline:10px !important;
  }
  :is(html.light,html[data-theme="day"],html.dark,html[data-theme="night"]) body .bravia-page #mobileDrawer .mobile-drawer-model-btn,
  :is(html.light,html[data-theme="day"],html.dark,html[data-theme="night"]) body .bravia-page #mobileDrawer .mobile-drawer-model-btn:last-child,
  :is(html.light,html[data-theme="day"],html.dark,html[data-theme="night"]) body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active {
    background:var(--mobile-model-list-surface) !important; box-shadow:none !important;
    filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .bravia-page #mobileDrawer::before,
  .bravia-page #mobileDrawer::after,
  .bravia-page #mobileDrawerContent::before,
  .bravia-page #mobileDrawerContent::after,
  .bravia-page .mobile-drawer-shell::before,
  .bravia-page .mobile-drawer-shell::after,
  .bravia-page .mobile-drawer-model-list::before,
  .bravia-page .mobile-drawer-model-list::after {
    content:none !important; display:none !important; pointer-events:none !important;
  }
  :is(html.dark,html[data-theme="night"]) .bravia-page .mobile-model-choice {
    border-color:color-mix(in srgb,var(--mobile-model-accent,#38bdf8) 34%,rgba(125,211,252,.18)) !important;
    background:linear-gradient(180deg,rgba(12,24,36,.98),rgba(7,17,25,.96)),color-mix(in srgb,var(--mobile-model-accent-soft,#0f2638) 16%,var(--mobile-model-list-surface)) !important;
    color:#f8fafc !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.18) !important;
  }
  :is(html.dark,html[data-theme="night"]) .bravia-page .mobile-model-choice::after {
    background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%) !important;
  }
  :is(html.dark,html[data-theme="night"]) .bravia-page .mobile-model-choice span { color:#cbd5e1 !important; }
}

/* Keep the mobile model gate coherent on landscape phones and tablet smoke widths. */
@media (min-width:768px) and (max-width:1024px) {
  .bravia-page.mobile-model-pending .mobile-model-context,
  .bravia-page.mobile-model-pending .app-toolbar { display:none !important; }
  .bravia-page.mobile-model-pending #mobileCardView {
    display:block !important;
    padding:18px max(18px,env(safe-area-inset-left,0px)) 24px max(18px,env(safe-area-inset-right,0px)) !important;
  }
  .bravia-page .mobile-model-choice-screen {
    width:100% !important; max-width:820px !important; margin:0 auto !important;
    display:grid !important; justify-items:center !important; box-sizing:border-box !important;
  }
  .bravia-page .mobile-model-choice-grid {
    display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important; width:100% !important; max-width:820px !important;
    margin-inline:auto !important; box-sizing:border-box !important;
  }
  .bravia-page .mobile-model-choice {
    position:relative !important; display:grid !important; align-content:center !important; justify-items:center !important;
    gap:9px !important; min-height:118px !important; padding:18px 12px 16px !important; overflow:hidden !important;
    border:1px solid color-mix(in srgb,var(--mobile-model-accent,#8fb3d9) 28%,rgba(255,255,255,.74)) !important;
    border-radius:22px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.94)),color-mix(in srgb,var(--mobile-model-accent-soft,#eef6ff) 18%,#fff) !important;
    color:#111827 !important; text-align:center !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 8px 20px rgba(15,23,42,.055) !important;
    box-sizing:border-box !important; -webkit-tap-highlight-color:transparent !important;
  }
  .bravia-page .mobile-model-choice::after {
    content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important;
    border-radius:inherit !important; background:linear-gradient(180deg,rgba(255,255,255,.44),transparent 42%) !important;
    pointer-events:none !important;
  }
  .bravia-page .mobile-model-choice > * { position:relative !important; z-index:1 !important; }
  .bravia-page .mobile-model-choice strong {
    font-size:15.5px !important; font-weight:720 !important; line-height:1.15 !important;
  }
  .bravia-page .mobile-model-choice span {
    color:#64748b; font-size:12px; font-weight:500; line-height:1.25;
  }
  :is(html.dark,html[data-theme="night"]) .bravia-page .mobile-model-choice {
    border-color:color-mix(in srgb,var(--mobile-model-accent,#38bdf8) 34%,rgba(125,211,252,.18)) !important;
    background:linear-gradient(180deg,rgba(12,24,36,.98),rgba(7,17,25,.96)),color-mix(in srgb,var(--mobile-model-accent-soft,#0f2638) 16%,var(--mobile-model-list-surface)) !important;
    color:#f8fafc !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.18) !important;
  }
  :is(html.dark,html[data-theme="night"]) .bravia-page .mobile-model-choice::after {
    background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%) !important;
  }
  :is(html.dark,html[data-theme="night"]) .bravia-page .mobile-model-choice span { color:#cbd5e1 !important; }
}
.release-notes-dialog { background:#071621 !important; color:#f8fbff !important; opacity:1 !important; }
.release-notes-dialog h2,.release-notes-list { color:#f8fbff !important; }
.release-notes-close { background:#183548 !important; color:#fff !important; }
:is(html.light,html[data-theme="day"]) .release-notes-dialog { background:#fff !important; color:#102030 !important; }
:is(html.light,html[data-theme="day"]) .release-notes-dialog h2,:is(html.light,html[data-theme="day"]) .release-notes-list { color:#102030 !important; }
:is(html.light,html[data-theme="day"]) .release-notes-close { background:#e7f0f5 !important; color:#102030 !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-modal-dialog { border-radius:0 !important; overflow:visible !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-stage { width:fit-content !important; height:fit-content !important; max-width:calc(100vw - 72px) !important; max-height:calc(100dvh - 96px) !important; padding:0 !important; box-sizing:border-box !important; border-radius:20px !important; overflow:hidden !important; background:transparent !important; }
html body .b2ii-modal.image-viewer-modal:not([hidden]) .b2ii-spec-image { max-width:calc(100vw - 72px) !important; max-height:calc(100dvh - 96px) !important; width:auto !important; height:auto !important; object-fit:contain !important; border-radius:20px !important; }
html body .b2ii-modal.energy-label-modal:not([hidden]) .energy-label-modal-dialog {
  display:grid !important; grid-template-rows:44px minmax(0,1fr) !important; gap:12px !important;
  width:min(520px,calc(100vw - 48px)) !important; height:calc(100dvh - 48px) !important;
  max-width:calc(100vw - 48px) !important; max-height:calc(100dvh - 48px) !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
}
html body .b2ii-modal.energy-label-modal:not([hidden]) .energy-label-modal-close {
  position:static !important; grid-row:1 !important; justify-self:end !important; align-self:start !important;
  top:auto !important; right:auto !important;
}
html body .b2ii-modal.energy-label-modal:not([hidden]) .energy-label-modal-body {
  grid-row:2 !important; width:100% !important; height:100% !important; min-height:0 !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
}
html body .b2ii-modal.energy-label-modal:not([hidden]) .energy-label-stage {
  display:grid !important; place-items:center !important;
  width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
}
html body .b2ii-modal.energy-label-modal:not([hidden]) .energy-label-modal-image {
  display:block !important; width:auto !important; height:auto !important;
  max-width:min(240px,calc(100vw - 48px)) !important;
  max-height:min(520px,calc(100dvh - 104px)) !important;
  margin:auto !important; padding:0 !important; object-fit:contain !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
}

/* Theme contrast contract: theme-sensitive colors switch atomically with html[data-theme]. */
:root {
  --pg-contrast-page:#061017;
  --pg-contrast-surface:#081621;
  --pg-contrast-text-primary:#f8fafc;
  --pg-contrast-text-secondary:#cbd5e1;
  --pg-contrast-text-muted:#aeb8c5;
  --pg-contrast-icon:#f8fafc;
  --pg-contrast-header-icon:#f8fafc;
  --pg-contrast-header-title:#f8fafc;
  --pg-contrast-divider:rgba(125,211,252,.18);
  --pg-contrast-tab-active-text:#061017;
  --pg-contrast-tab-inactive-text:#cbd5e1;
  --pg-contrast-overlay:rgba(2,7,13,.56);
}

:is(html.light,html[data-theme="day"]) {
  --pg-contrast-page:#f4f7fa;
  --pg-contrast-surface:#fff;
  --pg-contrast-text-primary:#13202b;
  --pg-contrast-text-secondary:#405160;
  --pg-contrast-text-muted:#5f6f7d;
  --pg-contrast-icon:#13202b;
  --pg-contrast-header-icon:#f8fafc;
  --pg-contrast-header-title:#f8fafc;
  --pg-contrast-divider:rgba(18,39,56,.16);
  --pg-contrast-tab-active-text:#061017;
  --pg-contrast-tab-inactive-text:#405160;
  --pg-contrast-overlay:rgba(15,23,42,.42);
}

.bravia-page .app-header,
.bravia-page .app-toolbar,
.bravia-page .pocket-guide-title,
.bravia-page .mobile-spec-card,
.bravia-page .mobile-feature-row,
.bravia-page .mobile-design-spec-row {
  transition:none !important;
}

.bravia-page .app-header,
.bravia-page .app-toolbar {
  opacity:1 !important;
  filter:none !important;
}

.bravia-page .pocket-guide-title {
  color:var(--pg-contrast-header-title) !important;
  opacity:1 !important;
}

html body .bravia-page .mobile-menu-btn,
html body .bravia-page .mobile-menu-btn::before,
html body .bravia-page .mobile-menu-btn::after,
html body .bravia-page .app-header .app-header-actions .bravia-action-button,
html body .bravia-page .app-header .app-header-actions .header-language-toggle {
  color:var(--pg-contrast-header-icon) !important;
}

.bravia-page .mobile-menu-btn,
.bravia-page .app-header-actions .bravia-action-button,
.bravia-page .app-header-actions .header-language-toggle,
.bravia-page .app-header-actions .toolbar-icon-img,
.bravia-page .app-header-actions .toolbar-icon-mask {
  opacity:1 !important;
  transition:transform 120ms ease,box-shadow 120ms ease !important;
}

html body .bravia-page .main-tabs .main-tab {
  color:var(--pg-contrast-tab-inactive-text) !important;
  transition:transform 120ms ease,box-shadow 120ms ease !important;
}

html body .bravia-page .main-tabs .main-tab:not(.active):not(.is-active):not([aria-selected="true"]):hover,
html body .bravia-page .main-tabs .main-tab:not(.active):not(.is-active):not([aria-selected="true"]):focus-visible {
  color:var(--pg-contrast-text-primary) !important;
}

html body .bravia-page .main-tabs .main-tab.active,
html body .bravia-page .main-tabs .main-tab.is-active,
html body .bravia-page .main-tabs .main-tab[aria-selected="true"],
html body .bravia-page .main-tabs .main-tab:not(.main-tab-all).active,
html body .bravia-page .main-tabs .main-tab:not(.main-tab-all).is-active,
html body .bravia-page .main-tabs .main-tab:not(.main-tab-all)[aria-selected="true"] {
  color:var(--pg-contrast-tab-active-text) !important;
}

.bravia-page .row-label-text,
.bravia-page .mobile-feature-label-text,
.bravia-page .mobile-feature-label-text-main,
.bravia-page .mobile-feature-label-text-sub,
.bravia-page .mobile-design-model-eyebrow,
.bravia-page .mobile-design-model-meta,
.bravia-page .mobile-design-spec-label,
.bravia-page .mobile-model-code,
.bravia-page .mobile-model-series,
.bravia-page .mobile-model-sizes {
  color:var(--pg-contrast-text-secondary) !important;
  transition:none !important;
}

.bravia-page .feature-cell,
.bravia-page .mobile-design-model-title,
.bravia-page .mobile-design-spec-value,
.bravia-page .mobile-model-header h3,
.bravia-page .overview-model-name,
.bravia-page .slot,
.bravia-page .drop-slot,
.bravia-page .bravia-spec-text,
.bravia-page .feature-text-fallback,
.bravia-page .text-feature,
.bravia-page .slot-fallback {
  color:var(--pg-contrast-text-primary) !important;
  transition:none !important;
}

.bravia-page .no-feature-mark {
  color:var(--pg-contrast-text-muted) !important;
  transition:none !important;
}

.bravia-page .row-label-icon,
.bravia-page .mobile-feature-icon-dot {
  color:var(--pg-contrast-icon) !important;
  transition:none !important;
}

.bravia-page .mobile-feature-icon-dot {
  background-color:var(--bravia-mobile-primary,var(--pg-contrast-icon)) !important;
}

.bravia-page .mobile-feature-row,
.bravia-page .mobile-design-spec-row {
  border-bottom-color:var(--pg-contrast-divider) !important;
}

@media (max-width:1024px) {
  .bravia-page {
    --pg-contrast-page:var(--bravia-mobile-bg);
    --pg-contrast-surface:var(--bravia-mobile-surface);
    --pg-contrast-text-primary:var(--bravia-mobile-text);
    --pg-contrast-text-secondary:#d1d1d6;
    --pg-contrast-text-muted:#a8a8ad;
    --pg-contrast-icon:var(--bravia-mobile-text);
    --pg-contrast-header-icon:var(--bravia-mobile-text);
    --pg-contrast-header-title:var(--bravia-mobile-text);
    --pg-contrast-divider:rgba(255,255,255,.16);
    --pg-contrast-tab-active-text:#061017;
    --pg-contrast-tab-inactive-text:#d1d1d6;
  }

  :is(html.light,html[data-theme="day"]) .bravia-page {
    --pg-contrast-text-secondary:#3a3a3c;
    --pg-contrast-text-muted:#5c5c63;
    --pg-contrast-divider:rgba(60,60,67,.18);
    --pg-contrast-tab-inactive-text:#263746;
  }

  .bravia-page .mobile-model-choice strong {
    color:var(--pg-contrast-text-primary) !important;
  }

  .bravia-page .mobile-model-choice-sizes,
  .bravia-page .mobile-size-list__row,
  .bravia-page .mobile-size-token--value,
  .bravia-page .mobile-size-separator {
    color:var(--pg-contrast-text-secondary) !important;
  }
}

@media (min-width:1025px) {
  :is(html.light,html[data-theme="day"]) .bravia-page .app-header-actions .toolbar-icon-img[src$=".svg"] {
    filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important;
  }
}

/* Release channel dot follows the actual Blue/Green runtime slot. */
.bravia-page .mobile-drawer-slot-dot { color:var(--text-soft) !important; }
html[data-bravia-env="blue"] .bravia-page .mobile-drawer-slot-dot,
.bravia-page .mobile-drawer-slot-dot--blue { color:#2563eb !important; }
html[data-bravia-env="green"] .bravia-page .mobile-drawer-slot-dot,
.bravia-page .mobile-drawer-slot-dot--green { color:#16a34a !important; }

/* Blue UI 2026-08-11: compact sidebar and a clean, no-horizontal-scroll All matrix. */
@media (max-width:1024px) {
  html body .bravia-page #mobileDrawer,
  html body .bravia-page #mobileDrawer .mobile-drawer-shell,
  html body .bravia-page #mobileDrawer .mobile-drawer-section,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn:last-child,
  html body .bravia-page #mobileDrawer .mobile-drawer-model-btn.is-active,
  html body .bravia-page #mobileDrawer .mobile-drawer-action-btn,
  html body .bravia-page #mobileDrawer .mobile-drawer-tab-btn {
    border-radius:7px !important;
  }
}

@media (min-width:1025px) {
  html body .bravia-page section.matrix-panel.table-panel,
  html body .bravia-page section.matrix-panel.table-panel > *,
  html body .bravia-page .table-scroll,
  html body .bravia-page #lineupTable {
    border-radius:10px !important;
  }

  html body .bravia-page section.matrix-panel.table-panel.is-combined-all {
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  html body .bravia-page #lineupTable.is-combined-all {
    --row-label-width:96px;
    table-layout:fixed !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .model-header-cell {
    width:calc((100% - var(--row-label-width)) / var(--model-column-count, 8)) !important;
    min-width:0 !important;
    padding-inline:4px !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .row-label-cell {
    width:var(--row-label-width) !important;
    min-width:var(--row-label-width) !important;
    max-width:var(--row-label-width) !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .corner-cell {
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.06) !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .corner-cell::after {
    content:none !important;
    display:none !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .combined-all-corner-brand {
    display:flex;
    min-height:116px;
    align-items:center;
    justify-content:center;
    padding:8px;
  }

  html body .bravia-page #lineupTable.is-combined-all .combined-all-corner-logo {
    width:min(118px,82%);
    min-width:72px;
    height:36px;
    max-height:36px;
  }

  html body .bravia-page #lineupTable.is-combined-all .tv-model-name {
    font-size:clamp(10px, .86vw, 13px) !important;
    overflow-wrap:anywhere !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .tv-model-sizes {
    font-size:9px !important;
    line-height:1.15 !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .feature-cell,
  html body .bravia-page #lineupTable.is-combined-all .feature-cell-inner {
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
}

/* Desktop polish: circular header controls and a stable eight-model All matrix. */
@media (min-width:1025px) {
  .bravia-page .header-control-group {
    --header-control-size:17px;
    gap:3px;
  }

  html body .bravia-page .app-header .app-header-actions .header-control-chip {
    width:var(--header-control-size) !important;
    height:var(--header-control-size) !important;
    min-width:var(--header-control-size) !important;
    min-height:var(--header-control-size) !important;
    padding:0 !important;
    box-sizing:border-box;
    border:1px solid rgba(125,211,252,.18) !important;
    border-radius:50% !important;
    background:var(--header-control-bg) !important;
    overflow:hidden;
  }

  html body .bravia-page .app-header .app-header-actions .header-control-chip .toolbar-icon-img,
  html body .bravia-page .app-header .app-header-actions .header-control-chip .toolbar-icon-mask {
    width:11px;
    height:11px;
    min-width:11px;
    min-height:11px;
  }

  :is(html.light,html[data-theme="day"]) body .bravia-page .app-header .app-header-actions .header-control-chip {
    border-color:rgba(18,39,56,.14) !important;
  }

  html body .bravia-page .app-header .app-header-actions .header-language-flag {
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    border-radius:50%;
    object-fit:cover;
  }

  .bravia-page .app-toolbar {
    margin-bottom:4px;
  }

  .bravia-page .app-main,
  .bravia-page #mainLayout {
    padding-top:0;
  }

  html body .bravia-page section.matrix-panel.table-panel.is-combined-all {
    border-radius:0 !important;
    overflow:hidden !important;
  }

  html body .bravia-page section.matrix-panel.table-panel.is-combined-all > .table-scroll {
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    scrollbar-gutter:auto;
    scrollbar-width:thin;
  }

  html body .bravia-page section.matrix-panel.table-panel.is-combined-all > .table-scroll::-webkit-scrollbar {
    width:7px;
  }

  html body .bravia-page section.matrix-panel.table-panel.is-combined-all > .table-scroll::-webkit-scrollbar-track {
    background:transparent;
  }

  html body .bravia-page section.matrix-panel.table-panel.is-combined-all > .table-scroll::-webkit-scrollbar-thumb {
    border:2px solid transparent;
    border-radius:999px;
    background:rgba(148,163,184,.62);
    background-clip:padding-box;
  }

  html body .bravia-page #lineupTable.is-combined-all {
    --row-label-width:clamp(168px,14vw,208px);
    border-radius:5px !important;
    background-clip:padding-box;
  }

  html body .bravia-page #lineupTable.is-combined-all th,
  html body .bravia-page #lineupTable.is-combined-all td {
    box-sizing:border-box;
  }

  html body .bravia-page #lineupTable.is-combined-all .model-header-cell,
  html body .bravia-page #lineupTable.is-combined-all .feature-cell {
    width:calc((100% - var(--row-label-width)) / var(--model-column-count,8)) !important;
    min-width:0 !important;
    max-width:none !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .feature-cell {
    padding-inline:3px;
  }

  html body .bravia-page #lineupTable.is-combined-all .row-label-text {
    max-width:calc(100% - 29px);
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
  }

  html body .bravia-page #lineupTable.is-combined-all .model-header-content,
  html body .bravia-page #lineupTable.is-combined-all .tv-image-frame {
    min-width:0;
  }

  html body .bravia-page #lineupTable.is-combined-all .model-header-row > :first-child {
    border-top-left-radius:5px !important;
  }

  html body .bravia-page #lineupTable.is-combined-all .model-header-row > :last-child {
    border-top-right-radius:5px !important;
  }

  html body .bravia-page #lineupTable.is-combined-all tr:last-child > :first-child {
    border-bottom-left-radius:5px !important;
  }

  html body .bravia-page #lineupTable.is-combined-all tr:last-child > :last-child {
    border-bottom-right-radius:5px !important;
  }
}

/* Blue/Green UI 2026-08-11: compact transparent controls and one stable table canvas. */
@media (min-width:1025px) {
  .bravia-page .header-control-group {
    --header-control-size:32px;
    gap:5px;
  }

  .bravia-page .app-header-actions {
    height:36px;
  }

  html body .bravia-page .app-header .app-header-actions .header-control-chip {
    width:var(--header-control-size) !important;
    height:var(--header-control-size) !important;
    min-width:var(--header-control-size) !important;
    min-height:var(--header-control-size) !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden;
  }

  html body .bravia-page .app-header .app-header-actions .header-control-chip:hover {
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#00d4aa !important;
  }

  html body .bravia-page .app-header .app-header-actions .header-control-chip:focus-visible {
    outline:2px solid rgba(0,212,170,.72) !important;
    outline-offset:2px !important;
  }

  html body .bravia-page .app-header .app-header-actions .header-control-chip .toolbar-icon-img,
  html body .bravia-page .app-header .app-header-actions .header-control-chip .toolbar-icon-mask {
    width:17px;
    height:17px;
    min-width:17px;
    min-height:17px;
  }

  html body .bravia-page .app-header .app-header-actions .header-language-flag {
    width:24px;
    height:24px;
    min-width:24px;
    min-height:24px;
    border-radius:50%;
    object-fit:cover;
  }

  :is(html.light,html[data-theme="day"]) body .bravia-page .app-header .app-header-actions .header-control-chip {
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html body .bravia-page .app-main,
  html body .bravia-page #mainLayout,
  html body .bravia-page section.matrix-panel.table-panel {
    min-height:0 !important;
    overflow:hidden !important;
  }

  html body .bravia-page section.matrix-panel.table-panel,
  html body .bravia-page section.matrix-panel.table-panel.is-combined-all {
    height:100% !important;
    padding:6px !important;
    border:1px solid rgba(125,211,252,.14) !important;
    border-radius:16px !important;
    background:linear-gradient(180deg,rgba(8,19,28,.96),rgba(5,12,19,.94)) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
  }

  :is(html.light,html[data-theme="day"]) body .bravia-page section.matrix-panel.table-panel,
  :is(html.light,html[data-theme="day"]) body .bravia-page section.matrix-panel.table-panel.is-combined-all {
    border-color:rgba(79,109,245,.12) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(244,246,251,.97)) !important;
    box-shadow:0 12px 28px rgba(79,109,245,.08) !important;
  }

  html body .bravia-page #tableScroll,
  html body .bravia-page section.matrix-panel.table-panel.is-combined-all > #tableScroll {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    border:0 !important;
    border-radius:10px !important;
    background:rgba(4,12,19,.30) !important;
    box-shadow:none !important;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    overscroll-behavior:contain;
  }

  :is(html.light,html[data-theme="day"]) body .bravia-page #tableScroll {
    background:rgba(255,255,255,.82) !important;
  }

  html body .bravia-page #lineupTable,
  html body .bravia-page #lineupTable.is-combined-all {
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
    border-radius:10px !important;
  }

  html body .bravia-page .design-series-panel {
    width:100% !important;
    min-height:100% !important;
    box-sizing:border-box !important;
  }

  html body .bravia-page .design-series-tabs {
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    margin:0 0 12px !important;
    padding:8px 10px !important;
    scrollbar-gutter:stable;
  }

  html body .bravia-page .design-series-tab,
  html body .bravia-page .design-series-tab.active,
  html body .bravia-page .design-series-tab.is-active {
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    transform:none !important;
  }

  html body .bravia-page .spec-table-scroller {
    max-height:none !important;
    scrollbar-gutter:stable;
  }
}