/*
 * Mobile visual-system pilot: 行旅札记
 * URL opt-in only: ?mobileDesign=journal
 * Deliberately isolated from production until the pilot is accepted.
 */
@media (max-width: 768px) {
  html.mobile-design-journal {
    --mj-paper: #f3f0e7;
    --mj-paper-raised: #fbfaf5;
    --mj-ink: #183c3a;
    --mj-ink-2: #315653;
    --mj-muted: #6b7772;
    --mj-rule: #cbc6b8;
    --mj-rule-dark: #9ea89f;
    --mj-cinnabar: #b84b38;
    --mj-brass: #aa7d35;
    --mj-safe-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    color-scheme: light;
    background: var(--mj-paper);
  }

  html.mobile-design-journal body {
    color: var(--mj-ink);
    background-color: var(--mj-paper) !important;
    background-image:
      radial-gradient(circle at 12% 4%, rgba(170, 125, 53, .06), transparent 28%),
      repeating-linear-gradient(0deg, rgba(24, 60, 58, .018) 0 1px, transparent 1px 6px) !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  }

  html.mobile-design-journal :is(h1, h2, h3, .mhome-brand, .vision-hero h1, .quiz-editorial-hero h1, .view-head h2) {
    font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
    letter-spacing: .02em;
  }

  html.mobile-design-journal :focus-visible {
    outline: 2px solid var(--mj-cinnabar) !important;
    outline-offset: 3px;
  }

  html.mobile-design-journal :is(button, a, [role="button"]) {
    -webkit-tap-highlight-color: rgba(184, 75, 56, .14);
  }

  /* Shared surfaces: remove the generic floating-card language. */
  html.mobile-design-journal :is(.mhome, .learn-home, .quiz-page, .me-page, .me-overview) {
    color: var(--mj-ink);
    background: transparent !important;
  }

  html.mobile-design-journal :is(.mhome, .learn-home-vision, .quiz-page, .me-page, .me-overview) {
    padding-bottom: calc(var(--mj-safe-bottom) + 22px) !important;
  }

  html.mobile-design-journal :is(.mhome, .learn-home-vision, .quiz-page, .profile-page) {
    box-sizing: border-box;
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
  }

  /* Bottom navigation */
  html.mobile-design-journal #jxTabbar {
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 3px 8px env(safe-area-inset-bottom, 0px) !important;
    border-top: 1px solid var(--mj-rule-dark) !important;
    background: rgba(251, 250, 245, .98) !important;
    box-shadow: 0 -5px 18px rgba(24, 60, 58, .06) !important;
    backdrop-filter: none !important;
  }

  html.mobile-design-journal #jxTabbar .jx-tab {
    min-width: 44px;
    min-height: 56px;
    color: var(--mj-muted) !important;
    gap: 1px !important;
    border-radius: 0 !important;
    position: relative;
  }

  html.mobile-design-journal #jxTabbar .jx-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 18px;
    height: 2px;
    background: transparent;
    transform: translateX(-50%);
  }

  html.mobile-design-journal #jxTabbar .jx-tab.active,
  html.mobile-design-journal #jxTabbar .jx-tab[aria-current="page"] {
    color: var(--mj-cinnabar) !important;
  }

  html.mobile-design-journal #jxTabbar .jx-tab.active::before,
  html.mobile-design-journal #jxTabbar .jx-tab[aria-current="page"]::before {
    background: var(--mj-cinnabar);
  }

  html.mobile-design-journal #jxTabbar .jx-tab-ic {
    width: 24px !important;
    height: 24px !important;
    font-size: 21px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal #jxTabbar .jx-tab-name {
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .08em;
  }

  /* Function menu */
  html.mobile-design-journal :is(.jx-m-sheet, .mmenu) {
    color: var(--mj-ink) !important;
    background: var(--mj-paper-raised) !important;
    border: 1px solid var(--mj-rule) !important;
    border-bottom: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: 0 -12px 36px rgba(24, 60, 58, .14) !important;
  }

  html.mobile-design-journal .mmenu-head {
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--mj-ink) !important;
  }

  html.mobile-design-journal .mmenu-head::after {
    content: "全部功能 · 行囊";
    color: var(--mj-brass);
    font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    letter-spacing: .16em;
  }

  html.mobile-design-journal .mmenu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid var(--mj-rule) !important;
    border-left: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .mmenu-cell {
    min-height: 88px !important;
    padding: 14px 6px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mmenu-cell-ic {
    color: var(--mj-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mmenu-cell-name { color: var(--mj-ink) !important; }
  html.mobile-design-journal .mmenu-badge { background: var(--mj-cinnabar) !important; }
  html.mobile-design-journal :is(.mmenu-login, .mmenu-contact) {
    border-color: var(--mj-rule) !important;
    border-radius: 4px !important;
    background: transparent !important;
  }

  /* Home: one continuous study sheet, with task-first hierarchy. */
  html.mobile-design-journal .mhome {
    width: 100%;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 15px calc(var(--mj-safe-bottom) + 26px) !important;
  }

  html.mobile-design-journal .mhome-top {
    min-height: 82px !important;
    margin: 0 0 12px !important;
    padding: 10px 0 14px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid var(--mj-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-top::before {
    content: "2026 · 全国导游资格考试";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--mj-brass);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
  }

  html.mobile-design-journal .mhome-brand {
    color: var(--mj-ink) !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
  }

  html.mobile-design-journal .mhome-top :is(.mhome-countdown, .mhome-days, .mhome-date) {
    color: var(--mj-cinnabar) !important;
  }

  html.mobile-design-journal #mhomeDateInput {
    min-height: 44px;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule-dark) !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .mhome-progress {
    margin: 0 0 16px !important;
    padding: 8px 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-progress :is(.bar, .progress-bar, [class*="track"]) {
    background: #d8d5ca !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .mhome-progress :is(.fill, [class*="fill"]) {
    background: var(--mj-cinnabar) !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .mhome-welcome {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    color: var(--mj-ink) !important;
    background: rgba(170, 125, 53, .07) !important;
    border: 0 !important;
    border-left: 3px solid var(--mj-brass) !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .mhome-tasks {
    display: grid !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
  }

  html.mobile-design-journal .mhome-task {
    min-height: 74px !important;
    padding: 11px 10px !important;
    color: var(--mj-ink) !important;
    background: var(--mj-paper-raised) !important;
    border: 1px solid var(--mj-rule) !important;
    border-left: 4px solid var(--mj-ink) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-task:first-child { border-left-color: var(--mj-cinnabar) !important; }
  html.mobile-design-journal .mhome-task-ic {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center;
    color: transparent !important;
    font-size: 0 !important;
    background: transparent !important;
    border: 1px solid var(--mj-rule-dark) !important;
    border-radius: 50% !important;
  }

  html.mobile-design-journal .mhome-task-ic::after {
    content: "阅";
    color: var(--mj-cinnabar);
    font: 700 15px/1 "Songti SC", serif;
  }

  html.mobile-design-journal .mhome-task + .mhome-task .mhome-task-ic::after { content: "续"; color: var(--mj-ink); }
  html.mobile-design-journal .mhome-task-go {
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 0 11px !important;
    color: #fffaf0 !important;
    background: var(--mj-cinnabar) !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 22px !important;
    padding: 8px 0 !important;
    border-top: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .mhome-grid::before,
  html.mobile-design-journal .mhome-grid::after { display: none !important; }

  html.mobile-design-journal .mhome-cell {
    min-height: 72px !important;
    padding: 8px 4px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-cell:last-child { border-right: 0 !important; }
  html.mobile-design-journal .mhome-cell :is(.mhome-cell-ic, [class*="icon"]) {
    color: var(--mj-ink) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-sec {
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-sec > :is(h2, h3, .mhome-sec-title) {
    margin: 0 0 9px !important;
    padding: 0 0 8px !important;
    border-bottom: 2px solid var(--mj-ink) !important;
    color: var(--mj-ink) !important;
  }

  html.mobile-design-journal .mhome-subjects {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html.mobile-design-journal .mhome-sub {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 13px 8px 13px 54px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
  }

  html.mobile-design-journal .mhome-sub::before {
    content: counter(mj-sub, decimal-leading-zero);
    counter-increment: mj-sub;
    position: absolute;
    left: 7px;
    top: 15px;
    color: var(--mj-cinnabar);
    font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  html.mobile-design-journal .mhome-subjects { counter-reset: mj-sub; }
  html.mobile-design-journal .mhome-sub :is(.mhome-sub-go, button) { min-height: 44px; }

  html.mobile-design-journal .mhome-stats {
    margin: 0 0 18px !important;
    padding: 14px 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--mj-rule-dark) !important;
    border-bottom: 1px solid var(--mj-rule-dark) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .mhome-stats > * + * { border-left: 1px solid var(--mj-rule) !important; }
  html.mobile-design-journal :is(.mhome-prov-dir, .mhome-links, .mhome-foot) {
    color: var(--mj-muted) !important;
    background: transparent !important;
    border-color: var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Learning: turn the marketing stack into a compact route briefing. */
  html.mobile-design-journal .learn-home-vision {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 15px calc(var(--mj-safe-bottom) + 26px) !important;
  }

  html.mobile-design-journal .vision-hero {
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 22px 2px 18px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 4px solid var(--mj-ink) !important;
    border-bottom: 1px solid var(--mj-rule-dark) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-eyebrow {
    color: var(--mj-cinnabar) !important;
    letter-spacing: .16em !important;
  }

  html.mobile-design-journal .vision-hero h1 {
    max-width: 9em;
    margin: 8px 0 !important;
    color: var(--mj-ink) !important;
    font-size: clamp(30px, 9vw, 39px) !important;
    line-height: 1.12 !important;
  }

  html.mobile-design-journal .vision-hero-copy { width: 100% !important; }
  html.mobile-design-journal .vision-hero-art { display: none !important; }
  html.mobile-design-journal .vision-hero-path {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 18px 0 14px !important;
    border-top: 1px solid var(--mj-rule) !important;
    border-left: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .vision-hero-path > * {
    min-width: 0 !important;
    padding: 9px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-actions { gap: 8px !important; }
  html.mobile-design-journal .vision-actions :is(a, button) {
    min-height: 46px !important;
    padding: 0 16px !important;
    color: #fffaf0 !important;
    background: var(--mj-ink) !important;
    border: 1px solid var(--mj-ink) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-actions :is(a, button):last-child {
    color: var(--mj-ink) !important;
    background: transparent !important;
  }

  html.mobile-design-journal .vision-proof { color: var(--mj-muted) !important; }
  html.mobile-design-journal :is(.vision-today, .vision-map-feature, .vision-tools) {
    margin: 0 0 22px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-today {
    padding: 16px 12px !important;
    color: var(--mj-ink) !important;
    background: var(--mj-paper-raised) !important;
    border: 1px solid var(--mj-rule) !important;
    border-top: 3px solid var(--mj-cinnabar) !important;
  }

  html.mobile-design-journal .vision-today button {
    min-height: 46px !important;
    color: #fffaf0 !important;
    background: var(--mj-ink) !important;
    border: 1px solid var(--mj-ink) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-map-feature {
    padding: 20px 16px !important;
    color: #f5f0e4 !important;
    background: var(--mj-ink) !important;
    border: 0 !important;
  }

  html.mobile-design-journal .vision-map-feature * { color: inherit; }
  html.mobile-design-journal .vision-map-feature :is(a, button) {
    min-height: 44px;
    color: var(--mj-ink) !important;
    background: #f5f0e4 !important;
    border-radius: 2px !important;
  }

  html.mobile-design-journal .vision-tools {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html.mobile-design-journal .vision-section-head {
    padding-bottom: 9px !important;
    border-bottom: 2px solid var(--mj-ink) !important;
  }

  html.mobile-design-journal .vision-tool-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-left: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .vision-tool-grid > * {
    min-height: 116px !important;
    padding: 14px 11px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-tools > button {
    min-height: 108px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .vision-footer {
    color: var(--mj-muted) !important;
    background: transparent !important;
    border-top: 1px solid var(--mj-rule) !important;
  }

  /* Quiz entry: editorial index. The actual answering state is styled by quiz-journal-pilot.css. */
  html.mobile-design-journal .quiz-page {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  html.mobile-design-journal .quiz-editorial-hero {
    margin: 0 0 18px !important;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 17px 22px !important;
    color: #f8f2e5 !important;
    background: var(--mj-ink) !important;
    border: 0 !important;
    border-bottom: 5px solid var(--mj-cinnabar) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .quiz-editorial-hero::before {
    content: "题册 · 每日一练";
    display: block;
    margin-bottom: 8px;
    color: #d7b36e;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .2em;
  }

  html.mobile-design-journal .quiz-editorial-hero * { color: inherit; }
  html.mobile-design-journal .quiz-entry-section {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .quiz-subjects {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-top: 2px solid var(--mj-ink) !important;
  }

  html.mobile-design-journal body[data-view="quiz"] .quiz-entry-section .qs-item {
    min-height: 82px !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal body[data-view="quiz"] .quiz-entry-section .qs-item::after {
    height: 2px !important;
    background: linear-gradient(90deg, var(--mj-cinnabar) 0 var(--subject-progress, 0%), var(--mj-rule) var(--subject-progress, 0%)) !important;
  }

  html.mobile-design-journal body[data-view="quiz"] .qs-code {
    color: var(--mj-cinnabar) !important;
    background: transparent !important;
    border: 1px solid var(--mj-cinnabar) !important;
    border-radius: 50% !important;
  }

  html.mobile-design-journal body[data-view="quiz"] .qs-info { color: var(--mj-ink) !important; }
  html.mobile-design-journal body[data-view="quiz"] .qs-count {
    color: var(--mj-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .quiz-entry-section :is(button, .btn) { min-height: 44px; }
  html.mobile-design-journal body[data-view="quiz"] :is(.quiz-specialty-entries button, .quiz-review-entry, .quiz-custom-start, .quiz-version-bar) {
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Progress: command board, but no dashboard-card pile. */
  html.mobile-design-journal :is(.me-page, .me-overview) {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  html.mobile-design-journal .me-login-card,
  html.mobile-design-journal .me-identity-card {
    margin: 0 0 16px !important;
    padding: 16px !important;
    color: #f8f2e5 !important;
    background: var(--mj-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .me-login-card * ,
  html.mobile-design-journal .me-identity-card * { color: inherit; }

  html.mobile-design-journal .view-head.me-head {
    margin: 0 0 12px !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0 11px !important;
    border-bottom: 3px solid var(--mj-ink) !important;
  }

  html.mobile-design-journal .view-head.me-head h2 {
    color: var(--mj-ink) !important;
    font-size: 30px !important;
  }

  html.mobile-design-journal .rank-command {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px 14px !important;
    margin: 0 0 20px !important;
    padding: 16px 0 !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule-dark) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .rank-seal {
    width: 66px !important;
    height: 66px !important;
    color: var(--mj-cinnabar) !important;
    background: transparent !important;
    border: 2px solid var(--mj-cinnabar) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 3px var(--mj-paper), inset 0 0 0 4px var(--mj-cinnabar) !important;
  }

  html.mobile-design-journal .rank-copy { min-width: 0; }
  html.mobile-design-journal .rank-track {
    grid-column: 1 / -1;
    height: 5px !important;
    background: #d8d5ca !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .rank-track > * {
    background: var(--mj-cinnabar) !important;
    border-radius: 0 !important;
  }

  html.mobile-design-journal .rank-kpis {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid var(--mj-rule) !important;
    border-left: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .rank-kpis > * {
    padding: 10px !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .me-dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html.mobile-design-journal .management-panel {
    margin: 0 !important;
    padding: 0 0 14px !important;
    color: var(--mj-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 2px solid var(--mj-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .management-panel > :is(h2, h3, header) {
    padding-top: 10px !important;
  }

  html.mobile-design-journal .memory-terminal-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid var(--mj-rule) !important;
    border-left: 1px solid var(--mj-rule) !important;
  }

  html.mobile-design-journal .memory-terminal-grid > * {
    min-height: 80px !important;
    padding: 11px !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid var(--mj-rule) !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal :is(.subject-progress-list, .activity-list, .debt-list) > * {
    padding: 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mj-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html.mobile-design-journal .view-head.data-heading {
    margin-top: 26px !important;
    padding-bottom: 9px !important;
    border-bottom: 2px solid var(--mj-ink) !important;
  }

  html.mobile-design-journal .data-control-panel {
    padding: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Map: preserve canvas and gestures; only restyle the chrome above it. */
  html.mobile-design-journal .home-fullscreen { background: #d9ddd4 !important; }
  html.mobile-design-journal :is(.home-toolbar, .layer-nav, .map-layer-switcher, .home-legend, .layer-nav-fab) {
    color: var(--mj-ink) !important;
    background: rgba(251, 250, 245, .97) !important;
    border: 1px solid var(--mj-rule-dark) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 14px rgba(24, 60, 58, .12) !important;
    backdrop-filter: none !important;
  }

  html.mobile-design-journal .home-toolbar {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    min-height: 48px !important;
  }

  html.mobile-design-journal .home-toolbar :is(button, a),
  html.mobile-design-journal .layer-nav-fab,
  html.mobile-design-journal .map-layer-switcher :is(button, [role="button"]) {
    min-width: 44px;
    min-height: 44px;
    color: var(--mj-ink) !important;
    border-radius: 2px !important;
  }

  html.mobile-design-journal .layer-nav-fab {
    color: #f8f2e5 !important;
    background: var(--mj-ink) !important;
    border-color: var(--mj-ink) !important;
  }

  html.mobile-design-journal .home-legend { font-size: 11px !important; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html.mobile-design-journal *,
  html.mobile-design-journal *::before,
  html.mobile-design-journal *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}