/* Mock center final skin: frosted layout aligned with the current web style. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    padding-top: 96px !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }
}

/* Mock palette v20: align with mobile home/question-bank glass palette. */
html body.view-mock {
  background:
    radial-gradient(circle at 12% 0%, rgba(225, 248, 244, 0.12), transparent 36%),
    radial-gradient(circle at 92% 0%, rgba(255, 250, 233, 0.1), transparent 34%),
    linear-gradient(180deg, #fbfcfd 0%, #f8fafb 56%, #f6f8f9 100%) !important;
}

html body.view-mock #mock.active-view {
  --mock-palette-ink: #171b22;
  --mock-palette-text: rgba(82, 90, 101, 0.72);
  --mock-palette-muted: rgba(139, 147, 161, 0.82);
  --mock-palette-accent: #227c68;
  --mock-palette-accent-soft: rgba(235, 255, 248, 0.58);
  --mock-palette-warm: rgba(255, 247, 231, 0.68);
  --mock-palette-warm-border: rgba(217, 183, 116, 0.42);
  --mock-palette-card-bg:
    linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(251, 253, 253, 0.24)),
    rgba(255, 255, 255, 0.18);
  --mock-palette-card-bg-light:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(244, 248, 249, 0.22)),
    rgba(255, 255, 255, 0.16);
  --mock-palette-border: rgba(255, 255, 255, 0.72);
  --mock-palette-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(20, 28, 38, 0.045),
    0 14px 34px -30px rgba(20, 28, 44, 0.3);
  --mock-palette-shadow-row:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(20, 28, 38, 0.032),
    0 16px 34px rgba(31, 41, 55, 0.06);
}

html body.view-mock #mock.active-view :is(
  .mock-mobile-exam-card,
  .mock-paper-toolbar .search-field,
  .mock-mobile-filter-panel,
  .mock-redesign-history,
  #mockCommandCenter.mock-command-center,
  .mock-report-panel,
  .pte-history-empty,
  .pte-history-row,
  .mock-mobile-filter-group
) {
  border-color: var(--mock-palette-border) !important;
  background: var(--mock-palette-card-bg) !important;
  box-shadow: var(--mock-palette-shadow) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
}

html body.view-mock #mock.active-view :is(
  .pte-paper-row,
  .pte-history-empty,
  .pte-history-row,
  .mock-mobile-filter-group,
  .mock-desktop-command-metrics article
) {
  background: var(--mock-palette-card-bg-light) !important;
  box-shadow: var(--mock-palette-shadow-row) !important;
}

html body.view-mock #mock.active-view :is(
  .mock-page-head h2,
  .mock-mobile-exam-card strong,
  .mock-redesign-history-head span,
  .pte-history-empty strong,
  .pte-history-main strong,
  .pte-paper-copy strong,
  .mock-desktop-command-copy strong,
  .mock-report-panel h2,
  .mock-desktop-command-metrics article span,
  .mock-report-empty-redesign strong
) {
  color: var(--mock-palette-ink) !important;
}

html body.view-mock #mock.active-view :is(
  .mock-mobile-exam-card select,
  .mock-paper-toolbar .search-field span,
  .mock-paper-toolbar .search-field input,
  .mock-paper-toolbar .search-field input::placeholder,
  .pte-history-empty span,
  .pte-history-main span,
  .pte-paper-copy span,
  .mock-desktop-command-copy p,
  .mock-report-panel p,
  .mock-report-empty-redesign p,
  .mock-desktop-command-metrics article small,
  .pte-paper-meta span
) {
  color: var(--mock-palette-text) !important;
}

html body.view-mock #mock.active-view :is(
  .mock-mobile-exam-card span,
  .mock-mobile-filter-group > span,
  .mock-desktop-command-copy span,
  .mock-report-panel .eyebrow,
  .mock-redesign-history-head small,
  .mock-history-more
) {
  color: var(--mock-palette-accent) !important;
}

html body.view-mock #mock.active-view :is(.mock-paper-tabs, .mock-paper-filters) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(235, 241, 246, 0.18)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html body.view-mock #mock.active-view :is(.mock-paper-tabs button, .mock-paper-filters button) {
  color: rgba(62, 72, 87, 0.72) !important;
}

html body.view-mock #mock.active-view :is(.mock-paper-tabs button.active, .mock-paper-filters button.active) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: var(--mock-palette-accent-soft) !important;
  color: rgba(9, 114, 94, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
  border-color: var(--mock-palette-warm-border) !important;
  background: var(--mock-palette-warm) !important;
  color: #60420f !important;
}

html body.view-mock #mock.active-view :is(.mock-filter-toggle, .pte-paper-row i) {
  color: rgba(118, 137, 164, 0.82) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle path {
  stroke: currentColor !important;
}

html body.view-mock #mock.active-view.mock-filters-open .mock-filter-toggle,
html body.view-mock #mock.active-view .mock-filter-toggle:focus-visible {
  border-color: var(--mock-palette-border) !important;
  background:
    radial-gradient(circle at 25% 16%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(232, 238, 244, 0.22)),
    rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(19, 28, 39, 0.05),
    0 12px 24px rgba(31, 41, 55, 0.055) !important;
}

html body.view-mock #mock.active-view .mock-desktop-start,
html body.view-mock #mock.active-view .mock-page-actions .primary-btn {
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(245, 249, 250, 0.16)),
    rgba(255, 255, 255, 0.12) !important;
  color: rgba(35, 42, 53, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(20, 28, 38, 0.032),
    0 16px 34px rgba(31, 41, 55, 0.06) !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-progress i b,
html body.view-mock #mock.active-view #mockProgressFill {
  background: rgba(34, 124, 104, 0.72) !important;
}

/* Mobile mock top controls hard final: appended after legacy duplicates. */
@media (max-width: 760px) {
  html body.view-mock .main > .topbar,
  html body.view-mock .sidebar .exam-type-picker {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 29px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field span {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 34px !important;
    color: rgba(39, 48, 61, 0.48) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-filter-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-panel {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-paper-workbench .mock-mobile-filter-panel {
    max-height: 260px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 30px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 14px 48px !important;
    align-content: start !important;
    align-items: start !important;
    gap: 6px !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group > span {
    position: static !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 0 0 4px !important;
    color: rgba(34, 124, 104, 0.68) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-filters {
    grid-column: 1 !important;
    grid-row: 2 / 3 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-filters button {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* Mobile mock top controls final repair: keep the header, search, and filter groups aligned. */
@media (max-width: 760px) {
  html body.view-mock .main > .topbar,
  html body.view-mock .sidebar .exam-type-picker {
    display: none !important;
  }

  html body.view-mock #mock.active-view {
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding-top: 18px !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 66px !important;
    margin: 0 0 14px !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    margin: 0 !important;
    color: #161c27 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-page-head p {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions {
    display: flex !important;
    justify-content: flex-end !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions .primary-btn {
    min-width: 112px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 29px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(235, 241, 246, 0.2)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 16px 34px rgba(31, 41, 55, 0.06) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
    backdrop-filter: blur(22px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span {
    position: static !important;
    display: block !important;
    min-width: 34px !important;
    color: rgba(39, 48, 61, 0.48) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(35, 42, 53, 0.9) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
    color: rgba(78, 89, 106, 0.42) !important;
    opacity: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    grid-column: 2 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(235, 241, 246, 0.18)),
      rgba(255, 255, 255, 0.18) !important;
    color: rgba(118, 137, 164, 0.86) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 16px 34px rgba(31, 41, 55, 0.055) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
    backdrop-filter: blur(22px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle span {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    max-height: 260px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.74), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(235, 241, 246, 0.18)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 18px 38px rgba(31, 41, 55, 0.07) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 14px 48px !important;
    align-content: start !important;
    align-items: start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    position: static !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 0 0 4px !important;
    color: rgba(34, 124, 104, 0.68) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    grid-column: 1 !important;
    grid-row: 2 / 3 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(235, 241, 246, 0.16)),
      rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(62, 72, 87, 0.7) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    background:
      linear-gradient(145deg, rgba(219, 248, 242, 0.82), rgba(235, 252, 248, 0.56)) !important;
    color: rgba(9, 114, 94, 0.96) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  }
}

/* Mock typography v24: final override, softer and more embedded. */
html body.view-mock #mock.active-view {
  --mock-type-ink: rgba(31, 38, 48, 0.9);
  --mock-type-title: rgba(21, 26, 34, 0.92);
  --mock-type-body: rgba(82, 91, 106, 0.72);
  color: var(--mock-type-ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html body.view-mock #mock.active-view .mock-page-head h2 {
  font-size: clamp(32px, 2vw, 42px) !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  color: var(--mock-type-title) !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-command-copy strong, .mock-report-panel h2) {
  font-size: clamp(28px, 2vw, 38px) !important;
  font-weight: 740 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  color: var(--mock-type-title) !important;
}

html body.view-mock #mock.active-view :is(
  .pte-paper-copy strong,
  .pte-history-main strong,
  .pte-history-empty strong,
  .mock-redesign-history-head span,
  .mock-paper-intro strong
) {
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  color: var(--mock-type-ink) !important;
}

html body.view-mock #mock.active-view .pte-paper-copy strong {
  font-size: clamp(17px, 1.15vw, 21px) !important;
  line-height: 1.22 !important;
}

html body.view-mock #mock.active-view .mock-paper-intro strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-command-metrics article span, .score-ring strong) {
  font-weight: 720 !important;
  color: rgba(41, 49, 62, 0.84) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics article span {
  font-size: clamp(22px, 1.45vw, 30px) !important;
}

html body.view-mock #mock.active-view :is(
  .mock-paper-tabs button,
  .mock-paper-filters button,
  .pte-paper-meta span,
  .mock-desktop-start,
  .mock-page-actions .primary-btn,
  .mock-history-more,
  .pte-history-action
) {
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view :is(.mock-paper-tabs button.active, .mock-paper-filters button.active) {
  font-weight: 720 !important;
}

html body.view-mock #mock.active-view :is(
  .mock-mobile-filter-group > span,
  .mock-desktop-command-copy span,
  .mock-report-panel .eyebrow,
  .mock-redesign-history-head small
) {
  font-weight: 700 !important;
  color: rgba(34, 124, 104, 0.86) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view :is(
  .mock-desktop-command-copy p,
  .mock-report-panel p,
  .mock-report-empty-redesign p,
  .mock-paper-intro span,
  .pte-paper-copy span,
  .pte-history-main span,
  .pte-history-empty span,
  .mock-paper-toolbar .search-field input,
  .mock-paper-toolbar .search-field input::placeholder,
  .mock-paper-toolbar .search-field span,
  .mock-desktop-command-metrics article small
) {
  font-weight: 520 !important;
  color: var(--mock-type-body) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span {
  color: rgba(100, 111, 128, 0.74) !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
  color: rgba(96, 66, 15, 0.78) !important;
  font-weight: 680 !important;
}

/* Mobile mock top controls hard final: true EOF override after typography rules. */
@media (max-width: 760px) {
  html body.view-mock .main > .topbar,
  html body.view-mock .sidebar .exam-type-picker {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 29px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field span {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 34px !important;
    color: rgba(39, 48, 61, 0.48) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-filter-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-panel {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-paper-workbench .mock-mobile-filter-panel {
    max-height: 260px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 30px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 14px 48px !important;
    align-content: start !important;
    align-items: start !important;
    gap: 6px !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group > span {
    position: static !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 2 !important;
    align-self: start !important;
    justify-self: start !important;
    width: auto !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 0 0 4px !important;
    color: rgba(34, 124, 104, 0.68) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-filters {
    grid-column: 1 !important;
    grid-row: 2 / 3 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-filters button {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 720px) {
  html body.view-mock #mock.active-view .mock-page-head h2 {
    font-size: 31px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    font-size: 25px !important;
    font-weight: 740 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    font-size: 17px !important;
    font-weight: 720 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    font-size: 12px !important;
    font-weight: 650 !important;
  }
}

/* Mock typography v23: soften heavy display weights so text sits inside the glass. */
html body.view-mock #mock.active-view {
  --mock-type-ink: rgba(31, 38, 48, 0.9);
  --mock-type-title: rgba(21, 26, 34, 0.92);
  --mock-type-body: rgba(82, 91, 106, 0.72);
  --mock-type-muted: rgba(118, 128, 143, 0.68);
  color: var(--mock-type-ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html body.view-mock #mock.active-view :is(
  .mock-desktop-command-copy strong,
  .mock-report-panel h2
) {
  font-size: clamp(28px, 2vw, 38px) !important;
  font-weight: 740 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  color: var(--mock-type-title) !important;
}

html body.view-mock #mock.active-view :is(
  .mock-desktop-command-metrics article span,
  .score-ring strong
) {
  font-weight: 720 !important;
  color: rgba(41, 49, 62, 0.84) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view :is(
  .mock-paper-tabs button.active,
  .mock-paper-filters button.active
) {
  font-weight: 720 !important;
}

/* Final mobile mock ordering pass: exam picker first, filters folded, history later. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view {
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 32px 32px 154px !important;
    background: transparent !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-main-column {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 0 22px !important;
    padding: 18px !important;
    border-radius: 32px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before,
  html body.view-mock #mock.active-view .mock-paper-workbench::after,
  html body.view-mock #mock.active-view .pte-mode-switch {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    order: -4 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 84px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.58), transparent 40%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(245, 250, 250, 0.12)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(26, 36, 48, 0.035),
      0 18px 40px rgba(31, 41, 55, 0.065) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: -3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: -2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    position: static !important;
    order: 0 !important;
    color: #2f9d88 !important;
    font-size: 11px !important;
    font-weight: 920 !important;
    line-height: 1.12 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    order: 1 !important;
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    order: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-report-panel,
  html body.view-mock #mock.active-view .mock-flow-panel,
  html body.view-mock #mock.active-view .mock-status-card,
  html body.view-mock #mock.active-view .mock-tip-card {
    border-radius: 30px !important;
  }
}

.mock-filter-toggle {
  display: none;
}

/* Mobile mock center: align with home/question-bank/profile glass language. */
@media (max-width: 980px) {
  html:has(body.view-mock),
  html body.view-mock {
    background:
      radial-gradient(circle at 16% 4%, rgba(110, 231, 183, 0.22), transparent 30%),
      radial-gradient(circle at 88% 18%, rgba(147, 197, 253, 0.2), transparent 28%),
      linear-gradient(180deg, #f7f8f9 0%, #f2f3f5 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
  }

  html body.view-mock,
  html body.view-mock .app-shell,
  html body.view-mock .app-shell > .main,
  html body.view-mock .app-shell > .main > #mock.active-view {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: transparent !important;
  }

  html body.view-mock {
    scrollbar-width: none !important;
  }

  html:has(body.view-mock)::-webkit-scrollbar,
  html body.view-mock::-webkit-scrollbar,
  html body.view-mock *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  html body.view-mock #mock.active-view {
    --mock-glass-line: rgba(255, 255, 255, 0.66);
    --mock-glass-bg:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.58), transparent 40%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(245, 250, 250, 0.12)),
      rgba(255, 255, 255, 0.08);
    --mock-inner-glass:
      radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.48), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.06);
    --mock-glass-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(26, 36, 48, 0.035),
      0 18px 40px rgba(31, 41, 55, 0.065);
    --mock-float-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -1px 0 rgba(26, 36, 48, 0.035),
      0 12px 24px rgba(31, 41, 55, 0.052);
    --mock-ink-soft: rgba(23, 29, 39, 0.94);
    --mock-muted-soft: rgba(92, 103, 118, 0.78);
    --mock-teal: #2f9d88;
    position: relative !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 32px 32px 154px !important;
    color: #171d27 !important;
    background: transparent !important;
    isolation: isolate !important;
  }

  html body.view-mock #mock.active-view::before,
  html body.view-mock #mock.active-view::after {
    content: "" !important;
    position: fixed !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    filter: blur(12px) !important;
  }

  html body.view-mock #mock.active-view::before {
    width: 220px !important;
    height: 220px !important;
    top: 28px !important;
    left: -96px !important;
    background: rgba(125, 211, 252, 0.11) !important;
  }

  html body.view-mock #mock.active-view::after {
    width: 250px !important;
    height: 250px !important;
    right: -112px !important;
    bottom: 64px !important;
    background: rgba(167, 243, 208, 0.11) !important;
  }

  html body.view-mock #mock.active-view > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-mock #mock.active-view :is(.mock-page-head, .mock-paper-workbench, .mock-mobile-exam-card, .mock-mobile-filter-panel, .mock-paper-toolbar .search-field, .mock-filter-toggle, .mock-paper-tabs, .mock-paper-filters, .pte-paper-row, .mock-paper-card, .mock-redesign-history, .mock-report-panel, .mock-flow-panel, .mock-status-card, .mock-tip-card, .mock-session-area .panel, .mock-paper-detail) {
    border: 1px solid var(--mock-glass-line) !important;
    background: var(--mock-glass-bg) !important;
    background-color: rgba(255, 255, 255, 0.055) !important;
    box-shadow: var(--mock-glass-shadow) !important;
    backdrop-filter: blur(26px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 76px !important;
    margin: 0 0 18px !important;
    padding: 16px 18px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    margin: 0 !important;
    color: #171d27 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-page-head p {
    margin: 4px 0 0 !important;
    color: rgba(92, 103, 118, 0.78) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 1.35 !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions {
    display: block !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions button {
    width: 92px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 999px !important;
    background: var(--mock-inner-glass) !important;
    color: #171d27 !important;
    box-shadow: var(--mock-float-shadow) !important;
    font-size: 12px !important;
    font-weight: 880 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout,
  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 0 22px !important;
    padding: 18px !important;
    border-radius: 32px !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before,
  html body.view-mock #mock.active-view .mock-paper-workbench::after,
  html body.view-mock #mock.active-view .mock-paper-intro,
  html body.view-mock #mock.active-view .pte-mode-switch {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    order: -4 !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 84px !important;
    padding: 16px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card span,
  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    display: block !important;
    color: #2f9d88 !important;
    font-size: 11px !important;
    font-weight: 920 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card strong {
    display: block !important;
    margin-top: 7px !important;
    overflow: hidden !important;
    color: #171d27 !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card label {
    display: block !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card select {
    width: 100% !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 999px !important;
    outline: 0 !important;
    background: var(--mock-inner-glass) !important;
    color: rgba(67, 77, 92, 0.9) !important;
    box-shadow: var(--mock-float-shadow) !important;
    font-size: 12px !important;
    font-weight: 860 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: -3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: auto !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 24px !important;
    box-shadow: var(--mock-float-shadow) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span {
    color: rgba(92, 103, 118, 0.64) !important;
    font-size: 11px !important;
    font-weight: 840 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input {
    min-width: 0 !important;
    color: #171d27 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    color: rgba(47, 157, 136, 0.92) !important;
    box-shadow: var(--mock-float-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-filter-toggle,
  html body.view-mock #mock.active-view .mock-filter-toggle:active {
    transform: scale(0.985) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: -2 !important;
    display: grid !important;
    grid-template-rows: 0fr !important;
    gap: 0 !important;
    max-height: 0 !important;
    margin: -6px 0 0 !important;
    padding: 0 14px !important;
    border-radius: 28px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.98) !important;
    transition: max-height 0.26s ease, opacity 0.22s ease, transform 0.22s ease, padding 0.22s ease, margin 0.22s ease !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    grid-template-rows: 1fr !important;
    max-height: 238px !important;
    margin: 0 !important;
    padding: 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: grid !important;
    gap: 9px !important;
    min-height: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group + .mock-mobile-filter-group {
    margin-top: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 24px !important;
    overflow: visible !important;
    box-shadow: var(--mock-float-shadow) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(92, 103, 118, 0.74) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 860 !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    color: #171d27 !important;
    background: var(--mock-inner-glass) !important;
    box-shadow: var(--mock-float-shadow) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 88px !important;
    padding: 14px 14px 14px 16px !important;
    border-radius: 26px !important;
    box-shadow: var(--mock-float-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:active,
  html body.view-mock #mock.active-view .mock-paper-card:active {
    transform: scale(0.988) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .mock-paper-card.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover,
  html body.view-mock #mock.active-view .mock-paper-card:hover {
    border-color: rgba(255, 255, 255, 0.74) !important;
    background: var(--mock-glass-bg) !important;
    box-shadow:
      var(--mock-float-shadow),
      inset 3px 0 0 rgba(47, 157, 136, 0.54) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy,
  html body.view-mock #mock.active-view .mock-paper-copy {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong,
  html body.view-mock #mock.active-view .mock-paper-copy strong {
    overflow: hidden !important;
    color: #171d27 !important;
    font-size: 15px !important;
    font-weight: 920 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span,
  html body.view-mock #mock.active-view .mock-paper-copy p,
  html body.view-mock #mock.active-view .mock-paper-copy small {
    display: -webkit-box !important;
    max-width: none !important;
    overflow: hidden !important;
    color: rgba(92, 103, 118, 0.78) !important;
    font-size: 11px !important;
    font-weight: 720 !important;
    line-height: 1.36 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta,
  html body.view-mock #mock.active-view .mock-paper-meta {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    margin-top: 3px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span,
  html body.view-mock #mock.active-view .mock-paper-meta span {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(92, 103, 118, 0.74) !important;
    font-size: 10px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i,
  html body.view-mock #mock.active-view .mock-paper-card > i,
  html body.view-mock #mock.active-view .mock-paper-card::after {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    color: rgba(147, 197, 253, 0.9) !important;
    background: transparent !important;
    font-size: 18px !important;
    font-style: normal !important;
  }

  html body.view-mock #mock.active-view .mock-right-column,
  html body.view-mock #mock.active-view .mock-session-area {
    gap: 20px !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-report-panel,
  html body.view-mock #mock.active-view .mock-flow-panel,
  html body.view-mock #mock.active-view .mock-status-card,
  html body.view-mock #mock.active-view .mock-tip-card,
  html body.view-mock #mock.active-view .mock-session-area .panel {
    padding: 18px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  html body.view-mock .mobile-tabbar {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(3, 110px) !important;
    justify-content: space-between !important;
    width: auto !important;
    max-width: 366px !important;
    min-height: 72px !important;
    height: 72px !important;
    margin: 0 auto !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 32px !important;
    background-image:
      linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.18)) !important;
    background-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.82),
      inset 0 -1px 1px rgba(174, 184, 197, 0.12),
      0 18px 44px -20px rgba(32, 48, 68, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.34) !important;
    backdrop-filter: blur(30px) saturate(1.24) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.24) !important;
  }

  html body.view-mock .mobile-tab {
    width: 110px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 25px !important;
    color: rgba(82, 89, 101, 0.72) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  html body.view-mock .mobile-tab.active,
  html body.view-mock .mobile-tab[data-mobile-view="mock"] {
    color: #242b36 !important;
    background-image:
      linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.14) 52%, rgba(255, 255, 255, 0.24)) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.76),
      0 12px 22px -18px rgba(39, 49, 66, 0.22) !important;
  }

  html body.view-mock .mobile-tab.active::after {
    display: none !important;
  }

  @media (max-width: 374px) {
    html body.view-mock #mock.active-view {
      padding-right: 24px !important;
      padding-left: 24px !important;
    }

    html body.view-mock #mock.active-view .mock-mobile-exam-card {
      grid-template-columns: 1fr !important;
    }

    html body.view-mock #mock.active-view .mock-paper-tabs,
    html body.view-mock #mock.active-view .mock-paper-filters {
      gap: 6px !important;
    }
  }
}

html body.view-mock {
  background:
    radial-gradient(circle at 12% 4%, rgba(221, 246, 244, 0.28), transparent 34%),
    radial-gradient(circle at 96% 12%, rgba(255, 245, 217, 0.22), transparent 32%),
    linear-gradient(180deg, #f7f8fa 0%, #eef2f4 100%) !important;
}

html body.view-mock #mock.active-view {
  --mock-glass-line: rgba(255, 255, 255, 0.72);
  --mock-ink-soft: rgba(24, 30, 40, 0.9);
  --mock-muted-soft: rgba(91, 101, 116, 0.62);
  --mock-teal: #13c8b7;
  padding-top: clamp(18px, 2.2vw, 34px) !important;
  padding-inline: clamp(32px, 5vw, 88px) !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .mock-page-head {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-page-head h2,
html body.view-mock #mock.active-view .mock-paper-workbench::before {
  margin: 0 !important;
  color: var(--mock-ink-soft) !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view .mock-page-head p,
html body.view-mock #mock.active-view .mock-page-actions,
html body.view-mock #mock.active-view .mock-report-panel,
html body.view-mock #mock.active-view .mock-redesign-history h3 {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-center-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(44px, 4vw, 62px) !important;
}

html body.view-mock #mock.active-view .mock-main-column,
html body.view-mock #mock.active-view .mock-right-column {
  display: contents !important;
}

html body.view-mock #mock.active-view .mock-command-center {
  order: -1 !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

html body.view-mock #mock.active-view .mock-redesign-history,
html body.view-mock #mock.active-view .mock-paper-workbench {
  border: 1px solid var(--mock-glass-line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.78), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(247, 251, 252, 0.2)),
    rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 24px 56px -44px rgba(15, 23, 42, 0.36) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  min-height: 190px !important;
  margin: 0 !important;
  padding: clamp(20px, 2vw, 30px) !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-list {
  display: grid !important;
  gap: 0 !important;
  min-height: 128px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(249, 252, 253, 0.18)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(220, 228, 236, 0.44) !important;
}

html body.view-mock #mock.active-view .pte-history-empty {
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 128px !important;
  padding: 0 clamp(24px, 3vw, 44px) !important;
}

html body.view-mock #mock.active-view .pte-history-empty strong {
  color: rgba(30, 36, 46, 0.86) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
}

html body.view-mock #mock.active-view .pte-history-empty span,
html body.view-mock #mock.active-view .pte-history-main span,
html body.view-mock #mock.active-view .pte-paper-copy span,
html body.view-mock #mock.active-view .mock-paper-copy p,
html body.view-mock #mock.active-view .mock-paper-copy small {
  color: var(--mock-muted-soft) !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  line-height: 1.4 !important;
}

html body.view-mock #mock.active-view .pte-history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px 126px !important;
  gap: 16px !important;
  align-items: center !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 228, 236, 0.48) !important;
  background: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-row:last-child {
  border-bottom: 0 !important;
}

html body.view-mock #mock.active-view .pte-history-main {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .pte-history-main strong,
html body.view-mock #mock.active-view .pte-paper-copy strong,
html body.view-mock #mock.active-view .mock-paper-copy strong {
  overflow: hidden !important;
  color: var(--mock-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 710 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-history-delete {
  position: relative !important;
  justify-self: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 999px !important;
  background: rgba(255, 100, 112, 0.86) !important;
  color: transparent !important;
}

html body.view-mock #mock.active-view .pte-history-delete::before,
html body.view-mock #mock.active-view .pte-history-delete::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 13px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

html body.view-mock #mock.active-view .pte-history-delete::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body.view-mock #mock.active-view .pte-history-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

html body.view-mock #mock.active-view .pte-history-action,
html body.view-mock #mock.active-view .mock-paper-filters button.active {
  border-color: rgba(19, 200, 183, 0.38) !important;
  background: var(--mock-teal) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px -20px rgba(19, 200, 183, 0.76) !important;
}

html body.view-mock #mock.active-view .pte-history-action {
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  min-width: 112px !important;
  min-height: 34px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 710 !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 22px clamp(18px, 2.2vw, 28px) 30px !important;
  overflow: visible !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::before {
  content: "PTE 模考" !important;
  position: absolute !important;
  left: 2px !important;
  top: -42px !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench::after,
html body.view-mock #mock.active-view .mock-paper-tabs button.active::after,
html body.view-mock #mock.active-view .mock-paper-intro,
html body.view-mock #mock.active-view .mock-paper-ribbon,
html body.view-mock #mock.active-view .mock-paper-index,
html body.view-mock #mock.active-view .mock-paper-copy em,
html body.view-mock #mock.active-view .mock-paper-card.active::before {
  content: none !important;
  display: none !important;
}

html body.view-mock #mock.active-view .mock-paper-detail {
  order: -3 !important;
  display: block !important;
  margin: 0 0 18px !important;
  min-height: 42px !important;
}

html body.view-mock #mock.active-view .pte-mode-switch,
html body.view-mock #mock.active-view .mock-exam-mode-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(520px, 100%) !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18)),
    rgba(211, 218, 218, 0.38) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px 1px rgba(15, 23, 42, 0.04) !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button,
html body.view-mock #mock.active-view .mock-exam-mode-switch button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(80, 89, 103, 0.58) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-mode-switch button.active,
html body.view-mock #mock.active-view .mock-exam-mode-switch button.active {
  color: #fff !important;
  background: var(--mock-teal) !important;
  clip-path: none !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs {
  order: -2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 18px !important;
  padding: 5px !important;
  overflow-x: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button {
  min-width: 88px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(82, 92, 108, 0.62) !important;
  font-size: 13px !important;
  font-weight: 690 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-paper-tabs button.active {
  color: rgba(16, 110, 101, 0.98) !important;
  background: rgba(226, 248, 245, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(19, 200, 183, 0.18) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 320px) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters {
  grid-column: 1 !important;
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  color: rgba(82, 92, 108, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button {
  min-width: 86px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 690 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  grid-column: 2 !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 16px !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
  color: rgba(82, 92, 108, 0.48) !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input {
  color: rgba(24, 30, 40, 0.86) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
}

html body.view-mock #mock.active-view .mock-paper-list {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(220, 228, 236, 0.52) !important;
}

html body.view-mock #mock.active-view .pte-paper-row,
html body.view-mock #mock.active-view .mock-paper-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  gap: 18px !important;
  align-items: center !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 14px 0 20px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 228, 236, 0.52) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .pte-paper-row:last-child,
html body.view-mock #mock.active-view .mock-paper-card:last-child {
  border-bottom: 0 !important;
}

html body.view-mock #mock.active-view .pte-paper-row.active,
html body.view-mock #mock.active-view .pte-paper-row:hover,
html body.view-mock #mock.active-view .mock-paper-card.active,
html body.view-mock #mock.active-view .mock-paper-card:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

html body.view-mock #mock.active-view .pte-paper-copy,
html body.view-mock #mock.active-view .mock-paper-copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .pte-paper-meta,
html body.view-mock #mock.active-view .mock-paper-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  color: rgba(91, 101, 116, 0.62) !important;
  font-size: 12px !important;
  font-weight: 630 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span,
html body.view-mock #mock.active-view .mock-paper-meta span {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

html body.view-mock #mock.active-view .pte-paper-meta span:first-child,
html body.view-mock #mock.active-view .mock-paper-meta span:first-child {
  background: rgba(255, 242, 202, 0.78) !important;
  color: rgba(122, 102, 43, 0.84) !important;
}

html body.view-mock #mock.active-view .pte-paper-row i,
html body.view-mock #mock.active-view .mock-paper-card > i,
html body.view-mock #mock.active-view .mock-paper-card::after {
  content: ">" !important;
  justify-self: center !important;
  display: block !important;
  color: rgba(28, 34, 44, 0.82) !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 360 !important;
  line-height: 1 !important;
}

html body.view-mock #mock.active-view:not(.mock-exam-focus) .mock-session-area {
  display: none !important;
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view {
    padding-top: 18px !important;
    padding-inline: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2,
  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    font-size: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 46px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-workbench {
    border-radius: 22px !important;
    padding: 16px !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    height: auto !important;
    min-height: 92px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch,
  html body.view-mock #mock.active-view .mock-exam-mode-switch,
  html body.view-mock #mock.active-view .mock-paper-tabs {
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) 24px !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 14px 8px 14px 12px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta,
  html body.view-mock #mock.active-view .mock-paper-meta {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Mock page final desktop lock: fixed glass nav and tighter working layout. */
@media (min-width: 981px) {
  html body.view-mock {
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  html body.view-mock .app-shell {
    display: block !important;
    min-height: 100vh !important;
    padding-top: 92px !important;
  }

  html body.view-mock .sidebar {
    position: fixed !important;
    z-index: 1200 !important;
    top: 12px !important;
    left: clamp(24px, 2.2vw, 44px) !important;
    right: clamp(24px, 2.2vw, 44px) !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: minmax(430px, 560px) minmax(420px, 1fr) minmax(188px, 230px) !important;
    align-items: center !important;
    gap: clamp(18px, 1.9vw, 32px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.32)),
      rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 22px 52px -42px rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(28px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.18) !important;
    transform: none !important;
  }

  html body.view-mock .sidebar .brand {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 14px !important;
    width: 100% !important;
    height: 54px !important;
    min-width: 0 !important;
    padding: 0 12px 0 4px !important;
    color: rgba(20, 25, 34, 0.9) !important;
    text-decoration: none !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 18px !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock .sidebar .brand-copy {
    position: static !important;
    display: grid !important;
    grid-template-columns: auto minmax(210px, 280px) !important;
    align-items: center !important;
    gap: 18px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    clip: auto !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    color: rgba(20, 25, 34, 0.92) !important;
    font-size: 25px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-mock .sidebar .exam-type-picker {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    height: 42px !important;
  }

  html body.view-mock .sidebar .exam-type-picker select {
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 40px 0 16px !important;
    border: 1px solid rgba(226, 231, 238, 0.64) !important;
    border-radius: 16px !important;
    color: rgba(70, 78, 92, 0.88) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26)),
      rgba(255, 255, 255, 0.3) !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  html body.view-mock .sidebar .nav-list {
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(100px, 1fr)) !important;
    align-items: center !important;
    gap: 6px !important;
    width: min(100%, 720px) !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)),
      rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important;
  }

  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(78, 85, 98, 0.72) !important;
    font-size: 16px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html body.view-mock .sidebar .nav-link .icon {
    display: none !important;
  }

  html body.view-mock .sidebar .nav-link.active {
    color: rgba(16, 20, 28, 0.94) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.34)),
      rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 14px 30px -26px rgba(15, 23, 42, 0.34) !important;
  }

  html body.view-mock .sidebar .nav-link.active::after {
    display: none !important;
    content: none !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card {
    justify-self: end !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 230px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 5px 13px 5px 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    object-fit: contain !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card span {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card strong,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card strong {
    color: rgba(29, 34, 44, 0.86) !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    line-height: 1.1 !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card small {
    width: max-content !important;
    max-width: 100% !important;
    padding: 1px 7px 2px !important;
    border-radius: 999px !important;
    color: rgba(135, 106, 31, 0.78) !important;
    background: rgba(255, 238, 183, 0.7) !important;
    font-size: 10px !important;
    font-weight: 740 !important;
    line-height: 1.15 !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card b,
  html body.view-mock .main > .topbar {
    display: none !important;
  }

  html body.view-mock .main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 92px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view {
    width: min(100%, 1740px) !important;
    margin: 0 auto !important;
    padding: 14px clamp(42px, 5vw, 84px) 48px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    margin: 0 0 14px !important;
    padding: 0 2px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2,
  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    font-size: 21px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 34px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-workbench {
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.82), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(248, 252, 253, 0.24)),
      rgba(255, 255, 255, 0.25) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 20px 48px -42px rgba(15, 23, 42, 0.38) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    min-height: 148px !important;
    padding: 18px clamp(20px, 2vw, 28px) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-list {
    min-height: 104px !important;
    border-radius: 18px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    min-height: 104px !important;
    gap: 9px !important;
    padding: 0 clamp(22px, 3vw, 40px) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong {
    font-size: 15px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span {
    max-width: 680px !important;
    font-size: 12px !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 18px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    padding: 18px clamp(18px, 2vw, 26px) 22px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    left: 2px !important;
    top: -38px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    margin-bottom: 14px !important;
    min-height: 38px !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch,
  html body.view-mock #mock.active-view .mock-exam-mode-switch {
    width: min(500px, 100%) !important;
    height: 38px !important;
    padding: 4px !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch button,
  html body.view-mock #mock.active-view .mock-exam-mode-switch button {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 13px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    min-height: 38px !important;
    margin-bottom: 14px !important;
    padding: 4px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button {
    min-height: 30px !important;
    font-size: 12.5px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    margin-bottom: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-filters {
    gap: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-filters button {
    min-width: 116px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    width: min(360px, 100%) !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    border-radius: 18px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    grid-template-columns: minmax(0, 1fr) auto 28px !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 12px 0 18px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    gap: 5px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong,
  html body.view-mock #mock.active-view .mock-paper-copy strong {
    font-size: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    max-width: 760px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta,
  html body.view-mock #mock.active-view .mock-paper-meta {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span,
  html body.view-mock #mock.active-view .mock-paper-meta span {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  html body.view-mock .sidebar {
    left: 18px !important;
    right: 18px !important;
    grid-template-columns: minmax(300px, 390px) minmax(360px, 1fr) minmax(160px, 190px) !important;
    gap: 12px !important;
  }

  html body.view-mock .sidebar .brand {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  html body.view-mock .sidebar .brand-copy {
    grid-template-columns: auto minmax(160px, 210px) !important;
    gap: 12px !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    font-size: 22px !important;
  }

  html body.view-mock .sidebar .exam-type-picker select {
    font-size: 14px !important;
  }

  html body.view-mock .sidebar .nav-list {
    grid-template-columns: repeat(4, minmax(74px, 1fr)) !important;
  }

  html body.view-mock .sidebar .nav-link {
    padding-inline: 8px !important;
    font-size: 14px !important;
  }

  html body.view-mock #mock.active-view {
    padding-inline: 28px !important;
  }
}

/* Mock page own visual language: Apple-like frosted glass, quieter type. */
@media (min-width: 981px) {
  html body.view-mock {
    background:
      radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.82), transparent 30%),
      radial-gradient(circle at 86% 16%, rgba(222, 248, 244, 0.34), transparent 28%),
      radial-gradient(circle at 20% 76%, rgba(255, 240, 197, 0.22), transparent 32%),
      linear-gradient(180deg, #f6f7f9 0%, #eef2f5 100%) !important;
  }

  html body.view-mock .sidebar {
    border-color: rgba(255, 255, 255, 0.64) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 18px 42px -38px rgba(17, 24, 39, 0.32) !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    color: rgba(24, 29, 38, 0.82) !important;
    font-weight: 760 !important;
  }

  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active {
    color: rgba(74, 82, 96, 0.62) !important;
    font-weight: 660 !important;
  }

  html body.view-mock .sidebar .nav-link.active {
    color: rgba(24, 29, 38, 0.82) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 12px 26px -24px rgba(17, 24, 39, 0.3) !important;
  }

  html body.view-mock #mock.active-view {
    --mock-ink-soft: rgba(26, 31, 40, 0.8);
    --mock-muted-soft: rgba(85, 94, 109, 0.54);
    --mock-teal: rgba(20, 190, 175, 0.78);
    padding-top: 6px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    margin-bottom: 10px !important;
    padding-left: 6px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    color: rgba(29, 35, 46, 0.82) !important;
    font-size: 18px !important;
    font-weight: 690 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-workbench {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(20, 30, 44, 0.025),
      0 20px 54px -46px rgba(17, 24, 39, 0.34) !important;
    backdrop-filter: blur(34px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.22) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    min-height: 116px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-list {
    min-height: 88px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    min-height: 88px !important;
    gap: 6px !important;
    padding: 0 clamp(22px, 3vw, 42px) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong {
    color: rgba(30, 36, 46, 0.76) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span {
    color: rgba(83, 92, 108, 0.48) !important;
    font-size: 11.5px !important;
    font-weight: 520 !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    height: 58px !important;
    min-height: 58px !important;
  }

  html body.view-mock #mock.active-view .pte-history-main strong,
  html body.view-mock #mock.active-view .pte-paper-copy strong,
  html body.view-mock #mock.active-view .mock-paper-copy strong {
    color: rgba(28, 34, 44, 0.78) !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
  }

  html body.view-mock #mock.active-view .pte-history-main span,
  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: rgba(87, 96, 112, 0.48) !important;
    font-size: 11.5px !important;
    font-weight: 520 !important;
  }

  html body.view-mock #mock.active-view .pte-history-action,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    color: rgba(20, 116, 108, 0.82) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18)),
      rgba(20, 190, 175, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 12px 28px -26px rgba(20, 190, 175, 0.5) !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    min-height: 30px !important;
    min-width: 96px !important;
    font-size: 12px !important;
    font-weight: 640 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    padding: 16px 18px 18px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    content: "模考中心" !important;
    top: -34px !important;
    left: 6px !important;
    color: rgba(29, 35, 46, 0.8) !important;
    font-size: 18px !important;
    font-weight: 690 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 34px !important;
    margin-bottom: 12px !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch,
  html body.view-mock #mock.active-view .mock-exam-mode-switch {
    width: auto !important;
    min-width: 268px !important;
    max-width: 360px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 3px !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)),
      rgba(255, 255, 255, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 12px 28px -26px rgba(17, 24, 39, 0.28) !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch button,
  html body.view-mock #mock.active-view .mock-exam-mode-switch button {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 14px !important;
    color: rgba(80, 89, 104, 0.48) !important;
    font-size: 11.5px !important;
    font-weight: 610 !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch button.active,
  html body.view-mock #mock.active-view .mock-exam-mode-switch button.active {
    color: rgba(30, 36, 46, 0.76) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.28)),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    width: auto !important;
    min-height: 34px !important;
    margin-bottom: 12px !important;
    padding: 3px !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button {
    min-width: 70px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    color: rgba(82, 91, 106, 0.48) !important;
    font-size: 11.5px !important;
    font-weight: 610 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active {
    color: rgba(21, 122, 114, 0.78) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.2)),
      rgba(20, 190, 175, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-filters {
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-filters button {
    min-width: 92px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    border-radius: 999px !important;
    color: rgba(78, 87, 103, 0.5) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.08) !important;
    font-size: 12px !important;
    font-weight: 610 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    width: 320px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
    color: rgba(86, 95, 111, 0.42) !important;
    font-size: 12px !important;
    font-weight: 520 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    overflow: hidden !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06)),
      rgba(255, 255, 255, 0.06) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    min-height: 62px !important;
    height: 62px !important;
    border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover {
    background:
      linear-gradient(90deg, rgba(20, 190, 175, 0.065), transparent 62%),
      rgba(255, 255, 255, 0.14) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    gap: 4px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    color: rgba(28, 34, 44, 0.76) !important;
    font-size: 13px !important;
    font-weight: 640 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: rgba(88, 98, 114, 0.46) !important;
    font-size: 11.2px !important;
    font-weight: 510 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span,
  html body.view-mock #mock.active-view .mock-paper-meta span {
    height: 22px !important;
    min-height: 22px !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    color: rgba(89, 98, 114, 0.52) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    font-size: 10.8px !important;
    font-weight: 560 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child,
  html body.view-mock #mock.active-view .mock-paper-meta span:first-child {
    color: rgba(123, 103, 43, 0.68) !important;
    background: rgba(255, 238, 184, 0.34) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i,
  html body.view-mock #mock.active-view .mock-paper-card > i,
  html body.view-mock #mock.active-view .mock-paper-card::after {
    color: rgba(53, 61, 75, 0.58) !important;
    font-size: 20px !important;
    font-weight: 320 !important;
  }
}

@media (max-width: 760px) {
  html body.view-mock #mock.active-view .mock-page-head h2,
  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    font-weight: 660 !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch button,
  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    font-weight: 610 !important;
  }
}

/* Mock page typography: engraved, glass-embedded text treatment. */
html body.view-mock,
html body.view-mock button,
html body.view-mock input,
html body.view-mock select {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "PingFang SC",
    "Microsoft YaHei",
    Arial,
    sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

html body.view-mock #mock.active-view .mock-page-head h2,
html body.view-mock #mock.active-view .mock-paper-workbench::before,
html body.view-mock #mock.active-view .pte-history-empty strong,
html body.view-mock #mock.active-view .pte-history-main strong,
html body.view-mock #mock.active-view .pte-paper-copy strong {
  color: rgba(33, 39, 50, 0.7) !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(12, 18, 28, 0.08),
    0 8px 18px rgba(15, 23, 42, 0.035) !important;
}

html body.view-mock #mock.active-view .mock-page-head h2,
html body.view-mock #mock.active-view .mock-paper-workbench::before {
  font-size: 17px !important;
  line-height: 1.18 !important;
}

html body.view-mock #mock.active-view .pte-history-empty strong {
  font-size: 13.5px !important;
}

html body.view-mock #mock.active-view .pte-paper-copy strong,
html body.view-mock #mock.active-view .pte-history-main strong {
  font-size: 12.8px !important;
}

html body.view-mock #mock.active-view .pte-history-empty span,
html body.view-mock #mock.active-view .pte-history-main span,
html body.view-mock #mock.active-view .pte-paper-copy span,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
  color: rgba(92, 101, 116, 0.42) !important;
  font-weight: 500 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 -1px 0 rgba(15, 23, 42, 0.035) !important;
}

@media (min-width: 981px) {
  html body.view-mock #mock.active-view .mock-page-head {
    opacity: 0.92 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    opacity: 0.9 !important;
  }
}

/* Mock page overlap fix: titles stay in the layout, shadows do not double text. */
html body.view-mock #mock.active-view .mock-page-head h2,
html body.view-mock #mock.active-view .mock-paper-workbench::before,
html body.view-mock #mock.active-view .pte-history-empty strong,
html body.view-mock #mock.active-view .pte-history-main strong,
html body.view-mock #mock.active-view .pte-paper-copy strong {
  color: rgba(38, 45, 58, 0.64) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html body.view-mock #mock.active-view .pte-history-empty span,
html body.view-mock #mock.active-view .pte-history-main span,
html body.view-mock #mock.active-view .pte-paper-copy span,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

@media (min-width: 981px) {
  html body.view-mock #mock.active-view .mock-center-layout {
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px 18px !important;
    padding-top: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before {
    position: static !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    opacity: 1 !important;
    font-size: 16px !important;
    font-weight: 610 !important;
    line-height: 34px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-toolbar,
  html body.view-mock #mock.active-view .mock-paper-list {
    grid-column: 1 / -1 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    margin-top: 2px !important;
  }
}

/* Mock page color lift: richer glass without losing the frosted style. */
@media (min-width: 981px) {
  html body.view-mock {
    background:
      radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.86), transparent 30%),
      radial-gradient(circle at 88% 16%, rgba(190, 244, 237, 0.48), transparent 30%),
      radial-gradient(circle at 20% 76%, rgba(255, 226, 145, 0.32), transparent 34%),
      linear-gradient(180deg, #f5f7fa 0%, #eaf0f4 100%) !important;
  }

  html body.view-mock .sidebar {
    border-color: rgba(255, 255, 255, 0.72) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.25)),
      rgba(255, 255, 255, 0.24) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-workbench {
    border-color: rgba(255, 255, 255, 0.72) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)),
      linear-gradient(18deg, rgba(20, 190, 175, 0.045), rgba(255, 215, 112, 0.035) 56%, transparent),
      rgba(255, 255, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(20, 30, 44, 0.035),
      0 22px 56px -46px rgba(17, 24, 39, 0.38) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-list,
  html body.view-mock #mock.active-view .mock-paper-list {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.1)),
      rgba(255, 255, 255, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      inset 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2,
  html body.view-mock #mock.active-view .mock-paper-workbench::before,
  html body.view-mock #mock.active-view .pte-history-empty strong,
  html body.view-mock #mock.active-view .pte-history-main strong,
  html body.view-mock #mock.active-view .pte-paper-copy strong {
    color: rgba(34, 41, 54, 0.74) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span,
  html body.view-mock #mock.active-view .pte-history-main span,
  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: rgba(80, 90, 106, 0.54) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active,
  html body.view-mock #mock.active-view .pte-history-action {
    color: rgba(13, 124, 115, 0.88) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.22)),
      rgba(20, 190, 175, 0.15) !important;
  }

  html body.view-mock #mock.active-view .pte-mode-switch button.active,
  html body.view-mock #mock.active-view .mock-exam-mode-switch button.active {
    color: rgba(27, 34, 45, 0.82) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32)),
      rgba(255, 255, 255, 0.26) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child,
  html body.view-mock #mock.active-view .mock-paper-meta span:first-child {
    color: rgba(123, 96, 28, 0.78) !important;
    background: rgba(255, 227, 143, 0.46) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover {
    background:
      linear-gradient(90deg, rgba(20, 190, 175, 0.09), transparent 64%),
      rgba(255, 255, 255, 0.18) !important;
  }
}

/* Mock nav parity: keep fixed position, but use the same sizing as other pages. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    padding-top: 82px !important;
  }

  html body.view-mock .sidebar {
    left: 50% !important;
    right: auto !important;
    width: min(1480px, calc(100% - 48px)) !important;
    max-width: min(1480px, calc(100% - 48px)) !important;
    min-height: 58px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 14px !important;
    grid-template-columns: minmax(148px, auto) minmax(360px, 1fr) auto !important;
    gap: clamp(14px, 1.7vw, 28px) !important;
    transform: translateX(-50%) !important;
  }

  html body.view-mock .sidebar .brand {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: 44px !important;
    gap: 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
  }

  html body.view-mock .sidebar .brand-copy {
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    font-size: 23px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  html body.view-mock .sidebar .exam-type-picker {
    width: 100% !important;
    max-width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    overflow: hidden !important;
  }

  html body.view-mock .sidebar .exam-type-picker select {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(76, 84, 98, 0.72) !important;
    font-size: 12px !important;
    font-weight: 780 !important;
    line-height: 16px !important;
  }

  html body.view-mock .sidebar .nav-list {
    display: flex !important;
    grid-template-columns: none !important;
    justify-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px !important;
  }

  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active {
    flex: 0 1 102px !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 78px !important;
    max-width: 116px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  html body.view-mock .sidebar .nav-link.active {
    font-size: 15px !important;
    font-weight: 820 !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    grid-template-columns: 34px minmax(0, auto) !important;
    gap: 9px !important;
    width: auto !important;
    max-width: 240px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 5px 8px 5px 5px !important;
    border-radius: 999px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card strong {
    max-width: 110px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card small {
    height: 18px !important;
    max-width: 88px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
  }
}

/* Mock nav exact parity: use the same top-nav layout model as dashboard/practice. */
@media (min-width: 981px) {
  html body.view-mock .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
    min-height: 100vh !important;
    padding: clamp(6px, 0.9vw, 12px) clamp(18px, 2.6vw, 36px) clamp(14px, 1.8vw, 24px) !important;
    align-items: stretch !important;
  }

  html body.view-mock .sidebar {
    position: relative !important;
    z-index: 40 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: minmax(148px, auto) minmax(360px, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: min(1480px, 100%) !important;
    min-height: 58px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 8px 14px !important;
    transform: none !important;
  }

  html body.view-mock .main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: min(1480px, 100%) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view {
    width: 100% !important;
    max-width: none !important;
    padding: 6px 0 40px !important;
  }

  html body.view-mock .sidebar .brand {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock .sidebar .brand-icon {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  html body.view-mock .sidebar .brand-copy {
    display: grid !important;
    align-content: center !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }

  html body.view-mock .sidebar .brand-copy strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 23px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock .sidebar .exam-type-picker {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    overflow: hidden !important;
  }

  html body.view-mock .sidebar .exam-type-picker select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(76, 84, 98, 0.72) !important;
    font-size: 12px !important;
    font-weight: 780 !important;
    line-height: 16px !important;
  }

  html body.view-mock .sidebar .nav-list {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 6px !important;
  }

  html body.view-mock .sidebar .nav-link,
  html body.view-mock .sidebar .nav-link.active {
    flex: 0 1 102px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 78px !important;
    max-width: 116px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card,
  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in {
    justify-self: end !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, auto) !important;
    align-items: center !important;
    gap: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 240px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 5px 8px 5px 5px !important;
    border-radius: 999px !important;
  }

  html body.view-mock .sidebar #sidebarUserButton.sidebar-user-card img {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Final mobile mock ordering pass: exam picker first, filters folded, history later. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view {
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 32px 32px 154px !important;
    background: transparent !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-main-column {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 0 22px !important;
    padding: 18px !important;
    border-radius: 32px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before,
  html body.view-mock #mock.active-view .mock-paper-workbench::after,
  html body.view-mock #mock.active-view .mock-paper-intro,
  html body.view-mock #mock.active-view .pte-mode-switch {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    order: -4 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: -3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: -2 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    order: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    grid-template-columns: minmax(0, 1fr) 112px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card strong {
    font-size: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card select {
    padding-inline: 11px !important;
    font-size: 11.5px !important;
  }
}

/* Final filter panel layout fix: keep the two groups in normal flow. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    position: static !important;
    order: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    order: 1 !important;
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    grid-template-columns: minmax(0, 1fr) 96px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card strong {
    font-size: 16.5px !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card select {
    padding-inline: 9px !important;
    font-size: 11px !important;
  }
}

/* Final filter panel polish: compact glass segments instead of stacked sheets. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: 0 !important;
    max-height: 0 !important;
    margin-top: -6px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.62), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(245, 250, 250, 0.1)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(26, 36, 48, 0.035),
      0 18px 40px rgba(31, 41, 55, 0.065) !important;
    backdrop-filter: blur(28px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.2) !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.985) !important;
    transition:
      max-height 0.24s ease,
      opacity 0.2s ease,
      transform 0.2s ease,
      padding 0.22s ease,
      margin 0.22s ease !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    height: auto !important;
    max-height: 220px !important;
    margin-top: 0 !important;
    padding: 15px !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    position: static !important;
    display: block !important;
    order: 0 !important;
    padding-left: 5px !important;
    color: rgba(47, 157, 136, 0.92) !important;
    font-size: 11px !important;
    font-weight: 920 !important;
    line-height: 1.1 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    order: 1 !important;
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 23px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
      rgba(255, 255, 255, 0.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 10px 22px rgba(31, 41, 55, 0.04) !important;
    overflow: visible !important;
    transform: none !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(92, 103, 118, 0.76) !important;
    font-size: 12px !important;
    font-weight: 860 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    border-color: rgba(47, 157, 136, 0.18) !important;
    background:
      linear-gradient(145deg, rgba(47, 157, 136, 0.2), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(20, 112, 98, 0.96) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 20px rgba(47, 157, 136, 0.08) !important;
  }
}

/* Mobile mock filters v7: match the home/question-bank glass language. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    height: auto !important;
    max-height: 0 !important;
    margin: -8px 0 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 9% 14%, rgba(204, 246, 238, 0.42), transparent 36%),
      radial-gradient(circle at 90% 8%, rgba(255, 244, 211, 0.32), transparent 34%),
      linear-gradient(140deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.09) 62%, rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.06) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(42, 54, 66, 0.035),
      0 18px 42px rgba(30, 44, 58, 0.07) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.985) !important;
    transition:
      max-height 0.24s ease,
      opacity 0.18s ease,
      transform 0.2s ease,
      padding 0.22s ease,
      margin 0.22s ease !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    max-height: 178px !important;
    margin-top: 0 !important;
    padding: 14px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.42), transparent 42%),
      linear-gradient(320deg, rgba(255, 255, 255, 0.16), transparent 48%) !important;
    opacity: 0.72 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    min-height: 40px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    padding: 0 !important;
    color: rgba(31, 157, 134, 0.94) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
      rgba(255, 255, 255, 0.045) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(38, 51, 63, 0.035),
      0 10px 22px rgba(31, 41, 55, 0.035) !important;
    overflow: hidden !important;
    transform: none !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(94, 105, 119, 0.72) !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    border-color: rgba(33, 181, 157, 0.18) !important;
    background:
      linear-gradient(145deg, rgba(214, 250, 244, 0.54), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(20, 120, 104, 0.96) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 8px 18px rgba(33, 181, 157, 0.08) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button:active,
  html body.view-mock #mock.active-view .mock-paper-filters button:active {
    transform: scale(0.97) !important;
  }
}

/* Mobile mock list v8: put "My mocks" first and turn papers into glass cards. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view .mock-paper-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    display: grid !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 0 2px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 9% 12%, rgba(207, 248, 241, 0.46), transparent 38%),
      radial-gradient(circle at 92% 6%, rgba(255, 241, 205, 0.32), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.07) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(37, 48, 58, 0.035),
      0 18px 44px rgba(31, 41, 55, 0.065) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    color: rgba(28, 34, 44, 0.92) !important;
    font-size: 17px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head small {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(20, 120, 104, 0.86) !important;
    font-size: 10.5px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-list {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    min-height: 78px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong {
    font-size: 13px !important;
    font-weight: 840 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    height: auto !important;
    min-height: 72px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      0 8px 20px rgba(31, 41, 55, 0.035) !important;
  }

  html body.view-mock #mock.active-view .pte-history-delete {
    display: none !important;
  }

  html body.view-mock #mock.active-view .pte-history-action,
  html body.view-mock #mock.active-view .mock-history-more {
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(20, 120, 104, 0.88) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body.view-mock #mock.active-view .mock-history-more {
    justify-self: end !important;
    margin: -2px 2px 0 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 12px 10px !important;
    width: 100% !important;
    min-height: 144px !important;
    height: auto !important;
    padding: 17px 16px 15px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 7% 12%, rgba(210, 248, 241, 0.34), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.07)),
      rgba(255, 255, 255, 0.065) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(35, 48, 60, 0.035),
      0 15px 36px rgba(30, 44, 58, 0.055) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row::before,
  html body.view-mock #mock.active-view .mock-paper-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 16px !important;
    bottom: 16px !important;
    width: 3px !important;
    border-radius: 0 999px 999px 0 !important;
    background: rgba(37, 165, 143, 0.5) !important;
    opacity: 0.72 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover,
  html body.view-mock #mock.active-view .mock-paper-card.active,
  html body.view-mock #mock.active-view .mock-paper-card:hover {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background:
      radial-gradient(circle at 7% 12%, rgba(195, 249, 239, 0.46), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)),
      rgba(255, 255, 255, 0.075) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 18px 40px rgba(30, 44, 58, 0.075) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    color: rgba(43, 51, 64, 0.72) !important;
    font-size: 14.5px !important;
    font-weight: 820 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: rgba(88, 98, 114, 0.42) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.48 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span,
  html body.view-mock #mock.active-view .mock-paper-meta span {
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(96, 107, 121, 0.66) !important;
    font-size: 10.5px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child,
  html body.view-mock #mock.active-view .mock-paper-meta span:first-child {
    background:
      linear-gradient(145deg, rgba(255, 239, 187, 0.46), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(126, 102, 42, 0.82) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i,
  html body.view-mock #mock.active-view .mock-paper-card > i,
  html body.view-mock #mock.active-view .mock-paper-card::after {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    color: rgba(39, 48, 60, 0.66) !important;
    font-size: 24px !important;
    font-weight: 360 !important;
    line-height: 1 !important;
  }
}

/* Mobile mock bottom nav v9: remove the heavy white bar under the cards. */
@media (max-width: 980px) {
  html body.view-mock .mobile-tabbar {
    left: 14px !important;
    right: 14px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    max-width: 360px !important;
    min-height: 62px !important;
    height: 62px !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.045)),
      rgba(255, 255, 255, 0.055) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 -1px 0 rgba(40, 52, 64, 0.035),
      0 16px 36px rgba(31, 41, 55, 0.055) !important;
    backdrop-filter: blur(24px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
  }

  html body.view-mock .mobile-tab {
    min-height: 48px !important;
    border-radius: 22px !important;
    background: transparent !important;
    color: rgba(82, 92, 106, 0.72) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body.view-mock .mobile-tab.active {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(28, 34, 44, 0.9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      0 8px 18px rgba(31, 41, 55, 0.045) !important;
  }
}

/* Mobile mock bottom nav v10: split the single white slab into floating glass tabs. */
@media (max-width: 980px) {
  html body.view-mock .mobile-tabbar {
    left: 16px !important;
    right: 16px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    max-width: 358px !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  html body.view-mock .mobile-tab {
    min-height: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035)),
      rgba(255, 255, 255, 0.045) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 10px 24px rgba(31, 41, 55, 0.04) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
    color: rgba(82, 92, 106, 0.72) !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
  }

  html body.view-mock .mobile-tab.active {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07)),
      rgba(255, 255, 255, 0.065) !important;
    color: rgba(28, 34, 44, 0.9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.66),
      0 12px 28px rgba(31, 41, 55, 0.055) !important;
  }
}

/* Desktop mock center overhaul: use the mobile glass language without the mobile stack. */
@media (min-width: 981px) {
  html body.view-mock {
    background:
      radial-gradient(circle at 10% 4%, rgba(125, 211, 252, 0.14), transparent 32%),
      radial-gradient(circle at 86% 10%, rgba(167, 243, 208, 0.14), transparent 30%),
      radial-gradient(circle at 54% 96%, rgba(255, 238, 183, 0.16), transparent 34%),
      linear-gradient(180deg, #f7f8f9 0%, #eef2f4 100%) !important;
    background-attachment: fixed !important;
  }

  html body.view-mock .app-shell {
    gap: 18px !important;
    padding: 14px clamp(24px, 3vw, 48px) 34px !important;
  }

  html body.view-mock .sidebar {
    max-width: 1560px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.66), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 18px 44px rgba(31, 41, 55, 0.055) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-mock .main {
    max-width: 1560px !important;
  }

  html body.view-mock #mock.active-view {
    --mock-desktop-line: rgba(255, 255, 255, 0.68);
    --mock-desktop-card:
      radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.58), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(245, 250, 250, 0.1)),
      rgba(255, 255, 255, 0.075);
    --mock-desktop-inner:
      linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.07)),
      rgba(255, 255, 255, 0.07);
    --mock-desktop-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.84),
      inset 0 -1px 0 rgba(30, 42, 54, 0.035),
      0 18px 44px rgba(31, 41, 55, 0.06);
    --mock-desktop-ink: rgba(24, 30, 40, 0.94);
    --mock-desktop-muted: rgba(88, 99, 115, 0.7);
    --mock-desktop-teal: #2f9d88;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 4px 0 52px !important;
    color: var(--mock-desktop-ink) !important;
    background: transparent !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 4px 0 18px !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    display: block !important;
    margin: 0 !important;
    color: var(--mock-desktop-ink) !important;
    font-size: clamp(26px, 2vw, 34px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-page-head p {
    display: block !important;
    margin: 7px 0 0 !important;
    color: var(--mock-desktop-muted) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions .primary-btn {
    min-height: 42px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(47, 157, 136, 0.24) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(47, 157, 136, 0.95), rgba(31, 132, 116, 0.92)),
      #2f9d88 !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(47, 157, 136, 0.16) !important;
    font-size: 13px !important;
    font-weight: 860 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
    align-items: start !important;
    gap: clamp(18px, 2.2vw, 30px) !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    position: sticky !important;
    top: 92px !important;
  }

  html body.view-mock #mock.active-view :is(.mock-paper-workbench, .mock-command-center, .mock-report-panel, .mock-session-area > .panel) {
    border: 1px solid var(--mock-desktop-line) !important;
    border-radius: 30px !important;
    background: var(--mock-desktop-card) !important;
    box-shadow: var(--mock-desktop-shadow) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before,
  html body.view-mock #mock.active-view .mock-paper-workbench::after {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    order: 0 !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 178px !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 76px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 24px !important;
    background: var(--mock-desktop-inner) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card span,
  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    color: var(--mock-desktop-teal) !important;
    font-size: 12px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card strong {
    display: block !important;
    margin-top: 7px !important;
    overflow: hidden !important;
    color: var(--mock-desktop-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card select {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: rgba(57, 66, 82, 0.86) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
    font-size: 13px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 0.72fr) minmax(280px, 1fr) !important;
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel::before {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 22px !important;
    background: var(--mock-desktop-inner) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    background: transparent !important;
    color: rgba(88, 99, 115, 0.72) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    border-color: rgba(47, 157, 136, 0.16) !important;
    background:
      linear-gradient(145deg, rgba(214, 250, 244, 0.58), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(20, 120, 104, 0.96) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 8px 18px rgba(33, 181, 157, 0.08) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 23px !important;
    background: var(--mock-desktop-inner) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
    color: rgba(88, 99, 115, 0.54) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input {
    min-width: 0 !important;
    color: var(--mock-desktop-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner,
  html body.view-mock #mock.active-view .mock-redesign-history {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 24px !important;
    background: var(--mock-desktop-inner) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    align-content: start !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    color: var(--mock-desktop-ink) !important;
    font-size: 16px !important;
    font-weight: 880 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head small,
  html body.view-mock #mock.active-view .mock-history-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(20, 120, 104, 0.86) !important;
    font-size: 11px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-list {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty,
  html body.view-mock #mock.active-view .pte-history-row,
  html body.view-mock #mock.active-view .pte-paper-row {
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055)),
      rgba(255, 255, 255, 0.06) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.66),
      0 8px 20px rgba(31, 41, 55, 0.035) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    display: grid !important;
    align-content: center !important;
    gap: 8px !important;
    min-height: 112px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong {
    color: var(--mock-desktop-ink) !important;
    font-size: 13px !important;
    font-weight: 860 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span,
  html body.view-mock #mock.active-view .pte-history-main span,
  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: var(--mock-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.42 !important;
  }

  html body.view-mock #mock.active-view .pte-history-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 74px !important;
    height: auto !important;
    padding: 12px !important;
  }

  html body.view-mock #mock.active-view .pte-history-main strong,
  html body.view-mock #mock.active-view .pte-paper-copy strong {
    overflow: hidden !important;
    color: var(--mock-desktop-ink) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.24 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .pte-history-delete {
    display: none !important;
  }

  html body.view-mock #mock.active-view .pte-history-action {
    align-self: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(47, 157, 136, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(214, 250, 244, 0.42) !important;
    color: rgba(20, 120, 104, 0.94) !important;
    font-size: 11px !important;
    font-weight: 840 !important;
  }

  html body.view-mock #mock.active-view .mock-history-more {
    justify-self: end !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 26px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 10px 14px !important;
    width: 100% !important;
    min-height: 88px !important;
    height: auto !important;
    padding: 15px 14px 14px 17px !important;
    overflow: hidden !important;
    text-align: left !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 15px !important;
    bottom: 15px !important;
    width: 3px !important;
    border-radius: 0 999px 999px 0 !important;
    background: rgba(47, 157, 136, 0.52) !important;
    opacity: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:hover,
  html body.view-mock #mock.active-view .pte-paper-row.active {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background:
      radial-gradient(circle at 8% 14%, rgba(204, 246, 238, 0.44), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
      rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 13px 28px rgba(31, 41, 55, 0.055) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:hover::before,
  html body.view-mock #mock.active-view .pte-paper-row.active::before {
    opacity: 1 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 25px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(96, 107, 121, 0.72) !important;
    font-size: 10.5px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
    background:
      linear-gradient(145deg, rgba(255, 239, 187, 0.5), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(126, 102, 42, 0.84) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    color: rgba(47, 157, 136, 0.72) !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 360 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-command-center {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    display: grid !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy span,
  html body.view-mock #mock.active-view .mock-report-panel .eyebrow {
    color: var(--mock-desktop-teal) !important;
    font-size: 12px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    color: var(--mock-desktop-ink) !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy p {
    margin: 0 !important;
    color: var(--mock-desktop-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.48 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    display: grid !important;
    gap: 4px !important;
    min-height: 66px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 20px !important;
    background: var(--mock-desktop-inner) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics span {
    overflow: hidden !important;
    color: var(--mock-desktop-ink) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics small {
    color: rgba(88, 99, 115, 0.64) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress {
    display: grid !important;
    gap: 9px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: rgba(88, 99, 115, 0.68) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress strong {
    color: var(--mock-desktop-ink) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress i {
    display: block !important;
    height: 9px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress b {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #2f9d88, #7dd3fc) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-start {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid rgba(47, 157, 136, 0.2) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(47, 157, 136, 0.95), rgba(31, 132, 116, 0.92)),
      #2f9d88 !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(47, 157, 136, 0.14) !important;
    font-size: 14px !important;
    font-weight: 880 !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel h2 {
    margin: 0 !important;
    color: var(--mock-desktop-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
  }

  html body.view-mock #mock.active-view .score-ring {
    justify-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 138px !important;
    height: 138px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.46) 0 54%, transparent 55%),
      conic-gradient(#2f9d88 0deg 236deg, rgba(255, 255, 255, 0.24) 236deg 360deg) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 30px rgba(31, 41, 55, 0.05) !important;
  }

  html body.view-mock #mock.active-view .score-ring strong {
    color: var(--mock-desktop-ink) !important;
    font-size: 32px !important;
    font-weight: 920 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .score-ring span {
    color: rgba(88, 99, 115, 0.66) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign,
  html body.view-mock #mock.active-view .mock-node82-report-ready,
  html body.view-mock #mock.active-view .mock-node82-report-rows article,
  html body.view-mock #mock.active-view .feedback-list > p {
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 20px !important;
    background: var(--mock-desktop-inner) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign,
  html body.view-mock #mock.active-view .mock-node82-report-ready {
    display: grid !important;
    gap: 8px !important;
    padding: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign span {
    color: var(--mock-desktop-teal) !important;
    font-size: 11px !important;
    font-weight: 880 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign strong,
  html body.view-mock #mock.active-view .mock-node82-report-ready strong {
    color: var(--mock-desktop-ink) !important;
    font-size: 14px !important;
    font-weight: 860 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign p,
  html body.view-mock #mock.active-view .mock-node82-report-ready span {
    margin: 0 !important;
    color: var(--mock-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign div,
  html body.view-mock #mock.active-view .mock-node82-report-rows {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-node82-report-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign b,
  html body.view-mock #mock.active-view .mock-node82-report-rows article {
    display: grid !important;
    place-items: center !important;
    min-height: 44px !important;
    padding: 8px !important;
    color: rgba(47, 157, 136, 0.9) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  html body.view-mock #mock.active-view .mock-node82-report-rows b {
    color: var(--mock-desktop-ink) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  html body.view-mock #mock.active-view .mock-node82-report-rows span {
    color: var(--mock-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 740 !important;
  }

  html body.view-mock #mock.active-view:not(.mock-exam-focus) .mock-session-area {
    display: none !important;
  }

  html body.view-mock #mock.active-view.mock-exam-focus .mock-center-layout,
  html body.view-mock #mock.active-view.mock-exam-focus .mock-page-head {
    display: none !important;
  }

  html body.view-mock #mock.active-view.mock-exam-focus .mock-session-area {
    display: block !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
  }

  html body.view-mock #mock.active-view .mock-session-area > .panel {
    padding: 22px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-mock #mock.active-view .mock-center-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    position: static !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile/desktop mock motion v13: crisp glass motion without tap latency. */
html body.view-mock #mock.active-view {
  --mock-ease-out: cubic-bezier(0.22, 0.72, 0.2, 1);
  --mock-ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.view-mock #mock.active-view :is(
  .mock-mobile-exam-card,
  .mock-redesign-history,
  .mock-paper-workbench,
  .mock-report-panel,
  .mock-flow-panel,
  .mock-session-area > .panel
) {
  animation: mockGlassRise 180ms var(--mock-ease-out) both !important;
  transform-origin: center bottom !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar {
  animation: mockGlassRise 160ms var(--mock-ease-out) both !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
  animation: mockPaperCardIn 170ms var(--mock-ease-out) both !important;
  transition:
    transform 120ms var(--mock-ease-spring),
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    filter 120ms ease !important;
  will-change: transform !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(1) {
  animation-delay: 0ms !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(2) {
  animation-delay: 18ms !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(3) {
  animation-delay: 36ms !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(4) {
  animation-delay: 54ms !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(118deg, transparent 0%, rgba(255, 255, 255, 0.28) 38%, transparent 62%) !important;
  opacity: 0 !important;
  transform: translateX(-46%) !important;
  transition: opacity 120ms ease, transform 260ms var(--mock-ease-out) !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:hover,
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:focus-visible {
  transform: translateY(-3px) scale(1.006) !important;
  filter: saturate(1.04) !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:hover::after,
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:focus-visible::after {
  opacity: 0.72 !important;
  transform: translateX(46%) !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:active {
  transform: translateY(0) scale(0.988) !important;
  transition-duration: 70ms !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle,
html body.view-mock #mock.active-view .mock-paper-tabs button,
html body.view-mock #mock.active-view .mock-paper-filters button,
html body.view-mock #mock.active-view .pte-history-action,
html body.view-mock #mock.active-view .mock-history-more,
html body.view-mock .mobile-tab {
  transition:
    transform 90ms var(--mock-ease-spring),
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle:hover,
html body.view-mock #mock.active-view .mock-paper-tabs button:hover,
html body.view-mock #mock.active-view .mock-paper-filters button:hover,
html body.view-mock #mock.active-view .pte-history-action:hover,
html body.view-mock #mock.active-view .mock-history-more:hover,
html body.view-mock .mobile-tab:hover {
  transform: translateY(-2px) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle:active,
html body.view-mock #mock.active-view .mock-paper-tabs button:active,
html body.view-mock #mock.active-view .mock-paper-filters button:active,
html body.view-mock #mock.active-view .pte-history-action:active,
html body.view-mock #mock.active-view .mock-history-more:active,
html body.view-mock .mobile-tab:active {
  transform: scale(0.965) !important;
}

html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
  animation: mockFilterDrop 150ms var(--mock-ease-out) both !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field:focus-within {
  transform: translateY(-1px) !important;
  border-color: rgba(47, 157, 136, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 12px 26px rgba(47, 157, 136, 0.065) !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  animation-delay: 0ms !important;
}

html body.view-mock #mock.active-view .mock-redesign-history-head small {
  animation: mockBadgeBreathe 3.6s ease-in-out infinite !important;
}

html body.view-mock #mock.active-view .pte-paper-row i {
  transition: transform 110ms var(--mock-ease-spring), color 110ms ease !important;
}

html body.view-mock #mock.active-view .pte-paper-row:hover i,
html body.view-mock #mock.active-view .pte-paper-row:focus-visible i {
  transform: translateX(3px) !important;
  color: rgba(20, 120, 104, 0.78) !important;
}

@keyframes mockGlassRise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockPaperCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockFilterDrop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.994);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockBadgeBreathe {
  0%,
  100% {
    transform: scale(1);
    filter: saturate(1);
  }
  50% {
    transform: scale(1.025);
    filter: saturate(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.view-mock #mock.active-view *,
  html body.view-mock #mock.active-view *::before,
  html body.view-mock #mock.active-view *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Desktop mock final layout lock: keep late animation/pass rules from changing the grid. */
@media (min-width: 981px) {
  html body.view-mock #mock.active-view .mock-paper-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    column-gap: 14px !important;
    row-gap: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    order: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel,
  html body.view-mock #mock.active-view .mock-paper-toolbar,
  html body.view-mock #mock.active-view .mock-paper-list {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-list-inner {
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
    grid-template-columns: minmax(0, 1fr) auto 26px !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center,
  html body.view-mock #mock.active-view .mock-report-panel {
    grid-column: 1 !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    order: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    order: 1 !important;
  }
}

/* Desktop mock mobile-style final pass: same language as mobile, only wider. */
@media (min-width: 981px) {
  html body.view-mock {
    background:
      radial-gradient(circle at 14% 5%, rgba(110, 231, 183, 0.18), transparent 30%),
      radial-gradient(circle at 88% 14%, rgba(147, 197, 253, 0.16), transparent 28%),
      linear-gradient(180deg, #f7f8f9 0%, #f1f3f5 100%) !important;
  }

  html body.view-mock #mock.active-view {
    width: min(100%, 1360px) !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 10px clamp(18px, 2.2vw, 32px) 64px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 0 0 24px !important;
    padding: 0 4px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    color: rgba(32, 39, 51, 0.96) !important;
    font-size: clamp(28px, 2.3vw, 38px) !important;
    font-weight: 940 !important;
    line-height: 1.06 !important;
  }

  html body.view-mock #mock.active-view .mock-page-head p {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions {
    display: flex !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions .primary-btn {
    width: 164px !important;
    min-height: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(64, 170, 149, 0.95), rgba(31, 145, 127, 0.96)) !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 18px 36px rgba(47, 157, 136, 0.14) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) minmax(360px, 420px) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: clamp(22px, 3vw, 34px) !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    position: sticky !important;
    top: 92px !important;
    align-content: start !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench::before,
  html body.view-mock #mock.active-view .mock-paper-workbench::after {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    order: -4 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card,
  html body.view-mock #mock.active-view .mock-mobile-filter-group,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field,
  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-list-inner,
  html body.view-mock #mock.active-view .mock-command-center,
  html body.view-mock #mock.active-view .mock-report-panel {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    background:
      radial-gradient(circle at 10% 8%, rgba(213, 250, 244, 0.34), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.075)),
      rgba(255, 255, 255, 0.06) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(35, 48, 60, 0.035),
      0 18px 44px rgba(30, 44, 58, 0.06) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 92px !important;
    padding: 18px 20px !important;
    border-radius: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card span,
  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    color: rgba(31, 157, 134, 0.94) !important;
    font-size: 13px !important;
    font-weight: 920 !important;
    line-height: 1.1 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card strong {
    display: block !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    color: rgba(32, 39, 51, 0.96) !important;
    font-size: 26px !important;
    font-weight: 940 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(72, 82, 98, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    font-size: 14px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: -3 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    border-radius: 29px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
    color: rgba(117, 128, 144, 0.62) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: -2 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel::before {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    background: transparent !important;
    color: rgba(105, 116, 132, 0.72) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 860 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    border-color: rgba(33, 181, 157, 0.2) !important;
    background:
      linear-gradient(145deg, rgba(214, 250, 244, 0.56), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(20, 120, 104, 0.98) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 8px 18px rgba(33, 181, 157, 0.08) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    order: 1 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history,
  html body.view-mock #mock.active-view .mock-paper-list-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 30px !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    color: rgba(32, 39, 51, 0.96) !important;
    font-size: 18px !important;
    font-weight: 920 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head small,
  html body.view-mock #mock.active-view .mock-history-more {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.11) !important;
    color: rgba(20, 120, 104, 0.88) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty,
  html body.view-mock #mock.active-view .pte-history-row,
  html body.view-mock #mock.active-view .pte-paper-row {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 7% 12%, rgba(210, 248, 241, 0.3), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.055)),
      rgba(255, 255, 255, 0.055) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 12px 26px rgba(31, 41, 55, 0.045) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    display: grid !important;
    align-content: center !important;
    gap: 9px !important;
    min-height: 118px !important;
    padding: 18px 20px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong,
  html body.view-mock #mock.active-view .pte-history-main strong,
  html body.view-mock #mock.active-view .pte-paper-copy strong {
    color: rgba(32, 39, 51, 0.96) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span,
  html body.view-mock #mock.active-view .pte-history-main span,
  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: rgba(117, 128, 144, 0.72) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.48 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    grid-template-rows: auto auto !important;
    gap: 14px 12px !important;
    width: 100% !important;
    min-height: 128px !important;
    height: auto !important;
    padding: 18px 18px 16px 22px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 18px !important;
    bottom: 18px !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
    background: rgba(47, 157, 136, 0.52) !important;
    opacity: 0.82 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    overflow: hidden !important;
    font-size: 17px !important;
    line-height: 1.24 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(117, 128, 144, 0.72) !important;
    font-size: 11.5px !important;
    font-weight: 840 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
    background:
      linear-gradient(145deg, rgba(255, 239, 187, 0.5), rgba(255, 255, 255, 0.16)),
      rgba(255, 255, 255, 0.08) !important;
    color: rgba(126, 102, 42, 0.86) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    color: rgba(47, 157, 136, 0.72) !important;
    font-size: 24px !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center,
  html body.view-mock #mock.active-view .mock-report-panel {
    display: grid !important;
    grid-column: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card,
  html body.view-mock #mock.active-view .mock-report-panel {
    padding: 22px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    color: rgba(32, 39, 51, 0.96) !important;
    font-size: 28px !important;
    font-weight: 940 !important;
    line-height: 1.12 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy p,
  html body.view-mock #mock.active-view .mock-report-panel p,
  html body.view-mock #mock.active-view .mock-report-empty-redesign p {
    color: rgba(117, 128, 144, 0.72) !important;
    font-size: 14px !important;
    font-weight: 720 !important;
    line-height: 1.48 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    min-height: 74px !important;
    border-radius: 22px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-start {
    min-height: 52px !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(47, 157, 136, 0.95), rgba(31, 145, 127, 0.98)) !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel h2 {
    color: rgba(32, 39, 51, 0.96) !important;
    font-size: 26px !important;
    font-weight: 940 !important;
  }

  html body.view-mock #mock.active-view .score-ring {
    width: 142px !important;
    height: 142px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-mock #mock.active-view {
    max-width: 980px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    position: static !important;
  }
}

@media (min-width: 981px) {
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
    grid-template-columns: minmax(0, 1fr) 32px !important;
  }
}

/* Mock paper cards v14: keep legacy card decoration off without hiding the current row accent. */
html body.view-mock #mock.active-view .mock-paper-card::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
}

/* Mock toolbar v15: keep search and filter on one mobile row. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-filter-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-filter-toggle span {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-filter-toggle svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Mock filter panel v17: cleaner stacked glass sheet. */
@media (max-width: 980px) {
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-panel {
    order: -2 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) scale(0.995) !important;
    transition:
      max-height 160ms var(--mock-ease-out),
      opacity 120ms ease,
      transform 140ms var(--mock-ease-out),
      padding 140ms ease,
      margin 140ms ease !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-paper-workbench .mock-mobile-filter-panel {
    max-height: 236px !important;
    margin: 2px 0 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
      rgba(245, 250, 250, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 16px 34px rgba(31, 41, 55, 0.07) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
    backdrop-filter: blur(24px) saturate(1.22) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      0 8px 18px rgba(31, 41, 55, 0.035) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group + .mock-mobile-filter-group {
    margin-top: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group > span {
    grid-column: 1 !important;
    color: rgba(47, 157, 136, 0.9) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-filters {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-filters button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 18px !important;
    font-size: 13px !important;
    font-weight: 860 !important;
  }
}

/* Desktop mock v18: align desktop logic and visual language with mobile glass system. */
@media (min-width: 981px) {
  html body.view-mock {
    background:
      radial-gradient(circle at 10% 2%, rgba(209, 250, 244, 0.34), transparent 27%),
      radial-gradient(circle at 86% 10%, rgba(222, 236, 255, 0.32), transparent 26%),
      radial-gradient(circle at 44% 102%, rgba(214, 250, 244, 0.18), transparent 32%),
      linear-gradient(180deg, #f7f8fa 0%, #f2f5f7 100%) !important;
  }

  html body.view-mock #mock.active-view {
    width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    padding: 18px clamp(24px, 3vw, 44px) 72px !important;
    --mock-desktop-card: rgba(255, 255, 255, 0.12);
    --mock-desktop-border: rgba(255, 255, 255, 0.66);
    --mock-desktop-shadow: 0 20px 52px rgba(31, 41, 55, 0.07);
  }

  html body.view-mock #mock.active-view .mock-page-head {
    max-width: 1260px !important;
    margin: 0 auto 18px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    font-size: 34px !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    grid-template-columns: minmax(720px, 820px) minmax(380px, 430px) !important;
    gap: clamp(24px, 3vw, 42px) !important;
    align-items: start !important;
  }

  html body.view-mock #mock.active-view .mock-main-column {
    gap: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    top: 86px !important;
    gap: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-mobile-exam-card,
    .mock-paper-toolbar .search-field,
    .mock-mobile-filter-panel,
    .mock-redesign-history,
    #mockCommandCenter.mock-command-center,
    .mock-report-panel,
    .pte-history-empty,
    .pte-history-row
  ) {
    border-color: var(--mock-desktop-border) !important;
    background:
      radial-gradient(circle at 8% 10%, rgba(210, 250, 243, 0.34), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.075)),
      var(--mock-desktop-card) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(31, 41, 55, 0.035),
      var(--mock-desktop-shadow) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.16) !important;
    backdrop-filter: blur(28px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    order: -5 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card {
    min-height: 74px !important;
    grid-template-columns: minmax(0, 1fr) 210px !important;
    padding: 14px 16px 14px 20px !important;
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card span {
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card strong {
    margin-top: 5px !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-exam-card select {
    height: 46px !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.16) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-intro {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    order: -4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 58px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 20px !important;
    border-radius: 29px !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 1px solid var(--mock-desktop-border) !important;
    border-radius: 999px !important;
    color: rgba(47, 157, 136, 0.92) !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle span {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle:focus,
  html body.view-mock #mock.active-view .mock-filter-toggle:focus-visible {
    outline: none !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-filter-toggle,
  html body.view-mock #mock.active-view .mock-filter-toggle:focus-visible {
    border-color: rgba(47, 157, 136, 0.28) !important;
    background:
      linear-gradient(145deg, rgba(214, 250, 244, 0.46), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.1) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 22px rgba(47, 157, 136, 0.08) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: -3 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 30px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) scale(0.996) !important;
    box-shadow: none !important;
    transition:
      max-height 160ms var(--mock-ease-out),
      opacity 120ms ease,
      transform 140ms var(--mock-ease-out),
      padding 140ms ease,
      margin 140ms ease !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    max-height: 128px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--mock-desktop-border) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.56),
      0 8px 18px rgba(31, 41, 55, 0.035) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 1 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 5px !important;
    border-radius: 21px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 17px !important;
    font-size: 12.5px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list {
    order: 1 !important;
    gap: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    padding: 14px !important;
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    font-size: 17px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    min-height: 82px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner {
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    gap: 12px !important;
    padding: 18px 18px 16px !important;
    border-radius: 24px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    white-space: normal !important;
    font-size: 18px !important;
    line-height: 1.22 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    font-size: 22px !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    display: grid !important;
    border-radius: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    padding: 24px !important;
    gap: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy span,
  html body.view-mock #mock.active-view .mock-report-panel .eyebrow {
    color: rgba(47, 157, 136, 0.92) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    font-size: clamp(28px, 2.3vw, 34px) !important;
    line-height: 1.1 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy p {
    margin-top: 8px !important;
    font-size: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    gap: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    min-height: 76px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.64),
      0 8px 18px rgba(31, 41, 55, 0.035) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article span {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress i {
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-start {
    min-height: 54px !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, rgba(47, 157, 136, 0.96), rgba(31, 145, 127, 0.98)) !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    padding: 22px !important;
    border-radius: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel h2 {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  html body.view-mock #mock.active-view .score-ring {
    width: 116px !important;
    height: 116px !important;
    margin: 12px auto 0 !important;
  }
}

/* Mock palette v21: final visible pass, placed after all layout overrides. */
html body.view-mock {
  background:
    radial-gradient(circle at 12% 0%, rgba(225, 248, 244, 0.12), transparent 36%),
    radial-gradient(circle at 92% 0%, rgba(255, 250, 233, 0.1), transparent 34%),
    linear-gradient(180deg, #fbfcfd 0%, #f8fafb 56%, #f6f8f9 100%) !important;
}
/* Mock typography v25: EOF override, guaranteed after palette rules. */
html body.view-mock #mock.active-view .mock-page-head h2 {
  font-weight: 760 !important;
  color: rgba(21, 26, 34, 0.92) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-command-copy strong, .mock-report-panel h2) {
  font-weight: 740 !important;
  color: rgba(21, 26, 34, 0.92) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view :is(
  .pte-paper-copy strong,
  .pte-history-main strong,
  .pte-history-empty strong,
  .mock-redesign-history-head span,
  .mock-paper-intro strong
) {
  font-weight: 720 !important;
  color: rgba(31, 38, 48, 0.9) !important;
  letter-spacing: 0 !important;
}

html body.view-mock #mock.active-view :is(
  .mock-desktop-command-copy p,
  .mock-report-panel p,
  .mock-report-empty-redesign p,
  .mock-paper-intro span,
  .pte-paper-copy span,
  .pte-history-main span,
  .pte-history-empty span,
  .mock-paper-toolbar .search-field input,
  .mock-paper-toolbar .search-field input::placeholder,
  .mock-paper-toolbar .search-field span,
  .mock-desktop-command-metrics article small
) {
  font-weight: 520 !important;
  color: rgba(82, 91, 106, 0.72) !important;
  letter-spacing: 0 !important;
}

/* Mock motion v26: bring the mock center into the same glass interaction language. */
html body.view-mock #mock.active-view {
  --mock-motion-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
  --mock-motion-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body.view-mock #mock.active-view :is(
  .mock-page-head,
  .mock-paper-workbench,
  #mockCommandCenter.mock-command-center,
  .mock-report-panel,
  .mock-redesign-history
) {
  animation: mockGlassRise 340ms var(--mock-motion-ease) both !important;
  will-change: transform, opacity;
}

html body.view-mock #mock.active-view .mock-paper-workbench {
  animation-delay: 90ms !important;
}

html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
  animation-delay: 45ms !important;
}

html body.view-mock #mock.active-view .mock-report-panel {
  animation-delay: 130ms !important;
}

html body.view-mock #mock.active-view .mock-redesign-history {
  animation-delay: 165ms !important;
}

html body.view-mock #mock.active-view :is(
  .pte-paper-row,
  .pte-history-row,
  .pte-history-empty,
  .mock-paper-tabs,
  .mock-paper-filters,
  .mock-history-more,
  .pte-history-action
) {
  transition:
    transform 220ms var(--mock-motion-snap),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 180ms ease,
    opacity 180ms ease !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
  animation: mockGlassItemIn 280ms var(--mock-motion-ease) both !important;
  animation-delay: calc(70ms + var(--mock-row-index, 0) * 36ms) !important;
  position: relative !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(1) { --mock-row-index: 0; }
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(2) { --mock-row-index: 1; }
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(3) { --mock-row-index: 2; }
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(4) { --mock-row-index: 3; }
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:nth-child(5) { --mock-row-index: 4; }

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row::after,
html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center::after,
html body.view-mock #mock.active-view .mock-report-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.38) 42%, transparent 68%) !important;
  opacity: 0 !important;
  transform: translateX(-42%) !important;
  transition: opacity 220ms ease, transform 460ms var(--mock-motion-ease) !important;
}

html body.view-mock #mock.active-view :is(.pte-paper-row, #mockCommandCenter.mock-command-center, .mock-report-panel) {
  position: relative !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:hover,
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:focus-visible,
html body.view-mock #mock.active-view .pte-history-row:hover,
html body.view-mock #mock.active-view .pte-history-action:hover,
html body.view-mock #mock.active-view .mock-history-more:hover {
  transform: translateY(-3px) scale(1.006) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(20, 28, 38, 0.035),
    0 22px 42px -30px rgba(20, 28, 44, 0.34) !important;
}

html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:hover::after,
html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:focus-visible::after,
html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center:hover::after,
html body.view-mock #mock.active-view .mock-report-panel:hover::after {
  opacity: 0.68 !important;
  transform: translateX(42%) !important;
}

html body.view-mock #mock.active-view :is(
  .mock-paper-list-inner .pte-paper-row:active,
  .mock-desktop-start:active,
  .mock-details-button:active,
  .mock-filter-toggle:active,
  .mock-paper-tabs button:active,
  .mock-paper-filters button:active,
  .mock-paper-intro [data-mock-details-close]:active,
  .pte-history-action:active,
  .mock-history-more:active
) {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow:
    inset 0 2px 8px rgba(30, 42, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px -22px rgba(20, 28, 44, 0.28) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle:hover,
html body.view-mock #mock.active-view .mock-paper-toolbar .search-field:focus-within {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 34px -30px rgba(20, 28, 44, 0.32) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle svg,
html body.view-mock #mock.active-view .pte-paper-row i {
  transition: transform 220ms var(--mock-motion-snap), color 180ms ease, opacity 180ms ease !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle:hover svg {
  transform: translateY(-1px) rotate(-6deg) !important;
}

html body.view-mock #mock.active-view.mock-filters-open .mock-filter-toggle svg {
  transform: rotate(180deg) scale(0.94) !important;
}

html body.view-mock #mock.active-view .pte-paper-row:hover i,
html body.view-mock #mock.active-view .pte-paper-row:focus-visible i {
  transform: translateX(4px) !important;
  color: rgba(116, 151, 205, 0.9) !important;
}

html body.view-mock #mock.active-view .mock-desktop-start {
  position: relative !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .mock-desktop-start::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(108deg, transparent 0 36%, rgba(255, 211, 64, 0.16) 43%, rgba(255, 255, 255, 0.9) 49%, rgba(255, 212, 68, 0.3) 54%, transparent 64%) !important;
  opacity: 0.46 !important;
  transform: translateX(-58%) !important;
  transition: opacity 180ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

html body.view-mock #mock.active-view .mock-desktop-start:hover {
  color: rgba(21, 26, 34, 0.9) !important;
}

html body.view-mock #mock.active-view .mock-desktop-start:hover:not(:disabled)::after,
html body.view-mock #mock.active-view .mock-desktop-start:focus-visible::after {
  opacity: 0.86 !important;
  transform: translateX(58%) !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-progress b {
  transition: width 520ms var(--mock-motion-ease), background 220ms ease !important;
}

html body.view-mock #mock.active-view .score-ring {
  animation: mockRingBreath 3.8s ease-in-out infinite !important;
}

html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel,
html body.view-mock #mock.active-view.mock-filters-open .mock-paper-workbench .mock-mobile-filter-panel {
  animation: mockFilterUnfold 260ms var(--mock-motion-ease) both !important;
}

html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field span,
html body.view-mock #mock.active-view .mock-paper-workbench .mock-mobile-filter-group > span {
  font-weight: 680 !important;
  letter-spacing: 0 !important;
}

@keyframes mockGlassRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockGlassItemIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockFilterUnfold {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockRingBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 10px 22px rgba(31, 41, 55, 0.06));
  }
  50% {
    transform: scale(1.025);
    filter: drop-shadow(0 14px 28px rgba(31, 41, 55, 0.09));
  }
}

/* Mock web v27: align with the current dashboard/question-bank yellow glass system. */
@media (min-width: 981px) {
  html body.view-mock {
    --mock-web-ink: #101722;
    --mock-web-muted: rgba(44, 58, 77, 0.62);
    --mock-web-soft: rgba(44, 58, 77, 0.44);
    --mock-web-line: rgba(255, 255, 255, 0.82);
    --mock-web-glass: rgba(255, 255, 255, 0.58);
    --mock-web-glass-strong: rgba(255, 255, 255, 0.72);
    --mock-web-blue: #1870df;
    --mock-web-green: #00b783;
    --mock-web-teal: #0a9287;
    --mock-web-red: #ff453a;
    --mock-web-gold: #f6c542;
    --mock-web-shadow: 0 18px 42px -34px rgba(163, 107, 5, 0.18);
    color: var(--mock-web-ink) !important;
    background:
      radial-gradient(680px 560px at 4% 8%, rgba(255, 214, 38, 0.46), transparent 74%),
      linear-gradient(135deg, #ffd21d 0%, #ffe36a 23%, #fff2ae 48%, #fffbee 72%, #ffffff 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, 100% 1600px !important;
    overflow-x: hidden !important;
  }

  html body.view-mock .app-shell,
  html body.view-mock .main,
  html body.view-mock #mock.active-view {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html body.view-mock .main > .topbar {
    display: none !important;
  }

  html body.view-mock .app-shell {
    padding-top: 96px !important;
  }

  html body.view-mock .main {
    padding-top: 0 !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list {
    position: absolute !important;
    left: 520px !important;
    top: 8.85px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list::before,
  html body.view-mock .app-shell .sidebar .nav-list::after {
    content: none !important;
    display: none !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    border-radius: 25px !important;
    color: rgba(13, 19, 28, 0.62) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24)),
      rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 12px rgba(255, 255, 255, 0.44),
      inset 0 -10px 18px rgba(255, 228, 128, 0.08) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 120ms ease,
      background 120ms ease,
      opacity 100ms ease !important;
    will-change: transform !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link.is-hidden {
    display: none !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link::before {
    content: none !important;
    display: none !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link .icon {
    position: static !important;
    display: grid !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    color: rgba(43, 49, 59, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link .icon svg {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link > span:not(.icon) {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link.active {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    color: rgba(13, 19, 28, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.74) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 16px 30px -24px rgba(24, 112, 223, 0.2),
      inset 0 1px 14px rgba(255, 255, 255, 0.58),
      inset 0 -10px 18px rgba(24, 112, 223, 0.04) !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link.active .icon {
    color: var(--mock-web-blue) !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link:hover {
    transform: translate3d(0, -1px, 0) scale(1.012) !important;
    border-color: rgba(255, 255, 255, 0.76) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.48) !important;
    box-shadow:
      0 16px 30px -24px rgba(31, 42, 55, 0.18),
      inset 0 1px 14px rgba(255, 255, 255, 0.58) !important;
    filter: none !important;
  }

  html body.view-mock .app-shell .sidebar .nav-list .nav-link:active {
    transform: translate3d(0, 0, 0) scale(0.99) !important;
    transition-duration: 70ms !important;
  }

  html body.view-mock .app-shell .sidebar .brand .brand-copy .exam-type-picker,
  html body.view-mock .app-shell .sidebar .brand .exam-type-picker,
  html body.view-mock .app-shell .sidebar .exam-type-picker {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)),
      rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 12px 26px -20px rgba(24, 112, 223, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(24, 112, 223, 0.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
    backdrop-filter: blur(24px) saturate(1.14) !important;
  }

  html body.view-mock .app-shell .sidebar .brand .brand-copy .exam-type-picker select,
  html body.view-mock .app-shell .sidebar .brand .exam-type-picker select,
  html body.view-mock .app-shell .sidebar .exam-type-picker select {
    padding-right: 50px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
  }

  html body.view-mock .app-shell .sidebar .brand .brand-copy .exam-type-picker select::-ms-expand,
  html body.view-mock .app-shell .sidebar .brand .exam-type-picker select::-ms-expand,
  html body.view-mock .app-shell .sidebar .exam-type-picker select::-ms-expand {
    display: none !important;
  }

  html body.view-mock .app-shell .sidebar .brand .brand-copy .exam-type-picker::after,
  html body.view-mock .app-shell .sidebar .brand .exam-type-picker::after,
  html body.view-mock .app-shell .sidebar .exam-type-picker::after {
    content: "⌄" !important;
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    top: 50% !important;
    display: grid !important;
    width: 32px !important;
    height: 26px !important;
    place-items: center !important;
    color: var(--mock-web-blue) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(222, 239, 255, 0.54)),
      rgba(221, 238, 255, 0.46) !important;
    border: 1px solid rgba(24, 112, 223, 0.24) !important;
    border-radius: 13px !important;
    box-shadow:
      0 12px 20px -16px rgba(24, 112, 223, 0.44),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(24, 112, 223, 0.1) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  html body.view-mock #mock.active-view {
    width: min(1140px, calc(100vw - 128px)) !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 24px 0 64px !important;
    color: var(--mock-web-ink) !important;
    -webkit-font-smoothing: antialiased;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 74px !important;
    margin: 0 0 18px !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    margin: 0 !important;
    color: var(--mock-web-ink) !important;
    font-size: 38px !important;
    font-weight: 860 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-page-head p {
    display: none !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-paper-workbench,
    #mockCommandCenter.mock-command-center,
    .mock-report-panel,
    .mock-redesign-history,
    .mock-session-area > .panel
  ) {
    border: 1px solid var(--mock-web-line) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52)),
      var(--mock-web-glass) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 223, 108, 0.08),
      var(--mock-web-shadow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.13) !important;
    backdrop-filter: blur(24px) saturate(1.13) !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-paper-workbench,
    #mockCommandCenter.mock-command-center,
    .mock-report-panel,
    .mock-redesign-history,
    .mock-session-area > .panel
  ) {
    position: relative !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-paper-workbench,
    #mockCommandCenter.mock-command-center,
    .mock-report-panel,
    .mock-redesign-history,
    .mock-session-area > .panel
  )::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(132deg, rgba(255, 255, 255, 0.28), transparent 34%, transparent 70%, rgba(255, 255, 255, 0.12)),
      radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.22), transparent 31%) !important;
    opacity: 0.78 !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions .primary-btn,
  html body.view-mock #mock.active-view .mock-desktop-start,
  html body.view-mock #mock.active-view .pte-history-action,
  html body.view-mock #mock.active-view .mock-history-more,
  html body.view-mock #mock.active-view .mock-filter-toggle,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field,
  html body.view-mock #mock.active-view .mock-paper-tabs,
  html body.view-mock #mock.active-view .mock-paper-filters {
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 12px 26px -23px rgba(31, 42, 55, 0.28) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  html body.view-mock #mock.active-view .mock-page-actions .primary-btn {
    min-width: 124px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 24px !important;
    color: rgba(16, 23, 34, 0.78) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 720px) 380px !important;
    gap: 38px !important;
    align-items: start !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    display: grid !important;
    gap: 18px !important;
    min-height: 760px !important;
    padding: 20px !important;
    border-radius: 32px !important;
    background:
      radial-gradient(circle at 92% 2%, rgba(255, 209, 26, 0.1), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.54)),
      rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 12px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 29px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field span {
    position: static !important;
    display: block !important;
    color: rgba(44, 58, 77, 0.56) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: rgba(16, 23, 34, 0.82) !important;
    font-size: 15px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field input::placeholder {
    color: rgba(44, 58, 77, 0.42) !important;
    opacity: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    display: grid !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 29px !important;
    color: var(--mock-web-blue) !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle span {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle svg {
    width: 24px !important;
    height: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.35 !important;
    stroke-linecap: round !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 16px 34px -28px rgba(31, 42, 55, 0.24) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
    backdrop-filter: blur(20px) saturate(1.1) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button,
  html body.view-mock #mock.active-view .mock-paper-filters button {
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(44, 58, 77, 0.62) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs button.active,
  html body.view-mock #mock.active-view .mock-paper-filters button.active {
    color: rgba(13, 19, 28, 0.8) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(221, 238, 255, 0.48)),
      rgba(221, 238, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.54)),
      rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    color: var(--mock-web-ink) !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head small,
  html body.view-mock #mock.active-view .mock-history-more {
    color: var(--mock-web-teal) !important;
    font-size: 13px !important;
    font-weight: 680 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty,
  html body.view-mock #mock.active-view .pte-history-row {
    border: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong,
  html body.view-mock #mock.active-view .pte-history-main strong {
    color: rgba(16, 23, 34, 0.86) !important;
    font-size: 14px !important;
    font-weight: 720 !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span,
  html body.view-mock #mock.active-view .pte-history-main span {
    color: var(--mock-web-muted) !important;
    font-size: 13px !important;
    font-weight: 520 !important;
    line-height: 1.55 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)),
      rgba(255, 255, 255, 0.52) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    --mock-row-accent: var(--mock-web-blue);
    --mock-row-tint: rgba(221, 238, 255, 0.38);
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 26px !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 116px !important;
    margin: 0 !important;
    padding: 22px 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58)),
      rgba(255, 255, 255, 0.58) !important;
    color: var(--mock-web-ink) !important;
    text-align: left !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 14px 30px -28px rgba(31, 42, 55, 0.22) !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      transform 145ms cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 130ms ease,
      background 145ms ease,
      box-shadow 145ms ease !important;
    will-change: transform !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:nth-child(2) {
    --mock-row-accent: var(--mock-web-green);
    --mock-row-tint: rgba(221, 247, 229, 0.4);
  }

  html body.view-mock #mock.active-view .pte-paper-row:nth-child(3) {
    --mock-row-accent: var(--mock-web-red);
    --mock-row-tint: rgba(255, 229, 229, 0.4);
  }

  html body.view-mock #mock.active-view .pte-paper-row::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 2px !important;
    width: 112px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.88), var(--mock-row-tint)) !important;
    opacity: 0.92 !important;
    transform: none !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
      linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.42) 45%, transparent 72%) !important;
    opacity: 0 !important;
    transform: translateX(-56%) !important;
    transition: opacity 150ms ease, transform 360ms cubic-bezier(0.2, 0.85, 0.25, 1) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover,
  html body.view-mock #mock.active-view .pte-paper-row:focus-visible {
    border-color: rgba(255, 255, 255, 0.94) !important;
    background:
      radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.62), transparent 32%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.66)),
      var(--mock-row-tint) !important;
    box-shadow:
      0 22px 44px -32px rgba(31, 42, 55, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    transform: translate3d(0, -3px, 0) scale(1.004) !important;
    outline: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:hover::after,
  html body.view-mock #mock.active-view .pte-paper-row:focus-visible::after {
    opacity: 0.72 !important;
    transform: translateX(52%) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:active {
    transform: translate3d(0, 0, 0) scale(0.99) !important;
    transition-duration: 70ms !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    display: grid !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    color: rgba(16, 23, 34, 0.9) !important;
    font-size: 18px !important;
    font-weight: 780 !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: var(--mock-web-muted) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    line-height: 1.5 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 174px !important;
    min-width: 174px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 13px !important;
    color: rgba(44, 58, 77, 0.66) !important;
    background: rgba(255, 255, 255, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
    color: #7b560f !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 218, 0.48)),
      rgba(255, 248, 218, 0.46) !important;
    border-color: rgba(246, 197, 66, 0.26) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:nth-child(2) {
    color: var(--mock-web-blue) !important;
    background: rgba(221, 238, 255, 0.38) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:nth-child(3) {
    color: var(--mock-web-teal) !important;
    background: rgba(213, 249, 244, 0.4) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    display: grid !important;
    width: 26px !important;
    height: 26px !important;
    place-items: center !important;
    border-radius: 13px !important;
    color: var(--mock-row-accent) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:hover i {
    transform: translate3d(3px, 0, 0) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-detail {
    display: none !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center,
  html body.view-mock #mock.active-view .mock-report-panel {
    border-radius: 32px !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    padding: 26px !important;
    background:
      radial-gradient(circle at 90% 8%, rgba(24, 112, 223, 0.1), transparent 38%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.54)),
      rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    display: grid !important;
    gap: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy {
    display: grid !important;
    gap: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy span,
  html body.view-mock #mock.active-view .mock-report-panel .eyebrow {
    color: var(--mock-web-teal) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    color: var(--mock-web-ink) !important;
    font-size: 29px !important;
    font-weight: 820 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy p {
    margin: 0 !important;
    color: var(--mock-web-muted) !important;
    font-size: 14px !important;
    font-weight: 540 !important;
    line-height: 1.55 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    display: grid !important;
    gap: 4px !important;
    min-height: 76px !important;
    padding: 14px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.44)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:nth-child(1) span {
    color: var(--mock-web-blue) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:nth-child(2) span {
    color: var(--mock-web-green) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:nth-child(3) span {
    color: var(--mock-web-red) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article span {
    font-size: 26px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article small {
    color: rgba(44, 58, 77, 0.56) !important;
    font-size: 12px !important;
    font-weight: 640 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress {
    display: grid !important;
    gap: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress span {
    color: rgba(44, 58, 77, 0.62) !important;
    font-size: 13px !important;
    font-weight: 680 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress strong {
    color: var(--mock-web-ink) !important;
    font-size: 18px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress i {
    display: block !important;
    height: 10px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.4)),
      rgba(221, 238, 255, 0.3) !important;
    box-shadow: inset 0 1px 3px rgba(24, 112, 223, 0.08) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress i b,
  html body.view-mock #mock.active-view #mockProgressFill {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, var(--mock-web-blue), var(--mock-web-green)) !important;
    transition: width 260ms cubic-bezier(0.2, 0.85, 0.25, 1) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-start {
    min-height: 54px !important;
    border-radius: 27px !important;
    color: #0d3d88 !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(221, 238, 255, 0.5)),
      rgba(221, 238, 255, 0.38) !important;
    border-color: rgba(24, 112, 223, 0.18) !important;
    font-size: 15px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    display: grid !important;
    gap: 18px !important;
    margin-top: 18px !important;
    padding: 26px !important;
    background:
      radial-gradient(circle at 18% 8%, rgba(0, 183, 131, 0.08), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.54)),
      rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel h2 {
    margin: 0 !important;
    color: var(--mock-web-ink) !important;
    font-size: 24px !important;
    font-weight: 820 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mock #mock.active-view .score-ring {
    width: 132px !important;
    height: 132px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle closest-side, rgba(255, 255, 255, 0.76) 62%, transparent 63%),
      conic-gradient(var(--mock-web-teal) 0deg 116deg, rgba(255, 255, 255, 0.5) 116deg 360deg) !important;
    box-shadow:
      0 18px 34px -28px rgba(10, 146, 135, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    animation: mockWebRingBreath 3.2s ease-in-out infinite !important;
  }

  html body.view-mock #mock.active-view .score-ring strong {
    color: rgba(16, 23, 34, 0.82) !important;
    font-size: 26px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .score-ring span {
    color: rgba(44, 58, 77, 0.56) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign {
    display: grid !important;
    gap: 10px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.44)),
      rgba(255, 255, 255, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign > span {
    color: var(--mock-web-blue) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign strong {
    color: rgba(16, 23, 34, 0.86) !important;
    font-size: 17px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign p {
    margin: 0 !important;
    color: var(--mock-web-muted) !important;
    font-size: 13px !important;
    font-weight: 540 !important;
    line-height: 1.55 !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign b {
    min-height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.44) !important;
    color: rgba(44, 58, 77, 0.64) !important;
    font-size: 12px !important;
    line-height: 26px !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign b:nth-child(1) {
    color: var(--mock-web-blue) !important;
    background: rgba(221, 238, 255, 0.38) !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign b:nth-child(2) {
    color: var(--mock-web-green) !important;
    background: rgba(221, 247, 229, 0.4) !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign b:nth-child(3) {
    color: var(--mock-web-red) !important;
    background: rgba(255, 229, 229, 0.4) !important;
  }

  html body.view-mock #mock.active-view:not(.mock-exam-focus) .mock-session-area {
    display: none !important;
  }

  html body.view-mock #mock.active-view.mock-exam-focus .mock-session-area {
    display: block !important;
    margin-top: 26px !important;
  }

  html body.view-mock #mock.active-view .mock-session-area > .panel {
    border-radius: 32px !important;
    padding: 26px !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-paper-workbench,
    #mockCommandCenter.mock-command-center,
    .mock-report-panel,
    .mock-redesign-history
  ) {
    animation: mockWebGlassIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    animation-delay: 120ms !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    animation-delay: 55ms !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    animation-delay: 170ms !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    animation-delay: 215ms !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-page-actions .primary-btn,
    .mock-paper-toolbar .search-field,
    .mock-history-more,
    .pte-history-action
  ) {
    transition:
      transform 145ms cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 130ms ease,
      background 145ms ease,
      box-shadow 145ms ease,
      color 120ms ease !important;
    will-change: transform !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-page-actions .primary-btn,
    .mock-history-more,
    .pte-history-action
  ):hover,
  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field:focus-within {
    transform: translate3d(0, -2px, 0) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)),
      rgba(255, 255, 255, 0.58) !important;
    box-shadow:
      0 18px 34px -28px rgba(31, 42, 55, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-page-actions .primary-btn,
    .mock-history-more,
    .pte-history-action
  ):active {
    transform: translate3d(0, 0, 0) scale(0.99) !important;
    transition-duration: 70ms !important;
  }
}

@keyframes mockWebGlassIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mockWebRingBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 10px 20px rgba(10, 146, 135, 0.08));
  }
  50% {
    transform: scale(1.018);
    filter: drop-shadow(0 14px 26px rgba(10, 146, 135, 0.12));
  }
}

@media (max-width: 980px) {
  html body.view-mock {
    background:
      radial-gradient(320px 460px at 92% 0%, rgba(255, 250, 228, 0.34), transparent 72%),
      linear-gradient(180deg, #ffd21d 0px, #ffe783 180px, #fff8df 520px, #ffffff 980px) !important;
    background-attachment: fixed !important;
  }

  html body.view-mock .app-shell,
  html body.view-mock .main,
  html body.view-mock #mock.active-view {
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-mock #mock.active-view :is(
    .mock-paper-workbench,
    #mockCommandCenter.mock-command-center,
    .mock-report-panel,
    .mock-paper-list-inner,
    .mock-redesign-history,
    .mock-session-area > .panel
  ) {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.54)),
      rgba(255, 255, 255, 0.58) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 18px 38px -32px rgba(163, 107, 5, 0.2) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
    backdrop-filter: blur(22px) saturate(1.12) !important;
  }
}

/* Mock web v28: final specificity repair for rendered paper rows and status metrics. */
@media (min-width: 981px) {
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62)),
      rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 16px 32px -28px rgba(31, 42, 55, 0.22) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row.active,
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:hover,
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:focus-visible {
    border-color: rgba(255, 255, 255, 0.94) !important;
    background:
      radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.64), transparent 32%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.68)),
      var(--mock-row-tint, rgba(221, 238, 255, 0.38)) !important;
    box-shadow:
      0 22px 44px -32px rgba(31, 42, 55, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article span {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:nth-child(3) span {
    font-size: 22px !important;
  }
}

/* Mock web v30: keep paper-card tags grouped and aligned with the card copy. */
@media (min-width: 981px) {
  html body.view-mock #mock.active-view .pte-paper-row {
    grid-template-columns: minmax(0, 1fr) 28px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    row-gap: 14px !important;
    column-gap: 18px !important;
    min-height: 138px !important;
    padding: 24px 22px 22px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    max-width: 100% !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 28px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
    min-width: 118px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
  }
}

/* Mock web v29: use background longhands so older shorthand glass rules cannot leak through. */
@media (min-width: 981px) {
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
    background-image:
      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62)) !important;
    background-color: rgba(255, 255, 255, 0.62) !important;
    background-blend-mode: normal !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row.active,
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:hover,
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row:focus-visible {
    background-image:
      radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.64), transparent 32%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.68)) !important;
    background-color: var(--mock-row-tint, rgba(221, 238, 255, 0.38)) !important;
  }
}

/* Mock web v32: tighten the desktop workbench hierarchy and make the primary task clear. */
@media (min-width: 981px) {
  html body.view-mock #mock.active-view {
    width: min(1160px, calc(100vw - 128px)) !important;
    max-width: 1160px !important;
    padding-top: 24px !important;
    padding-bottom: 72px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    grid-template-columns: minmax(0, 720px) 370px !important;
    gap: 30px !important;
    align-items: start !important;
    margin-top: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-right-column {
    display: grid !important;
    gap: 16px !important;
    position: sticky !important;
    top: 112px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 28px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(255, 223, 108, 0.08),
      0 18px 40px -34px rgba(163, 107, 5, 0.2) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    gap: 10px !important;
    min-height: 0 !important;
    padding: 18px 20px 16px !important;
    border-radius: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head {
    min-height: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head small {
    padding: 5px 11px !important;
    border-radius: 999px !important;
    background: rgba(213, 249, 244, 0.42) !important;
    color: var(--mock-web-teal) !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-list {
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    display: flex !important;
    min-height: 52px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty strong {
    flex: 0 0 auto !important;
    font-size: 15px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 24px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    grid-template-columns: minmax(0, 1fr) 26px !important;
    grid-template-rows: auto auto !important;
    row-gap: 10px !important;
    column-gap: 14px !important;
    min-height: 106px !important;
    padding: 18px 18px 16px !important;
    border-radius: 20px !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row::before {
    left: 18px !important;
    width: 78px !important;
    height: 3px !important;
    opacity: 0.82 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    gap: 7px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    font-size: 17px !important;
    font-weight: 780 !important;
    line-height: 1.25 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span,
  html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    font-weight: 760 !important;
    line-height: 24px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta .pte-paper-count {
    color: #7b560f !important;
    background: rgba(255, 248, 218, 0.52) !important;
    border-color: rgba(246, 197, 66, 0.3) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta .pte-paper-level {
    color: var(--mock-web-blue) !important;
    background: rgba(221, 238, 255, 0.4) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.is-finished .pte-paper-status {
    color: var(--mock-web-teal) !important;
    background: rgba(213, 249, 244, 0.44) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.is-unfinished .pte-paper-status {
    color: #8a640f !important;
    background: rgba(255, 246, 204, 0.48) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.45) !important;
    color: var(--mock-row-accent) !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover,
  html body.view-mock #mock.active-view .pte-paper-row:focus-visible {
    transform: translate3d(0, -2px, 0) scale(1.002) !important;
    box-shadow:
      0 20px 38px -32px rgba(31, 42, 55, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center,
  html body.view-mock #mock.active-view .mock-report-panel {
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    padding: 22px !important;
    background:
      radial-gradient(circle at 92% 0%, rgba(24, 112, 223, 0.08), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.56)),
      rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    gap: 18px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy {
    gap: 9px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy span,
  html body.view-mock #mock.active-view .mock-report-panel .eyebrow {
    font-size: 12px !important;
    font-weight: 780 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    font-size: 24px !important;
    font-weight: 820 !important;
    line-height: 1.18 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy p {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    min-height: 62px !important;
    padding: 11px 10px !important;
    border-radius: 16px !important;
    align-content: center !important;
    gap: 5px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article span {
    font-size: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics .mock-metric-status span,
  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:nth-child(3) span {
    color: #8a640f !important;
    font-size: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics .mock-metric-status.is-complete span {
    color: var(--mock-web-teal) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress {
    gap: 9px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress i {
    height: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    gap: 14px !important;
    margin-top: 0 !important;
    padding: 22px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel h2 {
    font-size: 21px !important;
    line-height: 1.18 !important;
  }

  html body.view-mock #mock.active-view .score-ring {
    width: 108px !important;
    height: 108px !important;
  }

  html body.view-mock #mock.active-view .score-ring strong {
    font-size: 23px !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign {
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-report-empty-redesign strong {
    font-size: 16px !important;
  }
}

/* Mock selected visual: shared structure and refractive yellow glass material. */
html body.view-mock #mock.active-view .mock-page-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: auto !important;
  min-height: 96px !important;
  margin: 0 0 18px !important;
  padding: 0 8px !important;
  overflow: visible !important;
}

html body.view-mock #mock.active-view .mock-page-head h2 {
  margin: 0 !important;
  color: #101722 !important;
  font-size: clamp(32px, 3vw, 44px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}

html body.view-mock #mock.active-view .mock-page-head p {
  display: block !important;
  margin: 12px 0 0 !important;
  color: rgba(25, 37, 52, 0.72) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

html body.view-mock #mock.active-view .mock-page-actions {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-main-column,
html body.view-mock #mock.active-view .mock-right-column {
  min-width: 0 !important;
}

html body.view-mock #mock.active-view :is(
  #mockCommandCenter.mock-command-center,
  .mock-paper-workbench,
  .mock-report-panel,
  .mock-paper-detail.is-open
) {
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.3)),
    radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.42), transparent 34%) !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(226, 167, 0, 0.08),
    0 22px 52px -42px rgba(127, 85, 0, 0.34) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
  backdrop-filter: blur(22px) saturate(1.16) !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-card {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-command-summary,
html body.view-mock #mock.active-view .mock-command-skills,
html body.view-mock #mock.active-view .mock-command-actions {
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-recommend-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 13px !important;
  color: #d77a00 !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 211, 43, 0.28)),
    rgba(255, 224, 92, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(207, 135, 0, 0.08) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

html body.view-mock #mock.active-view .mock-recommend-badge img {
  width: 18px !important;
  height: 18px !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-copy {
  display: grid !important;
  gap: 10px !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-copy > strong {
  color: #101722 !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  font-weight: 850 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.025em !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-copy > p {
  max-width: 62ch !important;
  margin: 0 !important;
  color: rgba(32, 45, 61, 0.68) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1.55 !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 20px !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 4px 18px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics article:first-child {
  padding-left: 0 !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics article:last-child {
  border-right: 0 !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics article > img {
  width: 42px !important;
  height: 42px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 20px -18px rgba(77, 61, 0, 0.34) !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics article > span {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  color: #1265cf !important;
  font-size: 28px !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics .mock-metric-duration > span {
  color: #087d60 !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics .mock-metric-status > span {
  color: #e86d00 !important;
  font-size: 20px !important;
}

html body.view-mock #mock.active-view .mock-desktop-command-metrics small {
  color: rgba(37, 49, 64, 0.72) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

html body.view-mock #mock.active-view .mock-command-skills {
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
}

html body.view-mock #mock.active-view .mock-command-skills > strong {
  color: #101722 !important;
  font-size: 16px !important;
  font-weight: 820 !important;
}

html body.view-mock #mock.active-view .mock-command-skills > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(54px, 1fr)) !important;
  gap: 12px !important;
}

html body.view-mock #mock.active-view .mock-command-skill {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-command-skill > span {
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 6px rgba(82, 57, 0, 0.04),
    0 12px 24px -20px rgba(70, 51, 0, 0.32) !important;
}

html body.view-mock #mock.active-view .mock-command-skill > span img {
  width: 32px !important;
  height: 32px !important;
}

html body.view-mock #mock.active-view .mock-command-skill > small {
  color: rgba(27, 39, 54, 0.78) !important;
  font-size: 13px !important;
  font-weight: 690 !important;
}

html body.view-mock #mock.active-view .mock-command-actions {
  display: grid !important;
  align-content: center !important;
  gap: 14px !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button) {
  --mock-glass-x: 50%;
  --mock-glass-y: 14%;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 21px !important;
  color: #101722 !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.24) !important;
  backdrop-filter: blur(15px) saturate(1.24) !important;
  font-size: 16px !important;
  font-weight: 820 !important;
  transform: translateZ(0) !important;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms ease,
    color 160ms ease !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button)::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle 132px at var(--mock-glass-x) var(--mock-glass-y), rgba(255, 255, 255, 0.72), rgba(255, 246, 192, 0.14) 42%, transparent 66%),
    linear-gradient(180deg, rgba(126, 78, 0, 0.05), transparent 38%, rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    inset 0 2px 4px -3px rgba(111, 68, 0, 0.28),
    inset 0 -2px 3px -2px rgba(255, 255, 255, 0.94) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body.view-mock #mock.active-view .mock-desktop-start {
  background-image:
    radial-gradient(ellipse 80% 150% at 14% -18%, rgba(255, 255, 255, 0.94), transparent 58%),
    linear-gradient(158deg, rgba(255, 255, 255, 0.6), rgba(255, 244, 176, 0.48) 36%, rgba(255, 216, 42, 0.5) 66%, rgba(229, 154, 0, 0.24)) !important;
  background-color: rgba(255, 211, 29, 0.38) !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 3px rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.64),
    0 9px 18px -16px rgba(119, 76, 0, 0.3) !important;
}

html body.view-mock #mock.active-view .mock-details-button {
  background-image:
    radial-gradient(ellipse 82% 150% at 14% -18%, rgba(255, 255, 255, 0.88), transparent 56%),
    linear-gradient(154deg, rgba(255, 255, 255, 0.5), rgba(255, 251, 230, 0.28) 52%, rgba(244, 208, 87, 0.12)) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.075),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 3px rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 9px 18px -16px rgba(91, 66, 0, 0.24) !important;
}

html body.view-mock #mock.active-view .mock-details-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(108deg, transparent 0 36%, rgba(104, 184, 255, 0.1) 43%, rgba(255, 255, 255, 0.86) 49%, rgba(255, 212, 68, 0.26) 54%, transparent 64%) !important;
  opacity: 0.42 !important;
  transform: translateX(-58%) !important;
  transition: opacity 180ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

html body.view-mock #mock.active-view .mock-details-button:hover::after,
html body.view-mock #mock.active-view .mock-details-button:focus-visible::after {
  opacity: 0.82 !important;
  transform: translateX(58%) !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button) > :is(img, span) {
  position: relative !important;
  z-index: 1 !important;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button) > span {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button) > img {
  width: 21px !important;
  height: 21px !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):hover:not(:disabled) {
    transform: translateY(-1px) scale(1.002) !important;
    border-color: #ffffff !important;
    box-shadow:
      inset 0 2px 6px rgba(145, 92, 0, 0.055),
      inset 0 -1px 0 rgba(255, 255, 255, 0.94),
      inset 0 0 0 3px rgba(255, 255, 255, 0.14),
      0 1px 0 rgba(255, 255, 255, 0.72),
      0 13px 24px -18px rgba(132, 82, 0, 0.36) !important;
  }

  html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):hover:not(:disabled)::before {
    opacity: 1 !important;
  }

  html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):hover:not(:disabled) > img {
    transform: translateY(-1px) scale(1.06) !important;
  }
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):focus-visible {
  outline: none !important;
  border-color: #ffffff !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.09),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(255, 255, 255, 0.78),
    0 0 0 6px rgba(204, 139, 0, 0.18) !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):active:not(:disabled) {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow:
    inset 0 5px 11px rgba(130, 78, 0, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.68),
    inset 0 0 0 3px rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.38) !important;
  transition-duration: 80ms !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):active:not(:disabled)::before {
  opacity: 0.72 !important;
  transform: translateY(1px) scale(0.992) !important;
}

html body.view-mock #mock.active-view :is(.mock-desktop-start, .mock-details-button):disabled {
  cursor: not-allowed !important;
  opacity: 0.56 !important;
  filter: saturate(0.55) !important;
  transform: none !important;
  box-shadow:
    inset 0 3px 8px rgba(94, 72, 28, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.58) !important;
}

html body.view-mock #mock.active-view .mock-command-progress-accessible {
  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;
}

html body.view-mock #mock.active-view .mock-paper-toolbar h3 {
  margin: 0 !important;
  color: #101722 !important;
  font-size: 23px !important;
  font-weight: 840 !important;
  line-height: 1.15 !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field > img,
html body.view-mock #mock.active-view .mock-filter-toggle > img {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms ease !important;
}

html body.view-mock #mock.active-view .mock-paper-toolbar .search-field:focus-within {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.98) !important;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.84), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 249, 221, 0.24)) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.055),
    inset 0 -1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 3px rgba(255, 255, 255, 0.44),
    0 10px 18px -16px rgba(119, 76, 0, 0.22) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms ease !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: 15px !important;
  box-shadow:
    inset 0 2px 4px -3px rgba(111, 68, 0, 0.24),
    inset 0 -2px 3px -2px rgba(255, 255, 255, 0.9) !important;
  opacity: 0.88 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle > img {
  position: relative !important;
  z-index: 1 !important;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.view-mock #mock.active-view .mock-filter-toggle:hover {
    transform: translateY(-1px) !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle:hover > img {
    transform: translateY(-1px) rotate(-6deg) scale(1.04) !important;
  }
}

html body.view-mock #mock.active-view.mock-filters-open .mock-filter-toggle {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow:
    inset 0 5px 10px rgba(130, 78, 0, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

html body.view-mock #mock.active-view.mock-filters-open .mock-filter-toggle > img {
  transform: rotate(90deg) scale(0.94) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(255, 255, 255, 0.78),
    0 0 0 6px rgba(204, 139, 0, 0.18) !important;
}

html body.view-mock #mock.active-view .mock-filter-toggle:active {
  transform: translateY(1px) scale(0.97) !important;
  transition-duration: 80ms !important;
}

html body.view-mock #mock.active-view .mock-mobile-filter-panel {
  transform-origin: top right !important;
  transition:
    max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease !important;
}

html body.view-mock #mock.active-view .mock-paper-filters {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 14px !important;
  color: rgba(24, 36, 51, 0.72) !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2)),
    rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 3px rgba(135, 86, 0, 0.04) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  transform: translateZ(0) !important;
  transition:
    transform 190ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 170ms ease,
    box-shadow 190ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 170ms ease,
    color 150ms ease !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button.active {
  border-color: rgba(255, 255, 255, 0.94) !important;
  color: #e37800 !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 220, 75, 0.34)),
    rgba(255, 214, 38, 0.18) !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.58) !important;
  transform: translateY(1px) scale(0.988) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.view-mock #mock.active-view .mock-paper-filters button:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.96) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 3px rgba(135, 86, 0, 0.04),
      0 8px 16px -14px rgba(104, 68, 0, 0.28) !important;
  }
}

html body.view-mock #mock.active-view .mock-paper-filters button:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 2px 5px rgba(145, 92, 0, 0.08),
    0 0 0 3px rgba(255, 255, 255, 0.78),
    0 0 0 6px rgba(204, 139, 0, 0.18) !important;
}

html body.view-mock #mock.active-view .mock-paper-filters button:active {
  transform: translateY(1px) scale(0.965) !important;
  box-shadow:
    inset 0 5px 10px rgba(130, 78, 0, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.68) !important;
  transition-duration: 80ms !important;
}

html body.view-mock #mock.active-view .mock-paper-detail {
  display: grid !important;
  grid-template-rows: 0fr !important;
  width: 100% !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 solid transparent !important;
  border-radius: 22px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) scale(0.99) !important;
  transform-origin: top center !important;
  transition:
    grid-template-rows 340ms cubic-bezier(0.16, 1, 0.3, 1),
    max-height 340ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease,
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
    border-width 180ms ease,
    visibility 0s linear 340ms !important;
}

html body.view-mock #mock.active-view .mock-paper-detail.is-open {
  grid-template-rows: 1fr !important;
  max-height: 560px !important;
  padding: 18px !important;
  border-width: 1px !important;
  border-radius: 22px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  transition-delay: 0s !important;
  outline: none !important;
}

html body.view-mock #mock.active-view .mock-paper-detail > .mock-paper-intro {
  min-height: 0 !important;
  overflow: hidden !important;
}

html body.view-mock #mock.active-view .mock-paper-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px 22px !important;
  align-items: end !important;
}

html body.view-mock #mock.active-view .mock-paper-intro > div:first-child {
  display: grid !important;
  gap: 6px !important;
}

html body.view-mock #mock.active-view .mock-paper-intro > div:first-child > span {
  color: #d77800 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body.view-mock #mock.active-view .mock-paper-intro strong {
  color: #101722 !important;
  font-size: 18px !important;
  font-weight: 820 !important;
}

html body.view-mock #mock.active-view .mock-paper-intro p {
  margin: 0 !important;
  color: rgba(32, 45, 61, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body.view-mock #mock.active-view .mock-paper-intro dl {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

html body.view-mock #mock.active-view .mock-paper-intro dl > div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.82) !important;
}

html body.view-mock #mock.active-view .mock-paper-intro dt,
html body.view-mock #mock.active-view .mock-paper-intro dd {
  margin: 0 !important;
  font-size: 12px !important;
}

html body.view-mock #mock.active-view .mock-paper-intro [data-mock-details-close] {
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  border-radius: 14px !important;
  color: rgba(24, 36, 51, 0.78) !important;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.48), rgba(255, 251, 229, 0.22)),
    rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 3px 7px rgba(145, 92, 0, 0.075),
    inset 0 -1px 0 rgba(255, 255, 255, 0.88),
    0 1px 0 rgba(255, 255, 255, 0.58) !important;
  font-weight: 740 !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.view-mock #mock.active-view .mock-paper-intro [data-mock-details-close]:hover {
    transform: translateY(-1px) !important;
    border-color: #ffffff !important;
    box-shadow:
      inset 0 2px 6px rgba(145, 92, 0, 0.045),
      inset 0 -1px 0 rgba(255, 255, 255, 0.94),
      0 8px 16px -14px rgba(104, 68, 0, 0.28) !important;
  }
}

html body.view-mock #mock.active-view .mock-paper-intro [data-mock-details-close]:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 2px 5px rgba(145, 92, 0, 0.08),
    0 0 0 3px rgba(255, 255, 255, 0.78),
    0 0 0 6px rgba(204, 139, 0, 0.18) !important;
}

html body.view-mock #mock.active-view .mock-paper-intro [data-mock-details-close]:active {
  transform: translateY(1px) scale(0.975) !important;
  box-shadow:
    inset 0 5px 10px rgba(130, 78, 0, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.68) !important;
  transition-duration: 80ms !important;
}

html body.view-mock #mock.active-view .mock-paper-task-summary {
  grid-column: 1 / -1 !important;
}

html body.view-mock #mock.active-view .pte-paper-mark {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 22px -19px rgba(101, 71, 0, 0.34) !important;
}

html body.view-mock #mock.active-view .pte-paper-mark img {
  width: 22px !important;
  height: 22px !important;
  opacity: 0.56 !important;
}

html body.view-mock #mock.active-view .pte-paper-row.is-featured .pte-paper-mark img {
  opacity: 1 !important;
}

html body.view-mock #mock.active-view .pte-paper-meta img {
  width: 16px !important;
  height: 16px !important;
}

html body.view-mock #mock.active-view .mock-report-panel > .eyebrow {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-report-panel.is-empty .score-ring {
  display: none !important;
}

html body.view-mock #mock.active-view .mock-report-panel.is-empty .feedback-list {
  display: grid !important;
  place-items: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  min-height: 250px !important;
  padding: 20px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign > img {
  width: 180px !important;
  height: 160px !important;
  object-fit: contain !important;
  opacity: 0.92 !important;
}

html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign > p {
  max-width: 24ch !important;
  margin: 0 !important;
  color: rgba(32, 45, 61, 0.72) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  html body.view-mock {
    background:
      radial-gradient(360px 420px at 2% 4%, rgba(255, 214, 38, 0.42), transparent 72%),
      linear-gradient(155deg, #ffd21d 0%, #ffe36a 26%, #fff2ae 52%, #fffbee 76%, #ffffff 100%) !important;
    background-attachment: fixed !important;
  }

  html body.view-mock .app-shell .main {
    width: 100% !important;
    max-width: none !important;
  }

  html body.view-mock #mock.active-view {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 6px 140px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    min-height: 78px !important;
    margin-bottom: 14px !important;
    padding: 0 6px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head h2 {
    font-size: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-page-head p {
    margin-top: 8px !important;
    font-size: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "command" "papers" "report" !important;
    gap: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    display: contents !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    grid-area: command !important;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    border-radius: 28px !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    grid-area: papers !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    grid-area: report !important;
    min-height: 320px !important;
    margin: 0 !important;
    border-radius: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills {
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy > strong {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy > p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html body.view-mock #mock.active-view .mock-recommend-badge {
    min-height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:first-child {
    padding-left: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:last-child {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article > img {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article > span {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    font-size: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article small {
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics .mock-metric-status > span {
    font-size: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mock #mock.active-view .mock-command-actions :is(.mock-desktop-start, .mock-details-button) {
    min-height: 54px !important;
    padding: 0 12px !important;
    border-radius: 19px !important;
    font-size: 14px !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills > div {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill > span {
    width: 46px !important;
    height: 46px !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill > span img {
    width: 28px !important;
    height: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    grid-template-areas: "title filter" "search search" "states states" !important;
    grid-template-rows: auto 52px auto !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar h3 {
    grid-area: title !important;
    align-self: center !important;
    font-size: 21px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-area: search !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-paper-filters {
    grid-area: states !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-paper-filters button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 14px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-filter-toggle {
    grid-area: filter !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    order: 2 !important;
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    max-height: 0 !important;
    padding: 0 12px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    max-height: 120px !important;
    margin: 0 !important;
    padding: 12px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row {
    grid-template-columns: 44px minmax(0, 1fr) 24px !important;
    grid-template-rows: auto auto !important;
  }

  html body.view-mock #mock.active-view .pte-paper-mark {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy,
  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 2 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row > i {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-intro {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-mock .app-shell {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  html body.view-mock .app-shell .main {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body.view-mock #mock.active-view {
    width: 100% !important;
    max-width: none !important;
    padding-top: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "command" "papers" "report" !important;
    gap: 18px !important;
  }

  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    display: contents !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    grid-area: command !important;
    padding: 22px !important;
    border-radius: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    grid-area: papers !important;
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    grid-area: report !important;
    min-height: 350px !important;
    margin: 0 !important;
    border-radius: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr) !important;
    gap: 24px !important;
  }

  html body.view-mock #mock.active-view .mock-command-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(240px, 1fr) auto 52px !important;
    grid-template-rows: 52px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-paper-filters {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-paper-filters button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 15px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-filter-toggle {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    position: absolute !important;
    top: 82px !important;
    right: 22px !important;
    z-index: 12 !important;
    display: grid !important;
    width: 300px !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.98) !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    max-height: 120px !important;
    padding: 14px !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 18px 36px -26px rgba(104, 70, 0, 0.42) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
    backdrop-filter: blur(20px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner {
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row {
    grid-template-columns: 46px minmax(0, 1fr) auto 24px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    min-height: 100px !important;
    padding: 16px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill > span {
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.76), transparent 36%),
      rgba(255, 255, 255, 0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -2px 6px rgba(82, 57, 0, 0.04),
      0 12px 24px -20px rgba(70, 51, 0, 0.32) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-mark {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: auto !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row > i {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }
}

/* Mock web v35: visible hierarchy pass after design review feedback. */
@media (min-width: 1181px) {
  html body.view-mock .app-shell {
    padding-right: 20px !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
  }

  html body.view-mock .app-shell .main {
    width: min(1440px, calc(100vw - 40px)) !important;
    max-width: 1440px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  html body.view-mock #mock.active-view {
    --mock-desk-root-top: 6px;
    --mock-desk-root-bottom: 45px;
    --mock-desk-head-height: 82px;
    --mock-desk-head-gap: 14px;
    --mock-desk-report-width: 340px;
    --mock-desk-section-gap: 20px;
    --mock-desk-command-height: 254px;
    --mock-desk-lower-height: 372px;
    --mock-desk-panel-pad-y: 18px;
    --mock-desk-panel-pad-x: 18px;
    --mock-desk-panel-pad-bottom: 12px;
    --mock-desk-toolbar-height: 46px;
    --mock-desk-filter-height: 34px;
    --mock-desk-row-height: 86px;
    --mock-desk-row-pad-y: 12px;
    --mock-desk-command-pad-y: 22px;
    --mock-desk-command-pad-x: 24px;
    --mock-desk-command-title: 27px;
    --mock-desk-metric-height: 58px;
    --mock-desk-metrics-gap: 20px;
    --mock-desk-actions-pad: 12px;
    --mock-desk-primary-height: 62px;
    --mock-desk-report-empty-height: 260px;
    --mock-desk-report-art-width: 155px;
    --mock-desk-report-art-height: 138px;
    width: 100% !important;
    max-width: 1440px !important;
    padding: var(--mock-desk-root-top) 0 var(--mock-desk-root-bottom) !important;
  }

  html body.view-mock #mock.active-view .mock-page-head {
    min-height: var(--mock-desk-head-height) !important;
    margin-bottom: var(--mock-desk-head-gap) !important;
  }

  html body.view-mock #mock.active-view .mock-center-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--mock-desk-report-width) !important;
    grid-template-areas:
      "command command"
      "papers report" !important;
    gap: var(--mock-desk-section-gap) !important;
    align-items: stretch !important;
  }

  html body.view-mock #mock.active-view .mock-main-column,
  html body.view-mock #mock.active-view .mock-right-column {
    display: contents !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    grid-area: command !important;
    min-height: var(--mock-desk-command-height) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    grid-area: papers !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    grid-area: report !important;
    align-self: stretch !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench {
    gap: 14px !important;
    min-height: var(--mock-desk-lower-height) !important;
    padding:
      var(--mock-desk-panel-pad-y)
      var(--mock-desk-panel-pad-x)
      var(--mock-desk-panel-pad-bottom) !important;
    border-radius: 30px !important;
    background-image:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.26)),
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.46), transparent 38%) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar {
    display: grid !important;
    grid-template-columns: auto minmax(280px, 1fr) auto 52px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: var(--mock-desk-toolbar-height) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar {
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: auto minmax(280px, 1fr) auto 52px !important;
    grid-template-rows: var(--mock-desk-toolbar-height) !important;
    width: 100% !important;
    height: var(--mock-desk-toolbar-height) !important;
    margin: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    order: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .search-field {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;
    width: 100% !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-paper-filters {
    grid-column: 3 !important;
    grid-row: 1 !important;
    order: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-paper-filters button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--mock-desk-filter-height) !important;
    min-height: var(--mock-desk-filter-height) !important;
    padding: 0 15px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-toolbar .mock-filter-toggle {
    grid-column: 4 !important;
    grid-row: 1 !important;
    order: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-paper-toolbar .search-field {
    height: var(--mock-desk-toolbar-height) !important;
    min-height: var(--mock-desk-toolbar-height) !important;
    padding: 0 18px !important;
    border-radius: 22px !important;
    background-image:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.76), transparent 32%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.22)) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -2px 5px rgba(144, 92, 0, 0.04) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-panel {
    position: absolute !important;
    top: 82px !important;
    right: 22px !important;
    z-index: 12 !important;
    display: grid !important;
    width: 310px !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(0.98) !important;
  }

  html body.view-mock #mock.active-view.mock-filters-open .mock-mobile-filter-panel {
    max-height: 120px !important;
    padding: 14px !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3)),
      rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 18px 36px -26px rgba(104, 70, 0, 0.42) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
    backdrop-filter: blur(20px) saturate(1.16) !important;
  }

  html body.view-mock #mock.active-view .mock-mobile-filter-group {
    display: grid !important;
    gap: 9px !important;
  }

  html body.view-mock #mock.active-view .mock-paper-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 4px !important;
    border-radius: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-filter-toggle {
    width: var(--mock-desk-toolbar-height) !important;
    min-width: var(--mock-desk-toolbar-height) !important;
    height: var(--mock-desk-toolbar-height) !important;
    min-height: var(--mock-desk-toolbar-height) !important;
    border-radius: 20px !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    background:
      radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.78), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)),
      rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      inset 0 3px 7px rgba(145, 92, 0, 0.08),
      inset 0 -1px 0 rgba(255, 255, 255, 0.9),
      inset 0 0 0 3px rgba(255, 255, 255, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.62),
      0 9px 18px -16px rgba(119, 76, 0, 0.24) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history {
    padding: 14px 18px !important;
    border-radius: 20px !important;
    background-image:
      linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.28)),
      none !important;
    background-color: rgba(255, 255, 255, 0.34) !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head span {
    font-size: 15px !important;
  }

  html body.view-mock #mock.active-view .mock-redesign-history-head small {
    background: rgba(255, 255, 255, 0.42) !important;
    color: rgba(10, 125, 108, 0.86) !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty {
    min-height: 40px !important;
  }

  html body.view-mock #mock.active-view .pte-history-empty span {
    color: rgba(44, 58, 77, 0.54) !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-list-inner,
  html body.view-mock #mock.active-view .mock-paper-list-inner {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body.view-mock #mock.active-view .mock-paper-workbench .mock-paper-list-inner .pte-paper-row,
  html body.view-mock #mock.active-view .mock-paper-list-inner .pte-paper-row,
  html body.view-mock #mock.active-view .pte-paper-row {
    grid-template-columns: 46px minmax(0, 1fr) auto 24px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    min-height: var(--mock-desk-row-height) !important;
    padding: var(--mock-desk-row-pad-y) 8px !important;
    border: 1px solid transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.82) !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateX(0) !important;
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row::before {
    content: none !important;
    display: none !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy strong {
    font-size: 16px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy span {
    color: rgba(44, 58, 77, 0.58) !important;
    font-size: 12.5px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta span,
  html body.view-mock #mock.active-view .pte-paper-meta span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 24px !important;
  }

  html body.view-mock #mock.active-view .pte-paper-mark {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  html body.view-mock #mock.active-view .pte-paper-meta {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    width: auto !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row > i {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row.active,
  html body.view-mock #mock.active-view .pte-paper-row:hover,
  html body.view-mock #mock.active-view .pte-paper-row:focus-visible {
    transform: translateX(3px) !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 218, 67, 0.14)) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
      inset 0 2px 6px rgba(145, 92, 0, 0.045),
      inset 0 -1px 0 rgba(255, 255, 255, 0.94),
      0 8px 18px -16px rgba(118, 78, 0, 0.24) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:focus-visible {
    outline: none !important;
    box-shadow:
      inset 0 2px 6px rgba(145, 92, 0, 0.05),
      inset 0 0 0 2px rgba(204, 139, 0, 0.2),
      0 0 0 3px rgba(255, 255, 255, 0.72) !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row:active {
    transform: translateX(1px) scale(0.992) !important;
    box-shadow:
      inset 0 5px 10px rgba(130, 78, 0, 0.12),
      inset 0 -1px 0 rgba(255, 255, 255, 0.68) !important;
    transition-duration: 80ms !important;
  }

  html body.view-mock #mock.active-view .pte-paper-row i {
    width: 24px !important;
    height: 24px !important;
    color: rgba(24, 112, 223, 0.78) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    font-size: 20px !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center,
  html body.view-mock #mock.active-view .mock-report-panel {
    border-radius: 30px !important;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.62), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.28)) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
  }

  html body.view-mock #mock.active-view #mockCommandCenter.mock-command-center {
    padding:
      var(--mock-desk-command-pad-y)
      var(--mock-desk-command-pad-x) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.65fr) 340px !important;
    align-items: stretch !important;
    gap: 30px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy strong {
    font-size: var(--mock-desk-command-title) !important;
    line-height: 1.14 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-copy p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card .mock-desktop-command-metrics article,
  html body.view-mock #mock.active-view .mock-desktop-command-metrics article {
    min-height: var(--mock-desk-metric-height) !important;
    padding: 4px 18px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card .mock-desktop-command-metrics article:last-child,
  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:last-child {
    border-right: 0 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article span {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics {
    margin-top: var(--mock-desk-metrics-gap) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics article small {
    line-height: 1 !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-metrics .mock-metric-status span,
  html body.view-mock #mock.active-view .mock-desktop-command-metrics article:nth-child(3) span {
    color: #e86d00 !important;
    font-size: 20px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress span {
    font-size: 12px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-progress strong {
    font-size: 16px !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card .mock-command-skills .mock-command-skill,
  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-command-skills .mock-command-skill > span {
    background:
      radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.76), transparent 36%),
      rgba(255, 255, 255, 0.24) !important;
  }

  html body.view-mock #mock.active-view .mock-command-actions {
    padding-top: var(--mock-desk-actions-pad) !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card button.primary-btn.compact.mock-desktop-start,
  html body.view-mock #mock.active-view button.primary-btn.compact.mock-desktop-start {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: var(--mock-desk-primary-height) !important;
    font-size: 22px !important;
    font-weight: 840 !important;
    letter-spacing: 0.01em !important;
  }

  html body.view-mock #mock.active-view .mock-desktop-command-card button.primary-btn.compact.mock-desktop-start > img,
  html body.view-mock #mock.active-view button.primary-btn.compact.mock-desktop-start > img {
    width: 28px !important;
    height: 28px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: var(--mock-desk-lower-height) !important;
    padding:
      var(--mock-desk-panel-pad-y)
      var(--mock-desk-panel-pad-x) !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel h2 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 820 !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty {
    min-height: var(--mock-desk-lower-height) !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .score-ring {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign {
    gap: 18px !important;
    min-height: var(--mock-desk-report-empty-height) !important;
    padding: 18px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign > span {
    display: none !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign strong {
    font-size: 15px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign p {
    width: 100% !important;
    max-width: none !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign > img {
    width: var(--mock-desk-report-art-width) !important;
    height: var(--mock-desk-report-art-height) !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign div {
    gap: 7px !important;
  }

  html body.view-mock #mock.active-view .mock-report-panel.is-empty .mock-report-empty-redesign b {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    line-height: 24px !important;
  }
}

@media (min-width: 1321px) {
  html body.view-mock #mock.active-view {
    --mock-desk-root-top: 16px;
    --mock-desk-root-bottom: 49px;
    --mock-desk-head-height: 90px;
    --mock-desk-head-gap: 16px;
    --mock-desk-report-width: 360px;
    --mock-desk-section-gap: 23px;
    --mock-desk-command-height: 273px;
    --mock-desk-lower-height: 396px;
    --mock-desk-panel-pad-y: 20px;
    --mock-desk-panel-pad-x: 21px;
    --mock-desk-panel-pad-bottom: 13px;
    --mock-desk-toolbar-height: 49px;
    --mock-desk-filter-height: 36px;
    --mock-desk-row-height: 93px;
    --mock-desk-row-pad-y: 14px;
    --mock-desk-command-pad-y: 24px;
    --mock-desk-command-pad-x: 26px;
    --mock-desk-command-title: 31px;
    --mock-desk-metric-height: 63px;
    --mock-desk-metrics-gap: 31px;
    --mock-desk-actions-pad: 14px;
    --mock-desk-primary-height: 67px;
    --mock-desk-report-empty-height: 280px;
    --mock-desk-report-art-width: 168px;
    --mock-desk-report-art-height: 149px;
  }
}

@media (min-width: 1400px) {
  html body.view-mock #mock.active-view {
    --mock-desk-root-top: 26px;
    --mock-desk-root-bottom: 53px;
    --mock-desk-head-height: 96px;
    --mock-desk-head-gap: 18px;
    --mock-desk-report-width: 380px;
    --mock-desk-section-gap: 26px;
    --mock-desk-command-height: 292px;
    --mock-desk-lower-height: 420px;
    --mock-desk-panel-pad-y: 22px;
    --mock-desk-panel-pad-x: 24px;
    --mock-desk-panel-pad-bottom: 14px;
    --mock-desk-toolbar-height: 52px;
    --mock-desk-filter-height: 38px;
    --mock-desk-row-height: 100px;
    --mock-desk-row-pad-y: 16px;
    --mock-desk-command-pad-y: 26px;
    --mock-desk-command-pad-x: 28px;
    --mock-desk-command-title: 34px;
    --mock-desk-metric-height: 68px;
    --mock-desk-metrics-gap: 42px;
    --mock-desk-actions-pad: 16px;
    --mock-desk-primary-height: 72px;
    --mock-desk-report-empty-height: 300px;
    --mock-desk-report-art-width: 180px;
    --mock-desk-report-art-height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.view-mock #mock.active-view,
  html body.view-mock #mock.active-view *,
  html body.view-mock #mock.active-view *::before,
  html body.view-mock #mock.active-view *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}