/* Mooting mobile UI system: restrained, compact and touch-friendly. */
@media (max-width: 767px) {
  :root {
    --mot-ink: #172321;
    --mot-text: #3f4d49;
    --mot-muted: #71807b;
    --mot-accent: #087f78;
    --mot-accent-deep: #096b66;
    --mot-soft: #edf5f3;
    --mot-bg: #f5f7f6;
    --mot-line: #dfe6e3;
    --mot-white: #ffffff;
    --mot-shadow: 0 8px 24px rgba(23, 35, 33, 0.055);
  }

  html {
    scroll-padding-top: 68px;
    background: var(--mot-bg);
  }

  body {
    overflow-x: hidden;
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
    background: var(--mot-bg) !important;
    color: var(--mot-text) !important;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: antialiased;
  }

  body * {
    letter-spacing: 0 !important;
  }

  .container {
    width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  h1, h2, h3, h4, h5, h6,
  .text-dark {
    color: var(--mot-ink) !important;
  }

  .text-secondary,
  .text-gray-500,
  .text-gray-600,
  .text-gray-700 {
    color: var(--mot-muted) !important;
  }

  .bg-light,
  .bg-gray-50 {
    background: var(--mot-bg) !important;
  }

  .shadow-card,
  .shadow-card-hover,
  .shadow-md,
  .shadow-lg,
  .shadow-float {
    box-shadow: var(--mot-shadow) !important;
  }

  .rounded-xl,
  .rounded-2xl,
  .rounded-3xl {
    border-radius: 8px !important;
  }

  .border-gray-100,
  .border-gray-200,
  .border-primary,
  .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--mot-line) !important;
  }

  /* Announcement and global header */
  body > .bg-dark,
  .page-about main > .bg-dark {
    min-height: 34px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    background: #23302d !important;
    font-size: 12px !important;
    line-height: 1.35;
  }

  body > .bg-dark .container > div,
  .page-about main > .bg-dark .container > div {
    justify-content: flex-start !important;
  }

  body > .bg-dark span,
  .page-about main > .bg-dark span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body > .bg-dark i,
  .page-about main > .bg-dark i {
    color: #b8d7d2 !important;
  }

  body > .bg-dark a,
  .page-about main > .bg-dark a {
    color: #cfe6e2 !important;
    font-weight: 600;
  }

  header.sticky {
    top: 0;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--mot-line);
    box-shadow: 0 2px 12px rgba(23,35,33,.045) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  header.sticky .flex.items-center.justify-between.py-4 {
    min-height: 64px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  header .site-logo {
    width: 126px !important;
    height: 42px !important;
    object-fit: contain;
    image-rendering: auto !important;
  }

  .mobile-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mot-line);
    border-radius: 8px;
    background: #fff;
    color: var(--mot-ink) !important;
    font-size: 17px !important;
  }

  #mobileMenu {
    margin-bottom: 10px !important;
    border: 1px solid var(--mot-line);
    border-radius: 8px !important;
    box-shadow: var(--mot-shadow) !important;
  }

  #mobileMenu > div {
    padding: 8px 14px 12px !important;
  }

  #mobileMenu a,
  #mobileMenu .py-3 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #mobileMenu .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  /* Breadcrumbs and page titles */
  body > section.py-4.bg-white.border-b,
  .page-about main > section.py-4.bg-white.border-b {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  nav[aria-label="Breadcrumb"] {
    font-size: 12.5px !important;
  }

  nav[aria-label="Breadcrumb"] a,
  nav[aria-label="Breadcrumb"] span {
    color: var(--mot-muted) !important;
  }

  body > section.py-12,
  .page-about main > section.py-12 {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  body > section.py-12 > .container > .text-center,
  .page-about main > section.py-12 > .container > .text-center {
    margin-bottom: 24px !important;
  }

  body > section.py-12 h1,
  .page-about main > section.py-12 h1 {
    margin-bottom: 10px !important;
    font-size: 28px !important;
    line-height: 1.22 !important;
    font-weight: 650 !important;
  }

  body > section.py-12 > .container > .text-center > p,
  .page-about main > section.py-12 > .container > .text-center > p {
    max-width: 340px;
    font-size: 14px !important;
    line-height: 1.65;
  }

  /* Forms and controls */
  input, select, textarea, button {
    font: inherit;
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--mot-ink) !important;
    box-shadow: none !important;
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #9aa5a1 !important;
  }

  label {
    margin-bottom: 6px !important;
    color: var(--mot-muted) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  button,
  a[class*="bg-primary"] {
    border-radius: 8px !important;
  }

  .page-tro #troSearchForm,
  .page-brands #brandSearchForm {
    font-size: 13px;
  }

  .page-tro #troSearchForm > .grid,
  .page-brands #brandSearchForm > .grid {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .page-tro #troSearchForm button,
  .page-tro #troSearchForm a,
  .page-brands #brandSearchForm button,
  .page-brands #brandSearchForm a {
    min-height: 42px !important;
    padding: 9px 8px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  .page-tro section.py-12 .container > .mb-10.bg-white,
  .page-brands section.py-12 .container > .mb-10.bg-white,
  .page-news section.py-12 .container > .mb-10.bg-white {
    margin-bottom: 16px !important;
    padding: 16px !important;
    border: 1px solid var(--mot-line);
    border-radius: 8px !important;
    box-shadow: var(--mot-shadow) !important;
  }

  .page-tro section.py-12 .container > .mb-10.bg-white h3,
  .page-brands section.py-12 .container > .mb-10.bg-white h3 {
    margin-bottom: 14px !important;
    font-size: 16px !important;
  }

  /* TRO and brand database */
  .page-tro .tro-responsive-collapse,
  .page-brands section.py-12 .container > .mb-8.bg-white,
  .page-brands section.py-12 .container > .bg-white.rounded-xl {
    margin-bottom: 16px !important;
    border: 1px solid var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: var(--mot-shadow) !important;
  }

  .page-tro .tro-responsive-collapse > summary {
    min-height: 48px;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }

  .page-tro .tro-responsive-collapse > div {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 14px !important;
  }

  .filter-tag {
    min-height: 34px;
    padding: 6px 12px !important;
    border: 1px solid var(--mot-line);
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--mot-text) !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  .filter-tag.active {
    border-color: #3b82f6 !important;
    background: #3b82f6 !important;
    color: #fff !important;
  }

  .page-tro .tro-responsive-collapse .grid,
  .page-brands section.py-12 .bg-white > .grid {
    gap: 8px !important;
  }

  .page-tro .tro-responsive-collapse .grid > div,
  .page-brands section.py-12 .bg-white > .grid > div {
    padding: 10px 6px !important;
    border-radius: 6px !important;
  }

  .page-tro .tro-responsive-collapse .grid p:first-child,
  .page-brands section.py-12 .bg-white > .grid p:first-child {
    font-size: 10.5px !important;
  }

  .page-tro .tro-responsive-collapse .grid .text-2xl,
  .page-brands section.py-12 .bg-white > .grid .text-2xl {
    font-size: 17px !important;
  }

  .case-table tbody {
    gap: 8px !important;
    padding: 8px !important;
    background: var(--mot-bg) !important;
  }

  .case-table tr.case-card {
    padding: 9px !important;
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .case-table td {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .case-table td::before {
    color: var(--mot-muted) !important;
    font-size: 10px !important;
  }

  .case-table .case-number-link {
    color: var(--mot-accent-deep) !important;
    font-size: 13.5px !important;
  }

  .case-table td:nth-child(6) a {
    min-height: 28px !important;
    border: 1px solid var(--mot-line);
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--mot-accent-deep) !important;
    font-size: 10.5px !important;
  }

  #troPaginationWrap,
  #brandPaginationWrap {
    padding: 12px 8px !important;
  }

  .pagination li {
    margin: 3px !important;
  }

  .pagination li a {
    min-width: 34px;
    padding: 7px 9px !important;
    border-color: var(--mot-line) !important;
    border-radius: 6px !important;
    font-size: 12px;
  }

  .pagination li.active a,
  .pagination li a:hover {
    border-color: var(--mot-accent) !important;
    background: var(--mot-accent) !important;
  }

  #brandCardRows > .brand-card {
    padding: 13px !important;
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #brandCardRows {
    gap: 10px !important;
    padding: 10px !important;
    background: var(--mot-bg) !important;
  }

  .brand-card h4 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .brand-card > .flex:first-child {
    margin-bottom: 8px !important;
  }

  .brand-card .space-y-2 {
    margin-bottom: 10px !important;
  }

  .brand-card .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 5px !important;
  }

  .brand-card .space-y-2 > div {
    align-items: flex-start !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .brand-card .space-y-2 i {
    width: 14px;
    margin-top: 2px;
    color: var(--mot-muted) !important;
    text-align: center;
  }

  .brand-card > .flex:last-child {
    gap: 8px;
  }

  .brand-card > .flex:last-child a {
    min-height: 36px;
    padding: 7px 4px !important;
    border: 1px solid var(--mot-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--mot-accent-deep) !important;
    font-size: 12px !important;
  }

  .brand-card > .flex:last-child a:last-child {
    border-color: var(--mot-accent) !important;
    background: var(--mot-accent) !important;
    color: #fff !important;
  }

  .page-brands #brandSearchForm > .flex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px !important;
  }

  .page-brands #brandSearchForm > .flex > * {
    width: 100%;
  }

  .page-brands section.py-12 .container > .bg-white.rounded-xl > .grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* Home */
  .page-home > section.relative > .container {
    display: flex;
    min-height: 590px;
    align-items: flex-end;
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  .page-home > section.relative > .absolute.inset-0.z-0 > div {
    background-color: #26302f !important;
    background-position: 67% center !important;
    filter: saturate(.88) contrast(1.02) !important;
  }

  .page-home > section.relative::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to bottom, rgba(8, 14, 18, .16) 0%, rgba(8, 14, 18, .34) 46%, rgba(8, 14, 18, .76) 100%),
      linear-gradient(to right, rgba(8, 14, 18, .24), rgba(8, 14, 18, .08));
    pointer-events: none;
  }

  .page-home > section.relative .glass-effect {
    width: 100%;
    padding: 10px 0 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;
  }

  .page-home > section.relative .glass-effect > span {
    margin-bottom: 10px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  .page-home > section.relative h1 {
    margin-bottom: 11px !important;
    font-size: 27px !important;
    line-height: 1.16 !important;
    font-weight: 680 !important;
    color: #fff !important;
    text-shadow: 0 3px 18px rgba(0,0,0,.34);
  }

  .page-home > section.relative p {
    max-width: 348px;
    margin-bottom: 15px !important;
    font-size: 12.5px !important;
    line-height: 1.58 !important;
    color: rgba(255,255,255,.84) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
  }

  .page-home > section.relative .flex.flex-col.sm\:flex-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px !important;
    margin-bottom: 15px !important;
  }

  .page-home > section.relative .flex.flex-col.sm\:flex-row a {
    min-height: 42px;
    padding: 8px 7px !important;
    border: 1px solid var(--mot-line);
    border-radius: 8px !important;
    font-size: 12.5px;
    box-shadow: none !important;
  }

  .page-home > section.relative .grid.grid-cols-2 {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 4px !important;
    margin-top: 0 !important;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.24);
  }

  .page-home > section.relative .grid.grid-cols-2 .text-2xl {
    font-size: 17px !important;
    color: #fff !important;
  }

  .page-home > section.relative .grid.grid-cols-2 .text-sm {
    font-size: 10px !important;
    line-height: 1.25;
    color: rgba(255,255,255,.7) !important;
  }

  .page-home > section[class~="py-20"] {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .page-home > section[class~="py-20"] .text-center.mb-16,
  .page-home > section[class~="py-20"] .mb-12 {
    margin-bottom: 22px !important;
  }

  .page-home > section[class~="py-20"] h2 {
    margin-bottom: 8px !important;
    font-size: 23px !important;
    line-height: 1.3 !important;
  }

  .page-home > section[class~="py-20"] .text-lg {
    font-size: 14px !important;
    line-height: 1.65;
  }

  .page-home > section[class~="py-20"] span.inline-block {
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mot-accent-deep) !important;
    font-size: 11px !important;
  }

  .page-home .service-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr);
    align-items: center;
    gap: 0 10px;
    padding: 14px !important;
    border: 1px solid var(--mot-line);
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .page-home .service-card > .flex {
    display: contents !important;
  }

  .page-home .service-card .w-16.h-16 {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }

  .page-home .service-card .w-16.h-16 i {
    font-size: 15px !important;
  }

  .page-home .service-card h3 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.35;
  }

  .page-home .service-card > p {
    grid-column: 1 / -1;
    margin: 11px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.6;
  }

  .page-home .article-card {
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .page-home .article-card .p-6 {
    padding: 14px !important;
  }

  /* News, article and detail pages */
  .page-news .article-card {
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .page-news .article-card .p-6,
  .page-news .article-card .p-8 {
    padding: 14px !important;
  }

  .page-news .article-card .h-64 {
    height: 180px !important;
  }

  .page-news .article-card h3 {
    margin-bottom: 7px !important;
    font-size: 16px !important;
    line-height: 1.45;
  }

  .page-news .article-card p {
    margin-bottom: 10px !important;
    font-size: 12.5px !important;
  }

  .page-article article,
  .page-case-detail article,
  .page-brand-detail article {
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  /* Case detail: prioritize the record, then one clear consultation path. */
  .page-case-detail .case-detail-layout,
  .page-case-detail .case-detail-main,
  .page-case-detail .case-detail-sidebar {
    gap: 14px !important;
  }

  .page-case-detail .case-detail-main > .bg-white,
  .page-case-detail .case-detail-sidebar > .bg-white,
  .page-case-detail > section.py-12 > .container > .bg-white {
    padding: 18px !important;
    border-radius: 10px !important;
  }

  .page-case-detail .case-detail-main > .bg-white > h2,
  .page-case-detail .case-detail-sidebar h3 {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    font-size: 18px !important;
  }

  .page-case-detail .case-detail-main > .bg-white > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .page-case-detail .case-detail-main > .bg-white > .grid > div {
    min-width: 0;
    padding: 14px !important;
    border-radius: 8px !important;
  }

  .page-case-detail .case-detail-main > .bg-white > .grid > div:nth-child(3),
  .page-case-detail .case-detail-main > .bg-white > .grid > div:nth-child(4) {
    grid-column: 1 / -1;
  }

  .page-case-detail .case-detail-main > .bg-white > .grid .text-2xl {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .page-case-detail .case-detail-main > .bg-white > .grid .text-xl {
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  .page-case-detail .case-detail-sidebar p {
    margin-bottom: 14px !important;
    line-height: 1.7 !important;
  }

  .page-case-detail .case-detail-sidebar a.inline-flex {
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-radius: 8px !important;
  }

  .page-case-detail .case-progress-content table {
    border-radius: 8px !important;
  }

  /* About */
  .page-about .about-fold-toggle {
    min-height: 56px !important;
    grid-template-columns: 34px 1fr 18px !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    box-shadow: none !important;
  }

  .page-about .about-fold-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .page-about .about-fold-section {
    margin-bottom: 10px !important;
  }

  .page-about .about-fold-section > .about-fold-body {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }

  .page-about #qyjj > .about-fold-body .md\:w-2\/3,
  .page-about #qyjj > .about-fold-body .md\:w-2\/3 * {
    font-size: 13.5px !important;
    line-height: 1.78 !important;
  }

  .page-about #qyjj > .about-fold-body .md\:w-2\/3 p {
    margin-bottom: 10px !important;
    text-indent: 2em !important;
    background: transparent !important;
  }

  .page-about #qyjj > .about-fold-body .grid.grid-cols-1.sm\:grid-cols-3 > div {
    background: #fff !important;
    border: 1px solid var(--mot-line);
  }

  .page-about #fwfw > .about-fold-body .service-card {
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .page-about #fwfw > .about-fold-body .service-card .w-14.h-14 {
    border-radius: 7px !important;
  }

  .page-about #lsjs .lawyer-card,
  .page-about #lsjs > .about-fold-body > .bg-white {
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  /* Contact */
  .page-contact .contact-card {
    padding: 14px !important;
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .page-contact .contact-card .w-16.h-16 {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }

  .page-contact .contact-card .w-16.h-16 i {
    font-size: 16px !important;
  }

  .page-contact .contact-card h3 {
    margin-bottom: 3px !important;
    font-size: 14px !important;
  }

  .page-contact .contact-card p {
    margin-bottom: 8px !important;
    font-size: 11.5px !important;
  }

  .page-contact .contact-form-panel,
  .page-contact .contact-side-panel {
    border-color: var(--mot-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .page-contact .contact-form-panel input[type="submit"] {
    min-height: 44px;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  /* Floating consultation */
  body > .fixed.right-4,
  .page-about main > .fixed.right-4 {
    right: 14px !important;
    top: 46vh !important;
  }

  body > .fixed.right-4 a,
  .page-about main > .fixed.right-4 a {
    width: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50% !important;
    animation: none !important;
    font-size: 16px !important;
  }

  /* Bottom navigation */
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    border-color: var(--mot-line) !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 -4px 18px rgba(23,35,33,.055) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-bottom-nav a {
    position: relative;
    min-height: 60px;
    padding: 7px 2px 6px !important;
    color: #596660 !important;
  }

  .mobile-bottom-nav a i {
    margin-bottom: 3px !important;
    font-size: 17px !important;
  }

  .mobile-bottom-nav a span {
    font-size: 10.5px !important;
    line-height: 1.2;
  }

  .mobile-bottom-nav a.is-active {
    color: #3b82f6 !important;
  }

  .mobile-bottom-nav a.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 34%;
    right: 34%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: #3b82f6;
  }

  .global-qrcode-card,
  .modal-content {
    border-radius: 8px !important;
    box-shadow: 0 18px 50px rgba(23,35,33,.18) !important;
  }

  .global-qrcode-close,
  .modal-close {
    border-radius: 8px !important;
    background: var(--mot-soft) !important;
  }
}