:root {
      --ink: #0f172a;
      --muted: #5d6b82;
      --line: #d7e0ec;
      --soft: #f1f5fb;
      --panel: #ffffff;
      --canvas: #eef3f9;
      --sidebar: #ffffff;
      --sidebar-ink: #111827;
      --brand: #1f7aff;
      --button-start: #1f7aff;
      --button-end: #4a86f7;
      --brand-dark: #0f63df;
      --button-hover-start: #0f63df;
      --button-hover-end: #4a86f7;
      --brand-soft: #eaf2ff;
      --hero-start: #1475ff;
      --hero-end: #4a86f7;
      --steel: #152238;
      --ok: #12805c;
      --warning: #b45309;
      --danger: #ef4444;
      --gray-accent: #64748b;
      --shadow: 0 18px 45px rgba(15, 23, 42, .09);
      --topbar: rgba(238, 243, 249, .86);
      --field: #ffffff;
      --field-ink: #0f172a;
      --chip: #f8fafc;
      --chip-danger: #fff0f0;
      --chip-info: #eaf2ff;
      --chip-success: #e8f7f0;
      --warning-soft: #fff4df;
      --danger-soft: #fff0f0;
      --diff-soft: #fff7ed;
      --gray-soft: #eef2f7;
    }

    body[data-theme="dark"] {
      --ink: #f8fbff;
      --muted: #b9c6dc;
      --line: #233755;
      --soft: #0c1626;
      --panel: #111d30;
      --canvas: #07111f;
      --sidebar: #101b2d;
      --sidebar-ink: #f8fbff;
      --brand-soft: rgba(31, 122, 255, .16);
      --steel: #c8d7ef;
      --shadow: 0 18px 45px rgba(0, 0, 0, .18);
      --topbar: rgba(7, 17, 31, .86);
      --field: #0d1829;
      --field-ink: #f8fbff;
      --chip: #0b1423;
      --chip-danger: rgba(239, 68, 68, .13);
      --chip-info: rgba(31, 122, 255, .16);
      --chip-success: rgba(18, 128, 92, .16);
      --warning-soft: rgba(180, 83, 9, .17);
      --danger-soft: rgba(239, 68, 68, .13);
      --diff-soft: rgba(180, 83, 9, .17);
      --gray-soft: rgba(100, 116, 139, .18);
    }

    * {
      letter-spacing: 0;
    }

    body {
      min-height: 100vh;
      color: var(--ink);
      background: var(--canvas);
      font-family: "Poppins", Arial, Helvetica, sans-serif;
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px 1fr;
      transition: grid-template-columns .22s ease;
    }

    body.sidebar-collapsed .app-shell {
      grid-template-columns: 82px 1fr;
    }

    .sidebar {
      background: var(--sidebar);
      color: var(--sidebar-ink);
      border-right: 1px solid var(--line);
      padding: 22px 18px;
      position: sticky;
      top: 0;
      height: 100vh;
      z-index: 20;
      transition: width .22s ease, padding .22s ease, box-shadow .22s ease;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .sidebar-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 38px;
      align-items: start;
      gap: 12px;
      margin-bottom: 22px;
    }

    .sidebar-toggle {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      margin-top: 0;
      box-shadow: var(--shadow);
      transition: background .18s ease, color .18s ease, transform .2s ease;
    }

    .sidebar-toggle:hover {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
    }

    .sidebar-toggle i {
      transition: transform .18s ease;
    }

    .sidebar-toggle:hover i {
      transform: translateX(-1px);
    }

    body.sidebar-collapsed .sidebar {
      padding-left: 13px;
      padding-right: 13px;
    }

    body.sidebar-collapsed .sidebar:hover {
      width: 280px;
      box-shadow: 18px 0 36px rgba(0, 0, 0, .12);
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      font-size: 1.25rem;
      overflow: hidden;
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sidebar-brand-link {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--sidebar-ink);
      text-decoration: none;
      min-width: 244px;
      min-height: 46px;
      min-width: 0;
      padding-right: 0;
      margin-bottom: 0;
    }

    .sidebar-brand-link:hover {
      color: var(--sidebar-ink);
    }

    .sidebar .nav-link {
      color: var(--sidebar-ink);
      border-radius: 8px;
      padding: 11px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      overflow: hidden;
      position: relative;
      transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
      white-space: nowrap;
    }

    .sidebar-group {
      margin-bottom: 6px;
      border: 1px solid transparent;
      border-radius: 10px;
      transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .22s ease;
    }

    .sidebar-group.open {
      background: color-mix(in srgb, var(--brand-soft) 52%, var(--panel));
      border-color: var(--line);
      padding: 6px;
      box-shadow: inset 0 0 0 1px rgba(31, 122, 255, .05);
    }

    .sidebar-group-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--sidebar-ink);
      font-weight: 850;
      padding: 10px 12px;
      text-align: left;
      white-space: nowrap;
      min-height: 42px;
      overflow: hidden;
      position: relative;
      transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
    }

    .sidebar-group-toggle span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .sidebar-group-toggle:hover {
      background: var(--brand-soft);
      transform: translateX(3px);
    }

    .sidebar-group-toggle .bi-chevron-down {
      transition: transform .18s ease;
    }

    .sidebar-group.open .sidebar-group-toggle .bi-chevron-down {
      transform: rotate(180deg);
    }

    .sidebar-submenu {
      display: grid;
      gap: 5px;
      max-height: 0;
      overflow: hidden;
      margin: 0 0 0 15px;
      padding-left: 14px;
      border-left: 2px solid color-mix(in srgb, var(--hero-start) 26%, var(--line));
      opacity: 0;
      transition: max-height .34s cubic-bezier(.2, .8, .2, 1), padding-top .26s ease, opacity .22s ease, transform .26s ease;
      transform: translateY(-4px);
    }

    .sidebar-group.open .sidebar-submenu {
      max-height: 420px;
      padding-top: 7px;
      padding-bottom: 2px;
      opacity: 1;
      transform: translateY(0);
    }

    .sidebar-group.open .sidebar-group-toggle {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .sidebar-group.open .sidebar-group-toggle:hover {
      background: var(--brand-soft);
    }

    .sidebar-submenu .nav-link {
      position: relative;
      border-radius: 7px;
      font-size: .88rem;
      font-weight: 750;
      min-height: 38px;
      padding: 8px 10px 8px 12px;
      background: var(--panel);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
      transform: translateX(0);
    }

    .sidebar-submenu .nav-link::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--line);
      flex: 0 0 5px;
    }

    .sidebar-submenu .nav-link.active::before,
    .sidebar-submenu .nav-link:hover::before {
      background: currentColor;
    }

    .sidebar-submenu .nav-link:not(.active):hover {
      background: var(--field);
      color: var(--brand);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 9%, transparent);
      transform: translateX(4px);
    }

    .sidebar .nav-link i,
    .sidebar-group-toggle i:first-child,
    .sidebar-logout-link i {
      align-items: center;
      border-radius: 8px;
      display: inline-grid;
      height: 28px;
      place-items: center;
      transition: background .22s ease, color .22s ease, transform .22s ease;
      width: 28px;
      flex: 0 0 28px;
      text-align: center;
      font-size: 1rem;
    }

    .sidebar-group-toggle:hover i:first-child,
    .sidebar .nav-link:hover i,
    .sidebar .nav-link.active i {
      background: rgba(255, 255, 255, .18);
      transform: scale(1.08);
    }

    .sidebar-group-toggle:hover i:first-child {
      background: color-mix(in srgb, var(--brand) 14%, transparent);
      color: var(--brand);
    }

    .sidebar-text,
    .sidebar-card {
      transition: opacity .16s ease, transform .18s ease;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-text,
    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-card {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-8px);
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-text {
      width: 0;
      max-width: 0;
      overflow: hidden;
      transform: none;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-head {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 28px;
      justify-items: center;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-toggle {
      grid-row: 1;
      width: 38px;
      height: 38px;
      margin: 0 auto;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-toggle i {
      transform: rotate(180deg);
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand-link {
      min-width: 42px;
      width: 42px;
      height: 42px;
      min-height: 42px;
      padding-right: 0;
      justify-content: center;
      margin: 0 auto;
      overflow: hidden;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand-link .sidebar-text {
      display: none;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .nav-link,
    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-toggle,
    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-logout-link {
      justify-content: center;
      padding-left: 10px;
      padding-right: 10px;
      gap: 0;
      transform: none;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-toggle > span {
      width: 28px;
      min-width: 28px;
      justify-content: center;
      gap: 0;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-submenu {
      max-height: 0;
      opacity: 0;
      padding-left: 0;
      margin-left: 0;
      border-left: 0;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group {
      margin-bottom: 8px;
      padding: 0;
      background: transparent;
      border-color: transparent;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-toggle {
      width: 46px;
      min-height: 46px;
      margin: 0 auto;
    }

    body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group.open .sidebar-group-toggle {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      box-shadow: 0 10px 24px rgba(31, 122, 255, .22);
    }

    .sidebar .nav-link.active,
    .sidebar .nav-link:hover {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      box-shadow: 0 10px 24px rgba(31, 122, 255, .26);
      transform: translateX(3px);
    }

    .sidebar-logout-link {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--danger);
      border-radius: 8px;
      font-weight: 800;
      margin-top: 22px;
      padding: 11px 12px;
      text-decoration: none;
      transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
    }

    .sidebar-logout-link:hover {
      background: var(--danger-soft);
      color: var(--danger);
      box-shadow: 0 10px 22px color-mix(in srgb, var(--danger) 10%, transparent);
      transform: translateX(3px);
    }

    .sidebar-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      margin-top: 22px;
    }

    .sidebar .text-white-50,
    .text-secondary {
      color: var(--muted) !important;
    }

    .main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 100vh;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 4;
      background: var(--topbar);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }

    .page-wrap {
      max-width: 1320px;
      margin: 0 auto;
      padding: 24px;
      width: 100%;
    }

    .main > .page-wrap {
      flex: 1;
    }

    .metric-strip,
    .content-panel,
    .parameter-card,
    .vehicle-summary,
    .compare-panel,
    .system-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .search-panel {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border: 0;
      border-radius: 22px;
      box-shadow: 0 18px 42px rgba(31, 122, 255, .24);
      padding: 22px 26px;
    }

    .search-field-label {
      color: rgba(255, 255, 255, .86);
      display: block;
      font-size: .72rem;
      font-weight: 900;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .search-input {
      min-height: 46px;
      border: 1px solid var(--line);
      background: var(--field);
      color: var(--field-ink);
      border-radius: 10px;
      padding-left: 46px;
      font-size: .9rem;
      font-weight: 700;
    }

    .search-panel .form-select,
    .search-panel .form-control,
    .search-panel .btn {
      min-height: 46px;
      font-size: .9rem;
      border-radius: 10px;
    }

    .search-panel .form-select,
    .search-panel .form-control {
      background-color: rgba(255, 255, 255, .96);
      border-color: rgba(255, 255, 255, .45);
      color: #0f172a;
    }

    .search-panel .btn-brand {
      background: rgba(255, 255, 255, .96);
      border-color: rgba(255, 255, 255, .55);
      color: var(--brand);
      box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    }

    .search-panel .btn-brand:hover {
      background: #fff;
      border-color: #fff;
      color: var(--brand-dark);
    }

    .search-panel .form-select-lg {
      padding-top: .5rem;
      padding-bottom: .5rem;
    }

    .form-select,
    .form-control {
      background-color: var(--field);
      border-color: var(--line);
      color: var(--field-ink);
    }

    .form-select:focus,
    .form-control:focus {
      background-color: var(--field);
      border-color: var(--brand);
      color: var(--field-ink);
      box-shadow: 0 0 0 .2rem rgba(31, 122, 255, .16);
    }

    .search-icon {
      left: 17px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      z-index: 2;
    }

    .btn-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: linear-gradient(135deg, var(--button-start), var(--button-end));
      border-color: transparent;
      color: #fff;
      font-weight: 700;
      min-height: 46px;
    }

    .btn-brand:hover {
      background: linear-gradient(135deg, var(--button-hover-start), var(--button-hover-end));
      border-color: transparent;
      color: #fff;
    }

    .admin-form .btn,
    .form-action-row .btn,
    .preference-actions .btn,
    .config-subnav a,
    .system-preview-actions .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      line-height: 1;
      white-space: nowrap;
    }

    .admin-form .btn:not(.btn-sm),
    .form-action-row .btn,
    .preference-actions .btn {
      min-height: 42px;
      padding: 0 14px;
    }

    .form-action-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-chip {
      border: 1px solid var(--line);
      background: var(--field);
      color: var(--steel);
      border-radius: 999px;
      padding: 8px 13px;
      font-size: .9rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .filter-chip.active {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
    }

    .vehicle-summary {
      overflow: hidden;
    }

    .vehicle-hero {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      padding: 26px;
    }

    .vehicle-hero h1 {
      font-size: clamp(1.55rem, 4vw, 2.45rem);
      font-weight: 800;
      margin: 0;
    }

    .vehicle-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .18);
      font-size: .82rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .vehicle-hero .text-white-50 {
      color: rgba(255, 255, 255, .72) !important;
    }

    .metric-strip {
      padding: 14px 18px;
      box-shadow: none;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
    }

    .metric {
      min-height: 68px;
      border-right: 1px solid var(--line);
    }

    .metric:last-child {
      border-right: 0;
    }

    .metric small {
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      font-size: .72rem;
    }

    .metric strong {
      display: block;
      font-size: 1.05rem;
      margin-top: 4px;
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .section-title h2 {
      font-size: 1.08rem;
      font-weight: 800;
      margin: 0;
    }

    .parameter-card {
      padding: 16px;
      height: 100%;
      box-shadow: none;
      border-top: 3px solid var(--brand);
    }

    .parameter-card.valve {
      border-top-color: var(--danger);
    }

    .parameter-card.ignition {
      border-top-color: var(--brand);
    }

    .parameter-card.fuel {
      border-top-color: var(--ok);
    }

    .parameter-card.oil {
      border-top-color: var(--warning);
    }

    .param-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--brand);
      background: var(--brand-soft);
      flex: 0 0 auto;
    }

    .parameter-card.valve .param-icon {
      color: var(--danger);
      background: var(--danger-soft);
    }

    .parameter-card.ignition .param-icon {
      color: var(--brand);
      background: var(--brand-soft);
    }

    .parameter-card.fuel .param-icon {
      color: var(--ok);
      background: var(--chip-success);
    }

    .parameter-card.oil .param-icon {
      color: var(--warning);
      background: var(--warning-soft);
    }

    .system-card {
      padding: 14px;
      height: 100%;
      box-shadow: none;
      border-left: 4px solid var(--brand);
    }

    .system-card.motor {
      border-left-color: var(--danger);
    }

    .system-card.electric {
      border-left-color: #2563eb;
    }

    .system-card.fuel {
      border-left-color: #12805c;
    }

    .system-card.oil {
      border-left-color: #eab308;
    }

    .system-card.gray {
      border-left-color: var(--gray-accent);
    }

    .system-title {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .read-row {
      display: block;
      border-top: 1px solid var(--line);
      padding: 10px 0;
    }

    .read-row:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .read-row span {
      display: block;
      color: var(--muted);
      font-size: .84rem;
      font-weight: 800;
      margin-bottom: 6px;
      white-space: normal;
    }

    .value-chip {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-width: 0;
      max-width: none;
      min-height: 34px;
      border-radius: 8px;
      background: var(--chip);
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: .88rem;
      font-weight: 900;
      text-align: center;
      padding: 6px 9px;
      white-space: normal;
    }

    .value-chip.danger {
      background: var(--chip-danger);
      border-color: #ffc9c9;
      color: #dc2626;
    }

    .value-chip.info {
      background: var(--chip-info);
      border-color: #bfdbfe;
      color: #1d4ed8;
    }

    .value-chip.success {
      background: var(--chip-success);
      border-color: #b7e4cc;
      color: var(--ok);
    }

    .value-chip.warning {
      background: var(--warning-soft);
      border-color: #fed7aa;
      color: var(--warning);
    }

    .parameter-card h3 {
      color: var(--brand);
      font-size: .95rem;
      font-weight: 800;
      margin: 0;
    }

    .parameter-card.valve h3 {
      color: var(--danger);
    }

    .parameter-card.ignition h3 {
      color: var(--brand);
    }

    .parameter-card.fuel h3 {
      color: var(--ok);
    }

    .parameter-card.oil h3 {
      color: var(--warning);
    }

    .parameter-values {
      display: grid;
      gap: 8px;
      margin-top: 13px;
    }

    .param-line {
      display: block;
      padding: 8px 0;
      border-top: 1px solid var(--line);
    }

    .param-line:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .param-label {
      display: block;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .param-value {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 34px;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--chip);
      color: var(--ink);
      font-size: .9rem;
      font-weight: 900;
      text-align: center;
      padding: 6px 9px;
    }

    .parameter-card .note {
      background: var(--brand-soft);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      font-size: .86rem;
      font-weight: 700;
      margin-top: 10px;
      padding: 8px 10px;
    }

    .sensor-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .sensor-card {
      border: 1px solid var(--line);
      border-left: 4px solid var(--brand);
      border-radius: 8px;
      background: var(--field);
      padding: 13px;
      min-width: 0;
    }

    .sensor-card.fuel {
      border-left-color: var(--ok);
    }

    .sensor-card.ignition {
      border-left-color: var(--danger);
    }

    .sensor-card.signal {
      border-left-color: var(--gray-accent);
    }

    .sensor-card.position {
      border-left-color: var(--gray-accent);
    }

    .sensor-card.warning {
      border-left-color: var(--warning);
    }

    .sensor-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
    }

    .sensor-head i {
      color: var(--brand);
      font-size: 1rem;
    }

    .sensor-card.fuel .sensor-head i {
      color: var(--ok);
    }

    .sensor-card.ignition .sensor-head i {
      color: var(--danger);
    }

    .sensor-card.signal .sensor-head i {
      color: var(--gray-accent);
    }

    .sensor-card.position .sensor-head i {
      color: var(--gray-accent);
    }

    .sensor-card.warning .sensor-head i {
      color: var(--warning);
    }

    .sensor-card.fuel .sensor-reading strong {
      background: var(--chip-success);
      border-color: rgba(18, 128, 92, .35);
      color: var(--ok);
    }

    .sensor-card.ignition .sensor-reading strong {
      background: var(--chip-danger);
      border-color: rgba(239, 68, 68, .35);
      color: var(--danger);
    }

    .sensor-card.signal .sensor-reading strong {
      background: var(--gray-soft);
      border-color: rgba(100, 116, 139, .35);
      color: var(--gray-accent);
    }

    .sensor-card.position .sensor-reading strong {
      background: var(--gray-soft);
      border-color: rgba(100, 116, 139, .35);
      color: var(--gray-accent);
    }

    .sensor-card.warning .sensor-reading strong {
      background: var(--warning-soft);
      border-color: rgba(180, 83, 9, .35);
      color: var(--warning);
    }

    .sensor-head h3 {
      color: var(--ink);
      font-size: .92rem;
      font-weight: 900;
      margin: 0;
    }

    .sensor-readings {
      display: grid;
      gap: 8px;
    }

    .sensor-reading {
      display: grid;
      grid-template-columns: minmax(88px, .72fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      border-top: 1px solid var(--line);
      padding-top: 8px;
    }

    .sensor-reading:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .sensor-reading span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 900;
    }

    .sensor-reading strong {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--chip);
      color: var(--ink);
      font-size: .84rem;
      font-weight: 900;
      line-height: 1.25;
      min-height: 32px;
      padding: 6px 8px;
      text-align: center;
    }

    .compare-panel {
      padding: 18px;
      box-shadow: none;
    }

    .compare-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
      margin-bottom: 14px;
    }

    .model-card-mini {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      padding: 13px;
      min-width: 0;
    }

    .model-card-mini span {
      display: block;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 900;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .model-card-mini strong {
      display: block;
      color: var(--ink);
      font-size: .96rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .model-card-mini small {
      display: block;
      color: var(--muted);
      font-weight: 700;
      margin-top: 4px;
    }

    .vs-badge {
      width: 46px;
      min-height: 100%;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--chip);
      border: 1px solid var(--line);
      color: var(--muted);
      font-weight: 900;
    }

    .compare-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .compare-summary .status-pill {
      border: 1px solid var(--line);
    }

    .compare-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .compare-filter {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      color: var(--muted);
      font-size: .82rem;
      font-weight: 900;
      min-height: 34px;
      padding: 6px 12px;
    }

    .compare-filter.active {
      border-color: rgba(31, 122, 255, .35);
      background: var(--brand-soft);
      color: var(--brand-dark);
    }

    .compare-matrix {
      display: grid;
      gap: 14px;
    }

    .compare-group {
      border: 1px solid var(--line);
      border-left: 4px solid var(--brand);
      border-radius: 8px;
      background: var(--field);
      overflow: hidden;
    }

    .compare-group.motor {
      border-left-color: var(--danger);
    }

    .compare-group.electric {
      border-left-color: #2563eb;
    }

    .compare-group.fuel {
      border-left-color: #12805c;
    }

    .compare-group.oil {
      border-left-color: #eab308;
    }

    .compare-group.signal {
      border-left-color: var(--gray-accent);
    }

    .compare-group.position,
    .compare-group.gray {
      border-left-color: var(--gray-accent);
    }

    .compare-group-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: var(--chip);
      color: var(--ink);
      padding: 12px 14px;
      text-align: left;
    }

    .compare-group-head.collapsed {
      border-bottom-color: transparent;
    }

    .compare-group-title {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--ink);
      font-size: .98rem;
      font-weight: 900;
    }

    .compare-group-title i {
      color: var(--gray-accent);
      font-size: 1rem;
    }

    .compare-group.motor .compare-group-title i {
      color: var(--danger);
    }

    .compare-group.electric .compare-group-title i {
      color: #2563eb;
    }

    .compare-group.fuel .compare-group-title i {
      color: var(--ok);
    }

    .compare-group.oil .compare-group-title i {
      color: #b45309;
    }

    .compare-group-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .compare-group-arrow {
      color: var(--muted);
      font-size: .9rem;
      transition: transform .18s ease;
    }

    .compare-group-head.collapsed .compare-group-arrow {
      transform: rotate(-90deg);
    }

    .compare-group-rows {
      display: grid;
      gap: 0;
      overflow: hidden;
      transition: grid-template-rows .24s ease, opacity .18s ease;
    }

    .compare-group-rows.is-open {
      grid-template-rows: 1fr;
      opacity: 1;
    }

    .compare-group-rows.is-collapsed {
      grid-template-rows: 0fr;
      opacity: 0;
    }

    .compare-group-rows > .compare-group-rows-inner {
      min-height: 0;
    }

    .compare-row {
      border: 0;
      border-top: 1px solid var(--line);
      border-radius: 0;
      background: var(--field);
      padding: 12px;
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr) 180px;
      gap: 10px;
      align-items: center;
    }

    .compare-row:first-child {
      border-top: 0;
    }

    .compare-param {
      color: var(--ink);
      font-size: .86rem;
      font-weight: 900;
    }

    .compare-param span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
    }

    .compare-cell {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--chip);
      padding: 8px 10px;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      font-size: .86rem;
      font-weight: 900;
      text-align: center;
      line-height: 1.25;
    }

    .compare-result {
      justify-self: start;
    }

    .compare-result .diff {
      background: var(--diff-soft);
      color: #9a3412;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .78rem;
      font-weight: 900;
      padding: 6px 8px;
    }

    .compare-table {
      --bs-table-bg: transparent;
      --bs-table-color: var(--ink);
      --bs-table-border-color: var(--line);
      margin-bottom: 0;
      min-width: 680px;
    }

    .text-bg-light {
      background: var(--field) !important;
      color: var(--ink) !important;
      border-color: var(--line) !important;
    }

    .compare-table th {
      color: var(--muted);
      font-size: .78rem;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .compare-table td {
      font-weight: 800;
      vertical-align: middle;
    }

    .compare-table .diff {
      background: var(--diff-soft);
      color: #9a3412;
      border-radius: 8px;
      display: inline-block;
      padding: 5px 8px;
    }

    .compare-cards {
      display: none;
    }

    .compare-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      padding: 12px;
    }

    .compare-card + .compare-card {
      margin-top: 10px;
    }

    .compare-name {
      color: var(--brand);
      font-size: .88rem;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .compare-values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .compare-value {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--chip);
      padding: 9px;
      min-width: 0;
    }

    .compare-value span {
      display: block;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 900;
      margin-bottom: 5px;
    }

    .compare-value strong {
      display: block;
      color: var(--ink);
      font-size: .84rem;
      line-height: 1.3;
    }

    .compare-card .diff {
      background: var(--diff-soft);
      color: #9a3412;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .78rem;
      font-weight: 900;
      margin-top: 10px;
      padding: 6px 8px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 800;
    }

    .status-pill.ok {
      background: var(--chip-success);
      color: var(--ok);
    }

    .status-pill.review {
      background: var(--warning-soft);
      color: var(--warning);
    }

    .status-pill.danger {
      background: var(--chip-danger);
      color: var(--danger);
    }

    .status-filter-button {
      border: 0;
      cursor: pointer;
    }

    .status-filter-button.active {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    .payment-filter-panel {
      background: color-mix(in srgb, var(--field) 78%, transparent);
      border: 1px solid var(--line);
      border-radius: 14px;
      margin-bottom: 18px;
      padding: 16px;
    }

    .payment-filter-panel .form-label,
    .admin-form .form-label,
    .receipt-upload-form .form-label {
      color: var(--ink);
      font-size: .84rem;
      font-weight: 850;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .payment-filter-panel .form-control,
    .payment-filter-panel .form-select,
    .payment-filter-panel .form-control-lg,
    .payment-filter-panel .form-select-lg,
    .receipt-upload-form .form-control {
      border-radius: 8px;
      font-size: .92rem;
      font-weight: 650;
      min-height: 44px;
      padding-bottom: .48rem;
      padding-top: .48rem;
    }

    .payment-filter-panel .btn {
      min-height: 44px;
    }

    .payment-filter-panel .form-control::placeholder {
      color: var(--muted);
      font-size: .92rem;
      font-weight: 600;
      opacity: .9;
    }

    .payment-filter-summary {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .receipt-link {
      align-items: center;
      background: var(--chip-success);
      border-radius: 999px;
      color: var(--ok);
      display: inline-flex;
      font-size: .8rem;
      font-weight: 850;
      gap: 6px;
      padding: 6px 9px;
      text-decoration: none;
      white-space: nowrap;
    }

    .receipt-link:hover {
      color: var(--ok);
      filter: brightness(.98);
    }

    .tests-hero {
      align-items: center;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 18px;
      color: #fff;
      display: flex;
      gap: 18px;
      justify-content: space-between;
      padding: 28px;
      box-shadow: var(--shadow);
    }

    .tests-hero h1 {
      color: #fff;
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 950;
      margin: 14px 0 8px;
    }

    .tests-hero p {
      color: rgba(255, 255, 255, .88);
      font-weight: 650;
      line-height: 1.55;
      margin: 0;
      max-width: 760px;
    }

    .tests-hero-card {
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 16px;
      min-width: 170px;
      padding: 18px;
      text-align: center;
    }

    .tests-hero-card strong {
      color: #fff;
      display: block;
      font-size: 2.2rem;
      font-weight: 950;
      line-height: 1;
    }

    .tests-hero-card span {
      color: rgba(255, 255, 255, .86);
      font-weight: 850;
    }

    .tests-report-panel {
      display: grid;
      gap: 18px;
      padding: 22px;
    }

    .tests-print-header {
      display: none;
    }

    .tests-report-head {
      align-items: flex-start;
      display: flex;
      gap: 16px;
      justify-content: space-between;
    }

    .tests-report-head h2 {
      color: var(--ink);
      font-size: 1.5rem;
      font-weight: 950;
      margin: 12px 0 6px;
    }

    .tests-report-head p {
      color: var(--muted);
      font-weight: 650;
      margin: 0;
    }

    .tests-actions,
    .tests-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .tests-actions form,
    .tests-history-meta form {
      margin: 0;
    }

    .tests-meta-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tests-meta-grid label,
    .tests-notes {
      display: grid;
      gap: 6px;
    }

    .tests-meta-grid span,
    .tests-notes span {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .tests-groups {
      display: grid;
      gap: 14px;
    }

    .tests-filter-bar {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      display: flex;
      gap: 12px;
      justify-content: space-between;
      padding: 12px;
    }

    .tests-filter-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tests-filter-bar .form-select {
      max-width: 260px;
    }

    .test-group {
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
    }

    .test-group-head {
      align-items: center;
      background: color-mix(in srgb, var(--brand) 7%, var(--panel));
      border-left: 5px solid var(--brand);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
    }

    .test-group.motor .test-group-head { border-left-color: var(--danger); }
    .test-group.electric .test-group-head { border-left-color: var(--brand); }
    .test-group.fuel .test-group-head { border-left-color: var(--ok); }
    .test-group.oil .test-group-head { border-left-color: var(--warning); }
    .test-group.gray .test-group-head { border-left-color: var(--gray-accent); }

    .test-group-head span {
      align-items: center;
      color: var(--ink);
      display: inline-flex;
      font-weight: 950;
      gap: 9px;
    }

    .test-group-head small {
      color: var(--muted);
      font-weight: 850;
    }

    .test-row {
      align-items: center;
      border-top: 1px solid var(--line);
      display: grid;
      gap: 12px;
      grid-template-columns: minmax(180px, 1.1fr) minmax(120px, .7fr) minmax(150px, .8fr) minmax(150px, .8fr);
      padding: 12px 16px;
    }

    .test-row-header {
      background: var(--soft);
      color: var(--muted);
      font-size: .74rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .test-param strong,
    .test-param small,
    .test-status small {
      display: block;
    }

    .test-param strong {
      color: var(--ink);
      font-weight: 950;
    }

    .test-param small,
    .test-status small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 650;
      margin-top: 3px;
    }

    .test-expected {
      color: var(--ink);
      font-weight: 900;
    }

    .tests-notes {
      margin: 0;
    }

    .tests-history-list {
      display: grid;
      gap: 10px;
    }

    .tests-history-item {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      display: flex;
      gap: 14px;
      justify-content: space-between;
      padding: 13px 14px;
    }

    .tests-history-item strong,
    .tests-history-item span {
      display: block;
    }

    .tests-history-item strong {
      color: var(--ink);
      font-weight: 950;
    }

    .tests-history-item span,
    .tests-history-meta small {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 650;
    }

    .tests-history-meta {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .tests-meta-grid.saved .form-control,
    .test-row .form-control,
    .tests-notes .form-control {
      min-height: 42px;
    }

    .files-hero,
    .landing-band {
      align-items: center;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 18px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 26px;
      box-shadow: var(--shadow);
    }

    .files-hero h1,
    .landing-band h2 {
      color: #fff;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 950;
      margin: 10px 0 6px;
    }

    .files-hero p,
    .landing-band p {
      color: rgba(255, 255, 255, .88);
      font-weight: 650;
      margin: 0;
      max-width: 720px;
    }

    .files-hero-stats {
      background: rgba(255, 255, 255, .15);
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 14px;
      min-width: 150px;
      padding: 16px;
      text-align: center;
    }

    .files-hero-stats span {
      display: block;
      font-size: 2rem;
      font-weight: 950;
      line-height: 1;
    }

    .files-hero-stats small {
      color: rgba(255, 255, 255, .82);
      font-weight: 800;
    }

    .files-toolbar {
      display: grid;
      gap: 14px;
      margin-bottom: 18px;
    }

    .files-filter-bar {
      align-items: end;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .7fr) minmax(160px, .75fr) auto auto;
      margin-bottom: 16px;
      padding: 12px;
    }

    .files-filter-bar label {
      display: grid;
      gap: 6px;
      margin: 0;
    }

    .files-filter-bar label span {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .files-filter-bar .btn {
      min-height: 42px;
      white-space: nowrap;
    }

    .files-breadcrumb {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-weight: 800;
    }

    .files-breadcrumb a {
      color: var(--brand);
      text-decoration: none;
    }

    .files-nav-row {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .files-back-btn {
      align-items: center;
      display: inline-flex;
      gap: 6px;
      font-weight: 850;
    }

    .files-actions {
      display: grid;
      gap: 10px;
      grid-template-columns: minmax(220px, .65fr) minmax(280px, 1fr);
    }

    .files-inline-form {
      align-items: center;
      display: flex;
      gap: 8px;
      margin: 0;
    }

    .files-inline-form .form-control {
      min-height: 42px;
    }

    .file-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .file-card {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 12px;
      display: grid;
      gap: 12px;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      padding: 12px;
    }

    .file-card-icon {
      background: var(--brand-soft);
      border-radius: 10px;
      color: var(--brand);
      display: grid;
      font-size: 1.35rem;
      height: 44px;
      place-items: center;
      width: 44px;
    }

    .file-card-body {
      min-width: 0;
    }

    .file-card-body strong,
    .file-card-body span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-card-body strong {
      color: var(--ink);
      font-size: .92rem;
      font-weight: 900;
    }

    .file-card-body span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      margin-top: 3px;
    }

    .file-card-actions {
      display: flex;
      gap: 6px;
    }

    .file-card-actions form {
      margin: 0;
    }

    .files-drive-head {
      align-items: center;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 4px 0 14px;
    }

    .files-drive-head strong,
    .files-drive-head span {
      display: block;
    }

    .files-drive-head strong {
      color: var(--ink);
      font-size: 1rem;
      font-weight: 950;
    }

    .files-drive-head span:not(.status-pill) {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 700;
      margin-top: 2px;
    }

    .files-table-wrap {
      margin-top: 10px;
    }

    .files-table {
      align-items: center;
      display: grid;
      gap: 14px;
      grid-template-columns: 28px minmax(220px, 1.6fr) minmax(110px, .65fr) minmax(150px, .8fr) minmax(90px, .5fr) minmax(92px, auto);
    }

    .files-table-header {
      color: var(--muted);
      font-size: .75rem;
      font-weight: 950;
      padding: 10px 14px;
      text-transform: uppercase;
    }

    .files-table-header span:first-child {
      grid-column: 1 / span 2;
    }

    .file-row {
      background: transparent;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      padding: 10px 14px;
      transition: background .18s ease, border-color .18s ease;
    }

    .file-row:hover {
      background: var(--brand-soft);
      border-color: rgba(31, 122, 255, .22);
    }

    .file-name-cell {
      align-items: center;
      display: flex;
      gap: 12px;
      min-width: 0;
    }

    .file-row .file-card-icon,
    .file-row-icon {
      background: transparent;
      border-radius: 8px;
      color: var(--muted);
      flex: 0 0 28px;
      font-size: 1.12rem;
      height: 28px;
      width: 28px;
    }

    .file-row .file-card-icon .bi-folder-fill,
    .file-row-icon .bi-folder-fill {
      color: #4b5563;
    }

    .file-row .file-card-body {
      min-width: 0;
    }

    .file-row .file-card-body strong,
    .file-row .file-card-body a,
    .file-row .file-card-body span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-row .file-card-body a {
      color: var(--ink);
      display: inline-block;
      font-weight: 900;
      max-width: 100%;
      text-decoration: none;
    }

    .file-row .file-card-body a:hover {
      color: var(--brand);
    }

    .file-preview-link {
      background: transparent;
      border: 0;
      color: var(--ink);
      display: inline-block;
      font: inherit;
      font-weight: 900;
      max-width: 100%;
      overflow: hidden;
      padding: 0;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-preview-link:hover {
      color: var(--brand);
    }

    .file-meta-cell {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 750;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-row .file-card-actions {
      justify-content: flex-end;
    }

    .file-action-menu {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 6px;
    }

    .file-action-menu .dropdown-item {
      align-items: center;
      border-radius: 8px;
      color: var(--ink);
      display: flex;
      font-size: .86rem;
      font-weight: 800;
      gap: 8px;
      padding: 9px 10px;
    }

    .file-action-menu .dropdown-item:hover {
      background: var(--brand-soft);
      color: var(--ink);
    }

    .file-action-menu form {
      margin: 0;
    }

    .file-action-menu .dropdown-divider {
      border-color: var(--line);
      margin: 6px 0;
    }

    .pdf-preview-modal .modal-content {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .pdf-preview-modal .modal-header {
      align-items: center;
      background: var(--field);
      border-bottom: 1px solid var(--line);
      gap: 12px;
    }

    .pdf-preview-modal .modal-title {
      color: var(--ink);
      font-size: 1rem;
      font-weight: 950;
      line-height: 1.25;
      margin: 0;
      max-width: min(58vw, 720px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pdf-preview-modal .modal-header small {
      color: var(--muted);
      display: block;
      font-size: .78rem;
      font-weight: 750;
      margin-top: 2px;
    }

    .pdf-preview-actions {
      align-items: center;
      display: flex;
      gap: 10px;
      margin-left: auto;
    }

    .pdf-preview-modal .modal-body {
      background: #0b1220;
      height: min(78vh, 820px);
      padding: 0;
    }

    .pdf-preview-modal iframe {
      border: 0;
      display: block;
      height: 100%;
      width: 100%;
    }

    .landing-page {
      background:
        radial-gradient(circle at 15% 0%, rgba(31, 122, 255, .22), transparent 30%),
        var(--canvas);
      color: var(--ink);
      min-height: 100vh;
      padding: 24px;
      scroll-behavior: smooth;
    }

    .landing-top-anchor {
      display: block;
      height: 0;
      scroll-margin-top: 0;
      width: 0;
    }

    .landing-nav {
      align-items: center;
      backdrop-filter: blur(18px);
      background: color-mix(in srgb, var(--canvas) 86%, transparent);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
      display: grid;
      gap: 12px;
      grid-template-columns: auto minmax(0, 1fr);
      margin: 0 auto 24px;
      max-width: 1180px;
      padding: 10px;
      position: sticky;
      top: 14px;
      z-index: 30;
    }

    .landing-brand,
    .landing-nav-links,
    .landing-nav-sections,
    .landing-nav-actions {
      align-items: center;
      display: flex;
      gap: 12px;
    }

    .landing-brand {
      color: var(--ink);
      min-width: max-content;
      text-decoration: none;
    }

    .landing-menu-toggle {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      display: none;
      height: 44px;
      justify-content: center;
      transition: background .18s ease, color .18s ease, transform .18s ease;
      width: 44px;
    }

    .landing-menu-toggle:hover {
      background: var(--brand-soft);
      color: var(--brand);
      transform: translateY(-1px);
    }

    .landing-brand span {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 12px;
      color: #fff;
      display: grid;
      height: 44px;
      overflow: hidden;
      place-items: center;
      width: 44px;
    }

    .landing-brand img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .landing-brand strong {
      font-size: 1.05rem;
      font-weight: 950;
    }

    .landing-nav-links {
      display: grid;
      gap: 12px;
      flex: 1 1 auto;
      grid-template-columns: minmax(0, 1fr) auto;
      min-width: 0;
    }

    .landing-nav-sections {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      flex: 1 1 auto;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      padding: 5px;
    }

    .landing-nav-sections a {
      align-items: center;
      border-radius: 9px;
      color: var(--ink);
      display: inline-flex;
      font-size: .86rem;
      font-weight: 850;
      gap: 6px;
      min-height: 36px;
      padding: 8px 9px;
      text-decoration: none;
      transition: background .18s ease, color .18s ease, transform .18s ease;
      white-space: nowrap;
    }

    .landing-nav-sections a:hover,
    .landing-nav-sections a.active {
      background: var(--brand-soft);
      color: var(--brand);
      transform: translateY(-1px);
    }

    .landing-nav-sections a.active {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
    }

    .landing-nav-actions {
      border-left: 1px solid var(--line);
      flex: 0 1 auto;
      flex-wrap: nowrap;
      gap: 8px;
      justify-content: flex-end;
      min-width: max-content;
      padding-left: 12px;
    }

    .landing-nav-actions .btn {
      align-items: center;
      display: inline-flex;
      gap: 7px;
      min-height: 42px;
      justify-content: center;
      min-width: auto;
      padding-left: 13px;
      padding-right: 13px;
      white-space: nowrap;
    }

    .landing-theme-toggle {
      border-radius: 12px;
      justify-content: center;
      min-height: 42px;
      min-width: 44px;
      padding-left: 0;
      padding-right: 0;
      white-space: nowrap;
      width: 44px;
    }

    .landing-theme-toggle span {
      display: none;
    }

    .landing-nav-actions .btn-brand {
      min-width: 146px;
    }

    .landing-mobile-menu {
      background: var(--panel);
      border-right: 1px solid var(--line);
      border-radius: 0 22px 22px 0;
      color: var(--ink);
      max-width: 88vw;
      width: 320px;
    }

    .landing-mobile-menu .offcanvas-header {
      align-items: center;
      border-bottom: 1px solid var(--line);
      min-height: 76px;
      padding: 18px 64px 18px 18px;
      position: relative;
    }

    .landing-mobile-menu .btn-close {
      background-color: var(--field);
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: none;
      margin: 0;
      opacity: 1;
      padding: 10px;
      position: absolute;
      right: 18px;
      top: 20px;
    }

    .landing-mobile-menu .offcanvas-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px 18px 18px;
    }

    .landing-mobile-menu-brand {
      align-items: center;
      display: flex;
      gap: 12px;
      min-width: 0;
      width: 100%;
    }

    .landing-mobile-menu-brand > span {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 12px;
      color: #fff;
      display: grid;
      flex: 0 0 44px;
      height: 44px;
      overflow: hidden;
      place-items: center;
      width: 44px;
    }

    .landing-mobile-menu-brand img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    .landing-mobile-menu-brand strong,
    .landing-mobile-menu-brand small {
      display: block;
    }

    .landing-mobile-menu-brand strong {
      font-weight: 950;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .landing-mobile-menu-brand small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 750;
      margin-top: 3px;
    }

    .landing-mobile-links {
      display: grid;
      gap: 8px;
    }

    .landing-mobile-links a {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      display: flex;
      font-weight: 850;
      gap: 10px;
      min-height: 46px;
      padding: 10px 12px;
      text-decoration: none;
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .landing-mobile-links a:hover,
    .landing-mobile-links a.active {
      background: var(--brand-soft);
      color: var(--brand);
      transform: translateX(3px);
    }

    .landing-mobile-links i {
      align-items: center;
      background: color-mix(in srgb, var(--brand) 12%, transparent);
      border-radius: 9px;
      color: var(--brand);
      display: inline-grid;
      height: 30px;
      place-items: center;
      width: 30px;
    }

    .landing-mobile-cta {
      border-top: 1px solid var(--line);
      display: grid;
      gap: 10px;
      padding-top: 14px;
    }

    .pwa-install-button[hidden] {
      display: none !important;
    }

    .landing-hero {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin: 0 auto;
      max-width: 1180px;
      min-height: calc(100vh - 148px);
      scroll-margin-top: 112px;
    }

    .landing-hero-copy {
      align-items: center;
      background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 26%),
        var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 20px 55px color-mix(in srgb, var(--brand) 9%, transparent);
      display: grid;
      gap: 16px 24px;
      grid-template-columns: minmax(0, 1fr) auto;
      margin: 0 auto;
      max-width: 1180px;
      order: 2;
      padding: 22px;
      text-align: left;
      width: 100%;
    }

    .landing-hero-copy h1 {
      color: var(--ink);
      font-size: clamp(1.45rem, 2.8vw, 2.35rem);
      font-weight: 950;
      grid-column: 1;
      line-height: 1.08;
      margin: 0;
      max-width: 720px;
    }

    .landing-hero-copy p {
      color: var(--muted);
      font-size: .94rem;
      font-weight: 650;
      grid-column: 1;
      line-height: 1.5;
      margin: 0;
      max-width: 690px;
    }

    .landing-hero-copy .vehicle-badge {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .landing-hero-points {
      display: flex;
      flex-wrap: wrap;
      grid-column: 1;
      justify-content: flex-start;
      gap: 10px;
      margin-top: 0;
    }

    .landing-hero-points span {
      align-items: center;
      background: color-mix(in srgb, var(--brand) 9%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
      border-radius: 999px;
      color: var(--ink);
      display: inline-flex;
      font-size: .84rem;
      font-weight: 850;
      gap: 7px;
      padding: 8px 12px;
    }

    .landing-hero-points i {
      color: var(--brand);
    }

    .landing-actions {
      align-self: end;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      grid-column: 2;
      grid-row: 2 / span 3;
      justify-content: flex-end;
      margin-top: 0;
    }

    .landing-actions .btn {
      align-items: center;
      border-radius: 12px;
      display: inline-flex;
      gap: 8px;
      justify-content: center;
      min-height: 46px;
      min-width: 168px;
      padding-left: 18px;
      padding-right: 18px;
    }

    .landing-hero-secondary {
      background: color-mix(in srgb, var(--panel) 78%, transparent);
      border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
      color: var(--ink);
      font-weight: 850;
      box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 7%, transparent);
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .landing-hero-secondary:hover {
      background: var(--brand-soft);
      border-color: var(--brand);
      color: var(--brand);
      box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 12%, transparent);
      transform: translateY(-2px);
    }

    .landing-product-shot {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .24);
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      min-height: 440px;
      overflow: hidden;
    }

    .landing-hero-carousel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .24);
      height: 660px;
      order: 1;
      overflow: hidden;
      width: 100%;
    }

    .landing-hero-carousel .carousel-inner,
    .landing-hero-carousel .carousel-item {
      height: 100%;
    }

    .landing-carousel-slide {
      background:
        radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .22), transparent 26%),
        linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      display: grid;
      gap: 28px;
      grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
      height: 660px;
      padding: 38px 42px 64px;
    }

    .landing-slide-copy {
      align-self: center;
      min-height: 0;
    }

    .landing-carousel-slide.manuals {
      background:
        radial-gradient(circle at 12% 14%, rgba(255, 255, 255, .2), transparent 24%),
        linear-gradient(135deg, #0f766e, #34d399);
    }

    .landing-carousel-slide.compare {
      background:
        radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .2), transparent 25%),
        linear-gradient(135deg, #7c2d12, #f97316);
    }

    .landing-carousel-slide.tests {
      background:
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, .22), transparent 25%),
        linear-gradient(135deg, #14532d, #22c55e);
    }

    .landing-carousel-slide.billing {
      background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .2), transparent 25%),
        linear-gradient(135deg, #312e81, #8b5cf6);
    }

    .landing-slide-kicker {
      align-items: center;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 999px;
      display: inline-flex;
      font-size: .8rem;
      font-weight: 900;
      gap: 8px;
      padding: 8px 12px;
      width: fit-content;
    }

    .landing-carousel-slide h2 {
      color: #fff;
      font-size: clamp(1.8rem, 3.2vw, 3rem);
      font-weight: 950;
      line-height: 1.04;
      margin: 16px 0 10px;
      max-width: 620px;
    }

    .landing-carousel-slide p {
      color: rgba(255, 255, 255, .88);
      font-weight: 650;
      font-size: .98rem;
      line-height: 1.55;
      margin: 0;
      max-width: 620px;
    }

    .landing-slide-metrics,
    .landing-slide-files,
    .landing-slide-status {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 30px;
      min-height: 92px;
    }

    .landing-slide-metrics span,
    .landing-slide-files span,
    .landing-slide-status span,
    .landing-slide-compare {
      background: rgba(255, 255, 255, .15);
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 14px;
      backdrop-filter: blur(10px);
    }

    .landing-slide-metrics span {
      display: grid;
      gap: 5px;
      padding: 14px;
    }

    .landing-slide-metrics small {
      color: rgba(255, 255, 255, .78);
      font-weight: 850;
      text-transform: uppercase;
    }

    .landing-slide-metrics strong {
      color: #fff;
      font-size: 1.25rem;
      font-weight: 950;
    }

    .landing-slide-files,
    .landing-slide-status {
      grid-template-columns: 1fr;
      max-width: 520px;
    }

    .landing-slide-files span,
    .landing-slide-status span {
      align-items: center;
      display: flex;
      font-weight: 850;
      gap: 10px;
      padding: 13px 14px;
    }

    .landing-slide-compare {
      display: grid;
      gap: 0;
      grid-template-columns: 1fr auto;
      margin-top: 30px;
      max-width: 520px;
      min-height: 138px;
      overflow: hidden;
    }

    .landing-slide-compare span,
    .landing-slide-compare strong {
      border-bottom: 1px solid rgba(255, 255, 255, .18);
      color: #fff;
      font-weight: 900;
      padding: 12px 14px;
    }

    .landing-slide-compare strong {
      text-align: right;
    }

    .landing-carousel-slide .landing-slide-metrics,
    .landing-carousel-slide .landing-slide-files,
    .landing-carousel-slide .landing-slide-compare,
    .landing-carousel-slide .landing-slide-status {
      display: none;
    }

    .landing-app-preview {
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(255, 255, 255, .68);
      border-radius: 18px;
      box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
      color: #0f172a;
      display: grid;
      gap: 14px;
      margin-top: 0;
      overflow: hidden;
      padding: 18px;
      place-self: center stretch;
    }

    .landing-preview-topbar {
      align-items: center;
      border-bottom: 1px solid #dbe5f2;
      display: grid;
      gap: 10px;
      grid-template-columns: auto 1fr auto;
      padding-bottom: 10px;
    }

    .landing-preview-topbar > span {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 10px;
      height: 38px;
      width: 38px;
    }

    .landing-preview-topbar strong {
      color: #0f172a;
      font-size: 1.05rem;
      font-weight: 950;
    }

    .landing-preview-topbar small {
      color: #64748b;
      font-size: .78rem;
      font-weight: 850;
    }

    .landing-preview-search,
    .landing-preview-breadcrumb {
      align-items: center;
      background: #eef4ff;
      border: 1px solid #d7e5ff;
      border-radius: 12px;
      color: #1f4f9f;
      display: flex;
      font-size: .92rem;
      font-weight: 850;
      gap: 9px;
      padding: 10px 12px;
    }

    .landing-preview-param-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-preview-param-grid span,
    .landing-preview-status-grid span,
    .landing-preview-plan,
    .landing-preview-file-list span {
      background: #f8fafc;
      border: 1px solid #dde7f3;
      border-radius: 12px;
      display: grid;
      gap: 4px;
      padding: 14px;
    }

    .landing-preview-param-grid span {
      border-left-width: 4px;
    }

    .landing-preview-param-grid .red { border-left-color: #ef4444; }
    .landing-preview-param-grid .blue { border-left-color: #1f7aff; }
    .landing-preview-param-grid .green { border-left-color: #12805c; }
    .landing-preview-param-grid .gray { border-left-color: #64748b; }

    .landing-app-preview small {
      color: #64748b;
      font-size: .76rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .landing-app-preview strong {
      color: #0f172a;
      font-size: 1.12rem;
      font-weight: 950;
    }

    .landing-preview-file-list {
      display: grid;
      gap: 10px;
    }

    .landing-preview-file-list span {
      align-items: center;
      grid-template-columns: auto 1fr auto;
    }

    .landing-preview-file-list i {
      color: var(--brand);
      font-size: 1rem;
    }

    .landing-preview-compare-head,
    .landing-preview-compare-row {
      align-items: center;
      display: grid;
      gap: 8px;
      grid-template-columns: 1.2fr 1fr 1fr;
    }

    .landing-preview-compare-head {
      color: #64748b;
      font-size: .76rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .landing-preview-compare-row {
      background: #f8fafc;
      border: 1px solid #dde7f3;
      border-radius: 12px;
      color: #475569;
      font-size: .9rem;
      font-weight: 850;
      padding: 10px;
    }

    .landing-preview-status-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-preview-test-summary {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-preview-test-summary span {
      background: #f8fafc;
      border: 1px solid #dde7f3;
      border-radius: 14px;
      display: grid;
      gap: 3px;
      min-height: 104px;
      padding: 13px;
    }

    .landing-preview-test-summary i {
      color: #1f7aff;
      font-size: 1.2rem;
    }

    .landing-preview-test-summary .ok i {
      color: #12805c;
    }

    .landing-preview-test-summary .danger i {
      color: #ef4444;
    }

    .landing-preview-test-list {
      display: grid;
      gap: 10px;
    }

    .landing-preview-test-list span {
      align-items: center;
      background: #f8fafc;
      border: 1px solid #dde7f3;
      border-radius: 12px;
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr auto auto;
      padding: 10px 12px;
    }

    .landing-preview-test-list em {
      border-radius: 999px;
      color: #fff;
      font-size: .72rem;
      font-style: normal;
      font-weight: 950;
      padding: 5px 8px;
    }

    .landing-preview-test-list span:first-child em {
      background: #ef4444;
    }

    .landing-preview-test-list span:not(:first-child) em {
      background: #12805c;
    }

    .landing-preview-plan {
      background: linear-gradient(135deg, #eef4ff, #f8fafc);
    }

    .landing-preview-plan > span {
      color: #12805c;
      font-size: .82rem;
      font-weight: 950;
    }

    .landing-hero-carousel .carousel-indicators {
      bottom: 16px;
      gap: 6px;
      margin-bottom: 0;
    }

    .landing-hero-carousel .carousel-indicators [data-bs-target] {
      border: 0;
      border-radius: 999px;
      height: 8px;
      opacity: .45;
      width: 24px;
    }

    .landing-hero-carousel .carousel-indicators .active {
      opacity: 1;
      width: 38px;
    }

    .landing-hero-carousel .carousel-control-prev,
    .landing-hero-carousel .carousel-control-next {
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 999px;
      bottom: 22px;
      color: #fff;
      height: 38px;
      opacity: 1;
      top: auto;
      width: 38px;
    }

    .landing-hero-carousel .carousel-control-prev {
      left: 24px;
    }

    .landing-hero-carousel .carousel-control-next {
      left: 68px;
      right: auto;
    }

    .shot-sidebar {
      background: var(--sidebar);
      border-right: 1px solid var(--line);
      display: grid;
      gap: 12px;
      align-content: start;
      padding: 24px 18px;
    }

    .shot-sidebar span {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 14px;
      height: 48px;
      width: 48px;
    }

    .shot-sidebar strong,
    .shot-sidebar small {
      display: block;
    }

    .shot-sidebar strong {
      font-weight: 950;
    }

    .shot-sidebar small {
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 24px;
    }

    .shot-sidebar i {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 10px;
      height: 38px;
      width: 100%;
    }

    .shot-main {
      display: grid;
      gap: 18px;
      align-content: start;
      padding: 26px;
    }

    .shot-search {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 16px;
      color: #fff;
      display: grid;
      gap: 6px;
      min-height: 108px;
      padding: 22px;
    }

    .shot-search span,
    .shot-grid span {
      font-size: .78rem;
      font-weight: 850;
      opacity: .78;
      text-transform: uppercase;
    }

    .shot-search strong {
      font-size: 1.65rem;
      font-weight: 950;
    }

    .shot-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shot-grid div {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 12px;
      display: grid;
      gap: 8px;
      padding: 16px;
    }

    .shot-grid strong {
      color: var(--ink);
      font-size: 1.25rem;
      font-weight: 950;
    }

    .shot-table {
      display: grid;
      gap: 10px;
    }

    .shot-table span {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 8px;
      height: 34px;
    }

    .landing-section {
      border: 1px solid var(--line);
      border-radius: 24px;
      margin: 64px auto 0;
      max-width: 1180px;
      overflow: hidden;
      padding: 34px;
      position: relative;
      scroll-margin-top: 112px;
    }

    .landing-section::before,
    .landing-tests::before,
    .landing-manuals::before,
    .landing-contact::before {
      content: "";
      display: block;
      height: 5px;
      inset: 0 0 auto;
      position: absolute;
    }

    #recursos {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 48%),
        var(--panel);
      box-shadow: 0 22px 60px color-mix(in srgb, var(--brand) 8%, transparent);
    }

    #recursos::before {
      background: linear-gradient(90deg, #1f7aff, #60a5fa);
    }

    #planos {
      background:
        linear-gradient(135deg, color-mix(in srgb, #8b5cf6 11%, transparent), transparent 52%),
        var(--panel);
      box-shadow: 0 22px 60px color-mix(in srgb, #8b5cf6 10%, transparent);
    }

    #planos::before {
      background: linear-gradient(90deg, #7c3aed, #a78bfa);
    }

    #faq {
      background:
        linear-gradient(135deg, color-mix(in srgb, #64748b 12%, transparent), transparent 48%),
        var(--panel);
      box-shadow: 0 22px 60px color-mix(in srgb, #64748b 8%, transparent);
    }

    #faq::before {
      background: linear-gradient(90deg, #64748b, #94a3b8);
    }

    .landing-section-title {
      max-width: 780px;
    }

    .landing-section-title p {
      color: var(--muted);
      font-weight: 650;
      line-height: 1.65;
      margin: 0 0 28px;
      max-width: 760px;
    }

    .landing-section-title h2 {
      color: var(--ink);
      font-size: clamp(1.75rem, 3vw, 2.55rem);
      font-weight: 950;
      line-height: 1.08;
      margin: 16px 0 12px;
    }

    .landing-feature-grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .landing-feature-grid article {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 46%),
        var(--panel);
      border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
      border-radius: 16px;
      box-shadow: 0 16px 40px color-mix(in srgb, var(--brand) 8%, transparent);
      display: grid;
      min-height: 190px;
      padding: 18px;
      position: relative;
      transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    .landing-feature-grid article:hover {
      border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
      box-shadow: 0 22px 52px color-mix(in srgb, var(--brand) 14%, transparent);
      transform: translateY(-4px);
    }

    .landing-feature-grid article::after {
      align-self: end;
      color: var(--muted);
      content: "";
      display: block;
      font-size: .86rem;
      font-weight: 700;
      line-height: 1.45;
      margin-top: 12px;
    }

    .landing-feature-grid article:nth-child(1)::after {
      content: "Marca, modelo e vers\00E3o.";
    }

    .landing-feature-grid article:nth-child(2)::after {
      content: "Compare sem abrir v\00E1rias abas.";
    }

    .landing-feature-grid article:nth-child(3)::after {
      content: "Relat\00F3rio para imprimir.";
    }

    .landing-feature-grid article:nth-child(4)::after {
      content: "Pastas por marca e sistema.";
    }

    .landing-feature-grid article:nth-child(5)::after {
      content: "Planos para acesso t\00E9cnico.";
    }

    .landing-feature-icon {
      align-items: center;
      background: var(--brand-soft);
      border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
      border-radius: 14px;
      color: var(--brand);
      display: inline-grid;
      height: 48px;
      place-items: center;
      width: 48px;
    }

    .landing-feature-grid small {
      align-items: center;
      background: var(--chip-info);
      border-radius: 999px;
      color: var(--brand);
      display: inline-flex;
      font-size: .72rem;
      font-weight: 950;
      justify-self: start;
      margin-top: 16px;
      padding: 6px 9px;
      text-transform: uppercase;
    }

    .landing-feature-grid i {
      color: var(--brand);
      font-size: 1.45rem;
    }

    .landing-feature-grid h3 {
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 950;
      margin: 12px 0 0;
    }

    .landing-feature-grid p {
      display: none;
    }

    .landing-tests,
    .landing-manuals,
    .landing-contact {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      display: grid;
      gap: 26px;
      grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
      margin: 64px auto 0;
      max-width: 1180px;
      overflow: hidden;
      padding: 28px;
      position: relative;
      scroll-margin-top: 112px;
    }

    .landing-tests {
      background:
        linear-gradient(135deg, color-mix(in srgb, #22c55e 11%, transparent), transparent 48%),
        var(--panel);
      box-shadow: 0 22px 60px color-mix(in srgb, #22c55e 10%, transparent);
      grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
    }

    .landing-tests::before {
      background: linear-gradient(90deg, #16a34a, #4ade80);
    }

    .landing-manuals {
      background:
        linear-gradient(135deg, color-mix(in srgb, #14b8a6 11%, transparent), transparent 48%),
        var(--panel);
      box-shadow: 0 22px 60px color-mix(in srgb, #14b8a6 10%, transparent);
    }

    .landing-manuals::before {
      background: linear-gradient(90deg, #0f766e, #2dd4bf);
    }

    .landing-tests h2,
    .landing-manuals h2,
    .landing-contact h2 {
      color: var(--ink);
      font-size: clamp(1.7rem, 3vw, 2.8rem);
      font-weight: 950;
      line-height: 1.1;
      margin: 16px 0;
    }

    .landing-tests p,
    .landing-manuals p,
    .landing-contact p {
      color: var(--muted);
      font-weight: 650;
      line-height: 1.65;
      margin: 0;
    }

    .landing-tests-steps {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 24px;
    }

    .landing-tests-steps span {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      display: grid;
      gap: 2px 10px;
      grid-template-columns: auto 1fr;
      padding: 12px;
    }

    .landing-tests-steps i {
      color: var(--brand);
      font-size: 1.35rem;
      grid-row: span 2;
    }

    .landing-tests-steps strong {
      color: var(--ink);
      font-size: .9rem;
      font-weight: 950;
    }

    .landing-tests-steps small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 750;
    }

    .landing-tests-card {
      background: var(--field);
      border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
      border-radius: 18px;
      box-shadow: 0 18px 50px color-mix(in srgb, var(--brand) 12%, transparent);
      display: grid;
      gap: 14px;
      padding: 18px;
    }

    .landing-tests-card-head {
      align-items: center;
      display: flex;
      gap: 12px;
    }

    .landing-tests-card-head > span {
      align-items: center;
      background: linear-gradient(135deg, var(--button-start), var(--button-end));
      border-radius: 14px;
      color: #fff;
      display: inline-flex;
      flex: 0 0 48px;
      height: 48px;
      justify-content: center;
      width: 48px;
    }

    .landing-tests-card-head strong,
    .landing-tests-card-head small {
      display: block;
    }

    .landing-tests-card-head strong {
      color: var(--ink);
      font-weight: 950;
    }

    .landing-tests-card-head small {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 750;
    }

    .landing-tests-result-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-tests-result-grid span {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      display: grid;
      gap: 2px;
      padding: 13px;
    }

    .landing-tests-result-grid strong {
      color: var(--ink);
      font-size: 1.6rem;
      font-weight: 950;
      line-height: 1;
    }

    .landing-tests-result-grid small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 850;
    }

    .landing-tests-result-grid .ok {
      border-color: color-mix(in srgb, var(--ok) 38%, var(--line));
    }

    .landing-tests-result-grid .danger {
      border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
    }

    .landing-tests-lines {
      display: grid;
      gap: 10px;
    }

    .landing-tests-lines span {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      display: grid;
      gap: 8px;
      grid-template-columns: auto minmax(0, 1fr) auto;
      padding: 12px;
    }

    .landing-tests-lines i {
      color: var(--brand);
      font-size: 1.1rem;
    }

    .landing-tests-lines strong {
      color: var(--ink);
      font-size: .92rem;
      font-weight: 950;
    }

    .landing-tests-lines em {
      color: var(--ink);
      font-style: normal;
      font-weight: 950;
    }

    .landing-tests-lines small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 750;
      grid-column: 2 / -1;
    }

    .landing-manual-list,
    .landing-contact-form {
      display: grid;
      gap: 12px;
    }

    .landing-manual-list span {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      display: flex;
      gap: 10px;
      font-weight: 850;
      padding: 13px 14px;
    }

    .landing-manual-list i {
      color: var(--brand);
      font-size: 1.15rem;
    }

    .landing-pricing-grid {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-price-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
      padding: 22px;
      position: relative;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .landing-price-card:hover {
      border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
      box-shadow: 0 18px 50px color-mix(in srgb, var(--brand) 14%, transparent);
      transform: translateY(-3px);
    }

    .landing-price-card.featured {
      border-color: var(--brand);
      box-shadow: 0 24px 70px color-mix(in srgb, var(--brand) 22%, transparent);
      transform: translateY(-8px);
    }

    .landing-plan-ribbon {
      background: linear-gradient(135deg, var(--button-start), var(--button-end));
      border-radius: 999px;
      color: #fff;
      font-size: .72rem;
      font-weight: 950;
      padding: 7px 10px;
      position: absolute;
      right: 16px;
      text-transform: uppercase;
      top: 16px;
    }

    .landing-price-card span {
      color: var(--brand);
      font-size: .78rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .landing-price-card h3 {
      color: var(--ink);
      font-size: 1.25rem;
      font-weight: 950;
      margin: 0;
    }

    .landing-price-card strong {
      color: var(--ink);
      font-size: 2rem;
      font-weight: 950;
      line-height: 1;
    }

    .landing-price-card small,
    .landing-price-card p {
      color: var(--muted);
      font-weight: 650;
    }

    .landing-price-card p {
      line-height: 1.55;
      margin: 0 0 8px;
    }

    .landing-price-card .btn {
      margin-top: auto;
    }

    .landing-price-card ul {
      display: grid;
      gap: 8px;
      list-style: none;
      margin: 4px 0 12px;
      padding: 0;
    }

    .landing-price-card li {
      align-items: center;
      color: var(--ink);
      display: flex;
      font-size: .88rem;
      font-weight: 750;
      gap: 8px;
    }

    .landing-price-card li i {
      color: var(--ok);
      font-size: 1rem;
    }

    .landing-faq-list {
      display: grid;
      gap: 10px;
    }

    .landing-faq-list details {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .landing-faq-list details[open] {
      background: color-mix(in srgb, var(--brand) 6%, var(--panel));
      border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
      box-shadow: 0 14px 36px color-mix(in srgb, var(--brand) 12%, transparent);
    }

    .landing-faq-list summary {
      align-items: center;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      font-weight: 950;
      gap: 14px;
      justify-content: space-between;
      list-style: none;
      padding: 16px 18px;
      transition: color .2s ease;
    }

    .landing-faq-list summary::-webkit-details-marker {
      display: none;
    }

    .landing-faq-list summary::after {
      align-items: center;
      background: var(--brand-soft);
      border-radius: 999px;
      color: var(--brand);
      content: "\F282";
      display: inline-grid;
      flex: 0 0 30px;
      font-family: "bootstrap-icons";
      font-size: .85rem;
      height: 30px;
      place-items: center;
      transition: transform .24s ease, background .2s ease, color .2s ease;
      width: 30px;
    }

    .landing-faq-list details[open] summary {
      color: var(--brand);
    }

    .landing-faq-list details[open] summary::after {
      background: var(--brand);
      color: #fff;
      transform: rotate(180deg);
    }

    .landing-faq-content {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      padding: 0 18px;
      transition: grid-template-rows .26s ease, opacity .2s ease, padding .26s ease;
    }

    .landing-faq-list details[open] .landing-faq-content {
      grid-template-rows: 1fr;
      opacity: 1;
      padding: 0 18px 16px;
    }

    .landing-faq-list p {
      color: var(--muted);
      font-weight: 650;
      line-height: 1.6;
      margin: 0;
      min-height: 0;
      overflow: hidden;
    }

    .landing-contact-form {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 22px 55px color-mix(in srgb, var(--brand) 11%, transparent);
      padding: 18px;
    }

    .landing-contact {
      background:
        linear-gradient(135deg, color-mix(in srgb, #f97316 10%, transparent), transparent 50%),
        var(--panel);
      box-shadow: 0 22px 60px color-mix(in srgb, #f97316 9%, transparent);
      overflow: hidden;
      position: relative;
    }

    .landing-contact::before {
      background: linear-gradient(90deg, #f97316, #facc15);
      content: "";
      display: block;
      height: 5px;
      inset: 0 0 auto;
      pointer-events: none;
      position: absolute;
    }

    .landing-contact > * {
      position: relative;
      z-index: 1;
    }

    .landing-contact-copy {
      display: grid;
      gap: 16px;
    }

    .landing-contact-highlights {
      display: grid;
      gap: 10px;
      margin-top: 8px;
    }

    .landing-contact-highlights span {
      align-items: center;
      background: color-mix(in srgb, var(--brand) 7%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
      border-radius: 13px;
      color: var(--ink);
      display: flex;
      gap: 10px;
      font-size: .92rem;
      font-weight: 850;
      padding: 12px 14px;
    }

    .landing-contact-highlights i {
      align-items: center;
      background: var(--brand-soft);
      border-radius: 10px;
      color: var(--brand);
      display: inline-grid;
      flex: 0 0 34px;
      height: 34px;
      place-items: center;
      width: 34px;
    }

    .landing-contact-form-head {
      align-items: center;
      border-bottom: 1px solid var(--line);
      display: flex;
      gap: 12px;
      padding-bottom: 14px;
    }

    .landing-contact-form-head > span {
      align-items: center;
      background: linear-gradient(135deg, var(--button-start), var(--button-end));
      border-radius: 14px;
      color: #fff;
      display: inline-grid;
      flex: 0 0 46px;
      height: 46px;
      place-items: center;
      width: 46px;
    }

    .landing-contact-form-head strong,
    .landing-contact-form-head small {
      display: block;
    }

    .landing-contact-form-head strong {
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 950;
    }

    .landing-contact-form-head small {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 650;
      margin-top: 2px;
    }

    .landing-contact-form label {
      display: grid;
      gap: 6px;
      margin: 0;
    }

    .landing-contact-form label span {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .landing-app-install {
      align-items: center;
      background:
        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 26%),
        linear-gradient(135deg, color-mix(in srgb, #0ea5e9 12%, transparent), transparent 48%),
        var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 22px 60px color-mix(in srgb, #0ea5e9 10%, transparent);
      display: grid;
      gap: 28px;
      grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
      margin: 64px auto 0;
      max-width: 1180px;
      overflow: hidden;
      padding: 32px;
      position: relative;
    }

    .landing-app-install::before {
      background: linear-gradient(90deg, #0284c7, #38bdf8);
      content: "";
      display: block;
      height: 5px;
      inset: 0 0 auto;
      position: absolute;
    }

    .landing-app-install h2 {
      color: var(--ink);
      font-size: clamp(1.7rem, 3vw, 2.8rem);
      font-weight: 950;
      line-height: 1.1;
      margin: 16px 0;
      max-width: 680px;
    }

    .landing-app-install p {
      color: var(--muted);
      font-weight: 650;
      line-height: 1.65;
      margin: 0;
      max-width: 660px;
    }

    .landing-app-install-copy > p:not(.landing-app-install-copy-fixed),
    .landing-phone-screen > span:not(.landing-phone-tagline) {
      display: none;
    }

    .landing-app-install-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .landing-app-install-actions .btn {
      align-items: center;
      display: inline-flex;
      gap: 8px;
      justify-content: center;
      min-height: 46px;
      min-width: 168px;
    }

    .landing-phone-preview {
      display: grid;
      justify-items: center;
      perspective: 900px;
    }

    .landing-phone-device {
      background:
        linear-gradient(145deg, #1c1021, #0b1220 42%, #050816);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 32px;
      box-shadow:
        0 30px 60px rgba(15, 23, 42, .24),
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 0 0 3px rgba(255, 255, 255, .04);
      max-width: 230px;
      padding: 5px;
      position: relative;
      width: 100%;
    }

    .landing-phone-device::before,
    .landing-phone-device::after {
      background: #0b1220;
      border-radius: 999px;
      content: "";
      position: absolute;
    }

    .landing-phone-device::before {
      box-shadow: 0 58px 0 #0b1220;
      height: 38px;
      left: -2px;
      top: 72px;
      width: 2px;
      z-index: 2;
    }

    .landing-phone-device::after {
      height: 68px;
      right: -2px;
      top: 118px;
      width: 2px;
      z-index: 2;
    }

    .landing-phone-frame {
      background:
        radial-gradient(circle at 20% 12%, rgba(31, 122, 255, .10), transparent 30%),
        linear-gradient(180deg, #fbfdff, #ffffff 62%);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 27px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
      display: grid;
      min-height: 455px;
      overflow: hidden;
      padding: 0;
      position: relative;
      text-align: center;
      width: 100%;
    }

    .landing-phone-status {
      background: #0b1220;
      border-radius: 999px;
      height: 12px;
      justify-self: center;
      position: absolute;
      top: 10px;
      width: 70px;
      z-index: 4;
    }

    .landing-phone-status::after {
      background: #22314a;
      border-radius: 50%;
      content: "";
      height: 5px;
      position: absolute;
      right: 8px;
      top: 4px;
      width: 5px;
    }

    .landing-phone-screen {
      align-content: start;
      display: grid;
      gap: 9px;
      min-height: 455px;
      padding: 44px 12px 14px;
      position: relative;
    }

    .landing-phone-screen::before {
      display: none;
    }

    .landing-phone-dashboard {
      display: grid;
      gap: 9px;
      position: relative;
      z-index: 2;
    }

    .landing-phone-screen > .landing-phone-app-icon,
    .landing-phone-screen > strong,
    .landing-phone-screen > span:not(.landing-phone-tagline),
    .landing-phone-screen > .landing-phone-tagline,
    .landing-phone-screen > .landing-phone-shortcuts {
      display: none;
    }

    .landing-phone-appbar {
      align-items: center;
      display: grid;
      gap: 7px;
      grid-template-columns: 34px minmax(0, 1fr) 30px;
      text-align: left;
    }

    .landing-phone-mini-logo {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 10px;
      display: grid;
      height: 34px;
      place-items: center;
      width: 34px;
    }

    .landing-phone-mini-logo img {
      border-radius: 11px;
      height: 25px;
      width: 25px;
    }

    .landing-phone-appbar strong,
    .landing-phone-appbar small {
      display: block;
    }

    .landing-phone-appbar strong {
      color: var(--ink);
      font-size: .78rem;
      font-weight: 950;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .landing-phone-appbar small {
      color: var(--muted);
      font-size: .58rem;
      font-weight: 800;
      margin-top: 2px;
    }

    .landing-phone-appbar > i {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--brand);
      display: inline-flex;
      height: 30px;
      justify-content: center;
      width: 30px;
    }

    .landing-phone-search {
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
      color: var(--muted);
      display: flex;
      font-size: .62rem;
      font-weight: 850;
      gap: 6px;
      min-height: 36px;
      padding: 0 9px;
      text-align: left;
    }

    .landing-phone-search i {
      color: var(--brand);
    }

    .landing-phone-feature-grid {
      display: grid;
      gap: 6px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-phone-feature-grid span {
      align-items: center;
      background: color-mix(in srgb, var(--brand) 8%, #fff);
      border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
      border-radius: 12px;
      color: var(--ink);
      display: grid;
      font-size: .49rem;
      font-weight: 950;
      gap: 4px;
      min-height: 62px;
      padding: 7px 2px;
    }

    .landing-phone-feature-grid i {
      color: var(--brand);
      font-size: .9rem;
    }

    .landing-phone-card {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-radius: 15px;
      box-shadow: 0 16px 30px color-mix(in srgb, var(--brand) 22%, transparent);
      color: #fff;
      display: grid;
      gap: 7px;
      padding: 11px;
      text-align: left;
    }

    .landing-phone-card small,
    .landing-phone-card strong,
    .landing-phone-card span {
      display: block;
    }

    .landing-phone-card small {
      font-size: .5rem;
      font-weight: 850;
      opacity: .8;
      text-transform: uppercase;
    }

    .landing-phone-card strong {
      font-size: .78rem;
      font-weight: 950;
      line-height: 1.2;
    }

    .landing-phone-card > span {
      background: rgba(255, 255, 255, .18);
      border-radius: 999px;
      font-size: .58rem;
      font-weight: 900;
      justify-self: start;
      padding: 5px 8px;
    }

    .landing-phone-list {
      display: grid;
      gap: 7px;
    }

    .landing-phone-list span {
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--muted);
      display: grid;
      font-size: .58rem;
      font-weight: 850;
      gap: 6px;
      grid-template-columns: 16px minmax(0, 1fr) auto;
      min-height: 35px;
      padding: 7px 8px;
      text-align: left;
    }

    .landing-phone-list i {
      color: var(--brand);
    }

    .landing-phone-list strong {
      color: var(--ink);
      font-size: .62rem;
      font-weight: 950;
    }

    .landing-phone-app-icon {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 16px 38px color-mix(in srgb, var(--brand) 20%, transparent);
      display: inline-grid;
      height: 88px;
      justify-self: center;
      place-items: center;
      width: 88px;
    }

    .landing-phone-app-icon img {
      border-radius: 22px;
      display: block;
      height: 68px;
      width: 68px;
    }

    .landing-phone-screen > strong {
      color: var(--ink);
      font-size: 1.12rem;
      font-weight: 950;
      margin-top: 4px;
    }

    .landing-phone-screen > span {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 700;
      line-height: 1.5;
    }

    .landing-phone-shortcuts {
      display: grid;
      gap: 8px;
      margin-top: auto;
    }

    .landing-phone-shortcuts small {
      align-items: center;
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      display: flex;
      font-size: .8rem;
      font-weight: 850;
      gap: 8px;
      justify-content: center;
      padding: 10px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    }

    .landing-phone-shortcuts i {
      color: var(--brand);
    }

    .landing-band {
      margin: 64px auto 0;
      max-width: 1180px;
    }

    .landing-band-cta {
      align-items: center;
      background: #fff;
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: 12px;
      box-shadow: 0 18px 38px rgba(0, 0, 0, .16);
      color: var(--hero-start);
      display: inline-flex;
      font-weight: 950;
      justify-content: center;
      min-height: 46px;
      min-width: 176px;
      padding: 10px 18px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      white-space: nowrap;
    }

    .landing-band-cta:hover {
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 22px 48px rgba(0, 0, 0, .2);
      color: var(--hero-end);
      transform: translateY(-2px);
    }

    .landing-footer {
      align-items: center;
      border-top: 1px solid var(--line);
      color: var(--muted);
      display: grid;
      gap: 18px;
      grid-template-columns: minmax(0, 1fr) auto auto;
      margin: 64px auto 0;
      max-width: 1180px;
      padding: 24px 0 10px;
    }

    .landing-footer-brand strong,
    .landing-footer-brand span {
      display: block;
    }

    .landing-footer-brand strong {
      color: var(--ink);
      font-weight: 950;
    }

    .landing-footer-brand span,
    .landing-footer small {
      font-size: .86rem;
      font-weight: 650;
    }

    .landing-footer nav {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
    }

    .landing-footer nav a {
      color: var(--muted);
      font-size: .86rem;
      font-weight: 800;
      text-decoration: none;
    }

    .landing-footer nav a:hover {
      color: var(--brand);
    }

    .offline-page {
      align-items: center;
      background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 32%),
        var(--canvas);
      display: grid;
      min-height: 100vh;
      padding: 24px;
      place-items: center;
    }

    .offline-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
      display: grid;
      gap: 14px;
      max-width: 520px;
      padding: 32px;
      text-align: center;
    }

    .offline-card > span {
      align-items: center;
      background: var(--brand-soft);
      border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
      border-radius: 18px;
      color: var(--brand);
      display: inline-grid;
      font-size: 2rem;
      height: 72px;
      justify-self: center;
      place-items: center;
      width: 72px;
    }

    .offline-card h1 {
      color: var(--ink);
      font-size: clamp(1.6rem, 4vw, 2.35rem);
      font-weight: 950;
      margin: 0;
    }

    .offline-card p {
      color: var(--muted);
      font-weight: 650;
      line-height: 1.6;
      margin: 0;
    }

    .error-code {
      color: var(--brand);
      font-size: .78rem;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .error-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 4px;
    }

    .error-actions .btn {
      align-items: center;
      display: inline-flex;
      font-weight: 850;
      gap: 8px;
      justify-content: center;
      min-height: 44px;
      min-width: 150px;
    }

    .whatsapp-float {
      align-items: center;
      background: linear-gradient(135deg, #16a34a, #22c55e);
      border: 0;
      border-radius: 999px;
      bottom: 24px;
      box-shadow: 0 18px 45px rgba(22, 163, 74, .34);
      color: #fff;
      display: inline-flex;
      font-weight: 950;
      gap: 9px;
      min-height: 54px;
      padding: 13px 18px;
      position: fixed;
      right: 24px;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      z-index: 70;
    }

    .whatsapp-float i {
      font-size: 1.35rem;
    }

    .whatsapp-float:hover {
      box-shadow: 0 22px 56px rgba(22, 163, 74, .42);
      color: #fff;
      filter: brightness(1.02);
      transform: translateY(-3px);
    }

    .whatsapp-lead-modal .modal-content {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
      color: var(--ink);
      overflow: hidden;
    }

    .whatsapp-lead-modal .modal-header,
    .whatsapp-lead-modal .modal-footer {
      border-color: var(--line);
    }

    .whatsapp-lead-modal .modal-header {
      align-items: flex-start;
      background:
        radial-gradient(circle at 10% 0, rgba(34, 197, 94, .18), transparent 34%),
        var(--panel);
      padding: 18px;
    }

    .whatsapp-lead-modal .modal-title {
      color: var(--ink);
      font-weight: 950;
      margin-top: 6px;
    }

    .whatsapp-lead-modal .modal-kicker {
      align-items: center;
      background: rgba(34, 197, 94, .14);
      border-radius: 999px;
      color: #16a34a;
      display: inline-flex;
      font-size: .76rem;
      font-weight: 950;
      gap: 6px;
      padding: 6px 10px;
      text-transform: uppercase;
    }

    .whatsapp-lead-modal .modal-body {
      padding: 18px;
    }

    .whatsapp-lead-modal .form-label {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .pwa-install-modal .modal-header {
      background:
        radial-gradient(circle at 10% 0, color-mix(in srgb, var(--brand) 20%, transparent), transparent 34%),
        var(--panel);
    }

    .pwa-install-modal .modal-kicker {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .pwa-install-preview {
      align-items: center;
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 16px;
      display: flex;
      gap: 14px;
      padding: 14px;
    }

    .pwa-install-preview img {
      border-radius: 18px;
      box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 18%, transparent);
      flex: 0 0 64px;
      height: 64px;
      width: 64px;
    }

    .pwa-install-preview strong,
    .pwa-install-preview span {
      display: block;
    }

    .pwa-install-preview strong {
      color: var(--ink);
      font-weight: 950;
    }

    .pwa-install-preview span {
      color: var(--muted);
      font-size: .88rem;
      font-weight: 700;
      margin-top: 3px;
    }

    .pwa-install-steps {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .pwa-install-steps span {
      align-items: center;
      background: color-mix(in srgb, var(--brand) 5%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
      border-radius: 14px;
      display: grid;
      gap: 2px 10px;
      grid-template-columns: auto 1fr;
      padding: 12px;
    }

    .pwa-install-steps i {
      color: var(--brand);
      font-size: 1.35rem;
      grid-row: span 2;
    }

    .pwa-install-steps strong {
      color: var(--ink);
      font-size: .92rem;
      font-weight: 950;
    }

    .pwa-install-steps small {
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.45;
    }

    .pwa-install-note {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 750;
      line-height: 1.5;
      margin: 14px 0 0;
    }

    .theme-toggle {
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      border-radius: 8px;
      min-height: 40px;
      padding: 7px 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 800;
    }

    .btn-outline-secondary {
      --bs-btn-color: var(--ink);
      --bs-btn-border-color: var(--line);
      --bs-btn-hover-bg: var(--brand-soft);
      --bs-btn-hover-border-color: var(--brand);
      --bs-btn-hover-color: var(--ink);
      --bs-btn-active-bg: var(--brand-soft);
      --bs-btn-active-border-color: var(--brand);
      --bs-btn-active-color: var(--ink);
    }

    .btn-outline-primary {
      --bs-btn-color: var(--brand);
      --bs-btn-border-color: var(--brand);
      --bs-btn-hover-bg: var(--brand);
      --bs-btn-hover-border-color: var(--brand);
      --bs-btn-hover-color: #fff;
      --bs-btn-active-bg: var(--brand);
      --bs-btn-active-border-color: var(--brand);
      --bs-btn-active-color: #fff;
    }

    .profile-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 800;
    }

    .profile-avatar {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      font-size: .82rem;
      font-weight: 900;
      overflow: hidden;
      text-align: center;
      line-height: 1;
    }

    .profile-avatar.large {
      width: 46px;
      height: 46px;
      font-size: 1rem;
      flex: 0 0 auto;
    }

    .profile-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .profile-menu .dropdown-menu {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      min-width: 290px;
      padding: 10px;
    }

    .profile-card-head {
      display: flex;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--field);
      margin-bottom: 8px;
      padding: 12px;
    }

    .profile-card-head strong,
    .profile-card-head small,
    .profile-card-head span {
      display: block;
    }

    .profile-card-head strong {
      color: var(--ink);
      font-weight: 900;
      line-height: 1.2;
    }

    .profile-card-head small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      margin-top: 2px;
    }

    .profile-card-head span {
      color: var(--brand);
      font-size: .72rem;
      font-weight: 900;
      margin-top: 6px;
      text-transform: uppercase;
    }

    .profile-menu .dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      border-radius: 8px;
      font-weight: 800;
      padding: 9px 10px;
    }

    .profile-menu .dropdown-item:hover {
      background: var(--brand-soft);
      color: var(--ink);
    }

    .profile-menu .dropdown-item.danger {
      color: var(--danger);
    }

    .profile-menu .dropdown-item.danger:hover {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .profile-menu .dropdown-divider {
      border-color: var(--line);
    }

    .preferences-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }

    .preference-card {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: start;
      gap: 13px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .preference-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      box-shadow: 0 12px 28px rgba(37, 99, 235, .22);
      font-size: 1.25rem;
    }

    .preference-card h3 {
      margin: 0 0 4px;
      font-size: 1rem;
      font-weight: 900;
      color: var(--ink);
    }

    .preference-card p {
      margin: 0;
      color: var(--muted);
      font-size: .86rem;
    }

    .preference-actions {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      flex-wrap: wrap;
    }

    .preference-actions .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 14px;
      gap: 6px;
      line-height: 1;
    }

    .preference-actions .btn.active {
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-color: transparent;
      box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
    }

    .compact-form {
      gap: 14px;
    }

    .appearance-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
      gap: 18px;
      align-items: start;
    }

    .appearance-controls {
      display: grid;
      gap: 14px;
    }

    .appearance-group {
      display: grid;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      padding: 14px;
    }

    .appearance-group-title {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .appearance-group-title i {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
    }

    .appearance-group-title strong,
    .appearance-group-title span {
      display: block;
    }

    .appearance-group-title strong {
      color: var(--ink);
      font-size: .96rem;
      font-weight: 900;
    }

    .appearance-group-title span {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 650;
      margin-top: 2px;
    }

    .color-control {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      padding: 6px 10px;
    }

    .admin-form .color-control input[type="color"].form-control,
    .admin-form .color-control input[type="color"].form-control-lg {
      width: 42px;
      height: 30px;
      min-height: 30px;
      flex: 0 0 42px;
      border: 0;
      border-radius: 7px;
      padding: 0;
      background: transparent;
    }

    .color-control span {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .appearance-preview {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      position: sticky;
      top: 96px;
    }

    .appearance-preview-copy strong,
    .appearance-preview-copy span {
      display: block;
    }

    .appearance-preview-copy strong {
      color: var(--ink);
      font-size: .95rem;
      font-weight: 900;
    }

    .appearance-preview-copy span {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 650;
      margin-top: 3px;
    }

    .appearance-hover-sample {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      border-radius: 8px;
      padding: 0 14px;
      color: #fff;
      font-size: .88rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--button-hover-start), var(--button-hover-end));
    }

    .system-preview-frame {
      display: grid;
      grid-template-columns: 116px minmax(0, 1fr);
      min-height: 260px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--canvas);
    }

    .system-preview-sidebar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: var(--sidebar);
      border-right: 1px solid var(--line);
      padding: 12px 10px;
    }

    .system-preview-brand {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--ink);
      font-size: .76rem;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .system-preview-brand span {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
    }

    .system-preview-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      border-radius: 8px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      padding: 0 8px;
    }

    .system-preview-nav.active {
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      box-shadow: 0 10px 18px rgba(31, 122, 255, .18);
    }

    .system-preview-main {
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 14px;
    }

    .system-preview-hero {
      display: grid;
      gap: 2px;
      min-height: 76px;
      align-content: center;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      padding: 14px;
    }

    .system-preview-hero strong {
      font-size: 1rem;
      font-weight: 900;
    }

    .system-preview-hero span {
      font-size: .75rem;
      font-weight: 650;
      opacity: .92;
    }

    .system-preview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .system-preview-card {
      display: grid;
      gap: 5px;
      min-height: 70px;
      align-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 10px;
    }

    .system-preview-card small {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 800;
    }

    .system-preview-card strong {
      color: var(--ink);
      font-size: 1.15rem;
      font-weight: 900;
    }

    .system-preview-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .system-preview-actions .btn,
    .system-preview-actions .appearance-hover-sample {
      min-height: 38px;
      font-size: .78rem;
      padding: 0 12px;
    }

    .account-photo-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
    }

    .account-photo-preview {
      width: 82px;
      height: 82px;
      display: grid;
      place-items: center;
      flex: 0 0 82px;
      border-radius: 16px;
      overflow: hidden;
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      font-size: 1.75rem;
      font-weight: 900;
      line-height: 1;
    }

    .account-photo-preview img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .account-photo-field {
      flex: 1 1 auto;
      min-width: 0;
    }

    .page-transition {
      position: fixed;
      inset: 0;
      z-index: 2500;
      display: grid;
      place-items: center;
      background: rgba(7, 17, 31, .28);
      backdrop-filter: blur(5px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }

    .page-transition.show {
      opacity: 1;
      pointer-events: auto;
    }

    .page-transition-spinner {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, .36);
      border-top-color: var(--hero-start);
      border-right-color: var(--hero-end);
      animation: page-spin .72s linear infinite;
    }

    @keyframes page-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .app-footer {
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .85rem;
      font-weight: 700;
    }

    .app-footer .page-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      text-align: center;
    }

    .login-page {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 15% 0%, rgba(31, 122, 255, .28), transparent 34%),
        var(--canvas);
      background-image: var(--login-background, radial-gradient(circle at 15% 0%, rgba(31, 122, 255, .28), transparent 34%), var(--canvas));
      background-size: cover;
      background-position: center;
    }

    .login-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr);
      width: min(1080px, 100%);
      min-height: 640px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 28px;
      box-shadow: 0 28px 80px rgba(0, 0, 0, .26);
      overflow: hidden;
    }

    .login-hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(135deg, var(--login-start, var(--hero-start)), var(--login-end, var(--hero-end)));
      color: #fff;
      padding: 48px;
    }

    .login-logo {
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(7, 17, 31, .82);
      color: #fff;
      font-size: 2rem;
      margin: 0 auto 28px;
      overflow: hidden;
      box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
    }

    .login-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .login-kicker {
      align-self: flex-start;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      color: #fff;
      font-size: .78rem;
      font-weight: 900;
      margin-bottom: 18px;
      padding: 8px 14px;
      text-transform: uppercase;
    }

    .login-hero h1 {
      color: #fff;
      font-size: clamp(2rem, 4vw, 2.65rem);
      font-weight: 900;
      line-height: 1.08;
      margin-bottom: 18px;
    }

    .login-hero p {
      color: rgba(255, 255, 255, .9);
      font-size: 1rem;
      font-weight: 650;
      line-height: 1.55;
      max-width: 460px;
      margin-bottom: 28px;
    }

    .login-feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: auto;
    }

    .login-feature-list span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 999px;
      background: rgba(255, 255, 255, .13);
      color: #fff;
      font-size: .82rem;
      font-weight: 800;
      padding: 8px 12px;
    }

    .login-hero small {
      color: rgba(255, 255, 255, .78);
      font-weight: 800;
      margin-top: 42px;
    }

    .login-panel {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--panel);
      padding: 56px 72px;
    }

    .login-copy h2 {
      color: var(--ink);
      font-size: 1.75rem;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .login-copy p {
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 28px;
    }

    .login-form .form-label {
      color: var(--ink);
      font-weight: 800;
    }

    .login-input-wrap {
      position: relative;
    }

    .login-input-wrap i {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      z-index: 2;
    }

    .login-input-wrap .form-control {
      min-height: 48px;
      border-radius: 12px;
      padding-left: 46px;
      font-size: .95rem;
    }

    .login-hint {
      color: var(--muted);
      font-size: .86rem;
      font-weight: 650;
      margin-top: 24px;
      text-align: center;
    }

    .login-hint strong {
      color: var(--ink);
    }

    .admin-form {
      display: grid;
      gap: 18px;
    }

    .admin-form .form-control,
    .admin-form .form-select,
    .admin-form .form-control-lg,
    .admin-form .form-select-lg {
      min-height: 44px;
      border-radius: 8px;
      font-size: .92rem;
      font-weight: 650;
      padding-top: .48rem;
      padding-bottom: .48rem;
    }

    .admin-form textarea.form-control {
      min-height: 96px;
    }

    .admin-form input[type="color"].form-control,
    .admin-form input[type="color"].form-control-lg {
      height: 44px;
      padding: 5px;
    }

    .admin-form input[type="file"].form-control {
      padding-top: .55rem;
      padding-bottom: .55rem;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 18px;
      align-items: start;
    }

    .config-grid {
      display: grid;
      gap: 18px;
    }

    .config-subnav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

    .config-subnav a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      font-size: .86rem;
      font-weight: 850;
      padding: 0 12px;
      text-decoration: none;
    }

    .config-subnav a:hover {
      background: var(--brand-soft);
      border-color: var(--brand);
      color: var(--brand);
    }

    .config-subnav a.active {
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      border-color: transparent;
      color: #fff;
      box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
    }

    .menu-config-preview {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .menu-config-group {
      cursor: grab;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft);
      padding: 12px;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
    }

    .menu-config-group:hover {
      border-color: var(--brand);
      box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
      transform: translateY(-1px);
    }

    .menu-config-group.dragging {
      cursor: grabbing;
      opacity: .62;
      border-color: var(--brand);
      box-shadow: 0 16px 34px rgba(31, 122, 255, .18);
    }

    .menu-config-group strong,
    .menu-config-group span {
      display: block;
    }

    .menu-config-group strong {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-size: .9rem;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .menu-config-group strong > i {
      color: var(--muted);
      cursor: grab;
      font-size: 1rem;
      margin-right: 0;
    }

    .menu-config-group strong span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
    }

    .menu-config-group strong span i {
      color: var(--brand);
    }

    .menu-config-group span {
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
    }

    .menu-config-fields {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .menu-config-items {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      border-top: 1px solid var(--line);
      padding-top: 12px;
    }

    .menu-config-items .form-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .appearance-hub-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .appearance-hub-card {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 10px;
      row-gap: 2px;
      align-items: center;
      min-height: 92px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      padding: 12px;
      text-decoration: none;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .appearance-hub-card:hover {
      color: var(--ink);
      border-color: var(--brand);
      box-shadow: 0 16px 34px rgba(31, 122, 255, .13);
      transform: translateY(-1px);
    }

    .appearance-hub-card > span {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      grid-row: 1 / 3;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
    }

    .appearance-hub-card strong,
    .appearance-hub-card small {
      display: block;
      min-width: 0;
    }

    .appearance-hub-card strong {
      font-size: .9rem;
      font-weight: 900;
    }

    .appearance-hub-card small {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .settings-preview {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 18px;
      position: sticky;
      top: 96px;
    }

    .settings-logo-preview {
      width: 72px;
      height: 72px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      font-size: 1.6rem;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .settings-logo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .form-help {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 600;
      margin-top: 6px;
    }

    .flash-message {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .flash-message.success {
      background: var(--chip-success);
      color: var(--ok);
    }

    .admin-table {
      --bs-table-bg: transparent;
      --bs-table-color: var(--ink);
      --bs-table-border-color: var(--line);
      margin-bottom: 0;
    }

    .admin-table th {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .admin-table td {
      color: var(--ink);
      font-size: .9rem;
      font-weight: 700;
      vertical-align: middle;
    }

    .table-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
    }

    .table-actions form {
      margin: 0;
    }

    .table-actions [data-long-action-form] .btn {
      align-items: center;
      display: inline-flex;
      gap: 6px;
      justify-content: center;
      min-width: 74px;
    }

    .table-actions [data-long-action-form] .btn.is-loading {
      min-width: 118px;
      opacity: .9;
    }

    .working-notice {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 1100;
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: min(360px, calc(100vw - 32px));
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      color: var(--ink);
      font-size: .9rem;
      font-weight: 800;
      opacity: 0;
      padding: 12px 14px;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .working-notice.show {
      opacity: 1;
      transform: translateY(0);
    }

    .import-status-group,
    .import-review-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
    }

    .import-review-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px;
      margin-bottom: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
    }

    .import-review-table .select-col {
      width: 42px;
      text-align: center;
    }

    .review-muted-row {
      opacity: .72;
    }

    .review-muted-row td {
      font-weight: 650;
    }

    .suggestion-edit-row td {
      background: var(--field);
      border-top: 0;
    }

    .suggestion-edit-form {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--panel);
    }

    .suggestion-edit-form .form-label {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 900;
      margin-bottom: 4px;
      text-transform: uppercase;
    }

    .model-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .parameter-list {
      display: grid;
      gap: 14px;
    }

    .parameter-group {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      overflow: hidden;
    }

    .parameter-group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
    }

    .parameter-group-title i {
      color: var(--brand);
    }

    .parameter-group-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
    }

    .parameter-item {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding: 12px;
      background: var(--panel);
    }

    .parameter-item span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .parameter-item strong {
      color: var(--ink);
      font-size: .98rem;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .parameter-item small {
      color: var(--muted);
      font-weight: 650;
    }

    .brand-list {
      display: grid;
      gap: 8px;
      max-height: 360px;
      overflow: auto;
      padding-right: 2px;
    }

    .brand-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      padding: 9px 10px;
    }

    .brand-item form {
      margin: 0;
    }

    .permission-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .permission-option {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      cursor: pointer;
      padding: 10px;
    }

    .permission-option.admin-only {
      background: linear-gradient(180deg, var(--brand-soft), var(--field));
    }

    .permission-option:has(input:disabled) {
      cursor: not-allowed;
      opacity: .58;
    }

    .permission-option strong,
    .permission-option small {
      display: block;
    }

    .permission-option strong {
      color: var(--ink);
      font-size: .88rem;
      font-weight: 900;
    }

    .permission-option small {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
      margin-top: 2px;
    }

    .permission-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      max-width: 320px;
    }

    .permission-summary span {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--chip);
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      padding: 3px 7px;
    }

    .favorite-grid {
      display: grid;
      gap: 12px;
    }

    .favorite-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid var(--line);
      border-left: 4px solid #eab308;
      border-radius: 8px;
      background: var(--field);
      padding: 14px;
    }

    .favorite-head {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--ink);
      font-weight: 900;
    }

    .favorite-head i {
      color: #eab308;
    }

    .favorite-meta,
    .favorite-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .favorite-meta {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 800;
      margin-top: 8px;
    }

    .favorite-actions {
      justify-content: flex-end;
    }

    .favorite-actions .btn {
      align-items: center;
      display: inline-flex;
      justify-content: center;
      min-height: 32px;
      min-width: 112px;
    }

    .favorite-actions form {
      margin: 0;
    }

    .dashboard-hero {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--hero-start), var(--hero-end));
      color: #fff;
      padding: 28px;
      box-shadow: 0 18px 45px rgba(31, 122, 255, .22);
    }

    .dashboard-hero h1 {
      margin: 12px 0 6px;
      font-size: clamp(1.55rem, 2.4vw, 2.25rem);
      font-weight: 950;
    }

    .dashboard-hero p {
      color: rgba(255, 255, 255, .82);
      font-weight: 650;
      margin: 0;
    }

    .dashboard-hero-actions,
    .dashboard-metrics,
    .dashboard-grid {
      display: grid;
      gap: 14px;
    }

    .dashboard-hero-actions {
      grid-template-columns: repeat(3, max-content);
      align-items: center;
    }

    .dashboard-hero-actions form {
      margin: 0;
    }

    .dashboard-metrics {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-card {
      border: 1px solid var(--line);
      border-left: 5px solid var(--brand);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .dashboard-card.accent-green {
      border-left-color: #10b981;
    }

    .dashboard-card.accent-yellow {
      border-left-color: #eab308;
    }

    .dashboard-card.accent-red {
      border-left-color: #ef4444;
    }

    .dashboard-card span,
    .dashboard-card strong,
    .dashboard-card small {
      display: block;
    }

    .dashboard-card span {
      color: var(--muted);
      font-size: .82rem;
      font-weight: 850;
      margin-bottom: 10px;
    }

    .dashboard-card span i {
      color: var(--brand);
      margin-right: 6px;
    }

    .dashboard-card strong {
      color: var(--ink);
      font-size: clamp(1.45rem, 2vw, 2rem);
      font-weight: 950;
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .dashboard-card.compact strong {
      font-size: 1.85rem;
    }

    .dashboard-card small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 750;
      line-height: 1.35;
    }

    .dashboard-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-list {
      display: grid;
      gap: 10px;
    }

    .dashboard-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
      padding: 12px;
    }

    .dashboard-list-item strong,
    .dashboard-list-item span {
      display: block;
    }

    .dashboard-list-item strong {
      color: var(--ink);
      font-size: .92rem;
      font-weight: 900;
    }

    .dashboard-list-item span {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
      margin-top: 3px;
    }

    .dashboard-list-item b {
      color: var(--ink);
      font-size: .92rem;
      white-space: nowrap;
    }

    .empty-state {
      border: 1px dashed var(--line);
      border-radius: 8px;
      color: var(--muted);
      font-weight: 800;
      padding: 14px;
      text-align: center;
    }

    .mobile-nav {
      display: none;
    }

    .mobile-menu-toggle {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink);
      display: none;
      flex: 0 0 40px;
      height: 40px;
      justify-content: center;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
      width: 40px;
    }

    .mobile-menu-toggle:hover {
      background: var(--brand-soft);
      color: var(--brand);
      transform: translateY(-1px);
    }

    .mobile-system-menu {
      background: var(--sidebar);
      color: var(--sidebar-ink);
      border-right: 1px solid var(--line);
      border-radius: 0 22px 22px 0;
      box-shadow: 28px 0 60px rgba(15, 23, 42, .22);
      max-width: 86vw;
      width: 306px;
    }

    .mobile-system-menu .offcanvas-header {
      align-items: center;
      border-bottom: 1px solid var(--line);
      gap: 12px;
      padding: 18px 16px 16px;
    }

    .mobile-system-menu .btn-close {
      background-color: var(--field);
      border: 1px solid var(--line);
      border-radius: 10px;
      box-shadow: none;
      margin: 0;
      opacity: 1;
      padding: 10px;
    }

    .mobile-system-menu .offcanvas-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 16px;
    }

    .mobile-system-menu .sidebar-brand-link {
      min-width: 0;
    }

    .mobile-system-menu .sidebar-menu {
      gap: 6px;
    }

    .mobile-system-menu .sidebar-group.open {
      background: color-mix(in srgb, var(--brand-soft) 52%, var(--panel));
      border-color: var(--line);
      padding: 6px;
    }

    .mobile-system-menu .sidebar-group-toggle,
    .mobile-system-menu .nav-link,
    .mobile-system-menu .sidebar-logout-link {
      color: var(--sidebar-ink);
      display: flex;
      gap: 10px;
      justify-content: flex-start;
      min-height: 42px;
      padding-left: 12px;
      padding-right: 12px;
      white-space: nowrap;
    }

    .mobile-system-menu .sidebar-group-toggle > span {
      gap: 10px;
      justify-content: flex-start;
      min-width: 0;
      width: auto;
    }

    .mobile-system-menu .sidebar-text {
      max-width: none;
      opacity: 1;
      overflow: hidden;
      pointer-events: auto;
      text-overflow: ellipsis;
      transform: none;
      width: auto;
    }

    .mobile-system-menu .sidebar-submenu {
      border-left: 2px solid color-mix(in srgb, var(--hero-start) 26%, var(--line));
      margin-left: 15px;
      padding-left: 14px;
    }

    @media (max-width: 991.98px) {
      .app-shell {
        display: block;
      }

      body.mobile-menu-open {
        overflow: hidden;
      }

      body.mobile-menu-open::before {
        background: rgba(7, 17, 31, .42);
        content: "";
        inset: 0;
        position: fixed;
        z-index: 49;
      }

      .appearance-layout {
        grid-template-columns: 1fr;
      }

      .appearance-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appearance-preview {
        position: static;
      }

      .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
      }

      .dashboard-hero-actions {
        grid-template-columns: 1fr;
        width: 100%;
      }

      .dashboard-metrics,
      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .login-hero,
      .login-panel {
        padding: 34px;
      }

      .login-feature-list {
        margin-bottom: 0;
      }

      .sidebar {
        border-radius: 0 22px 22px 0;
        box-shadow: 28px 0 60px rgba(15, 23, 42, .24);
        display: block;
        height: 100dvh;
        left: -330px;
        max-width: 86vw;
        overflow-y: auto;
        padding: 18px 16px;
        position: fixed;
        top: 0;
        transform: none !important;
        transition: left .28s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease;
        width: 306px;
        z-index: 60;
      }

      body.mobile-menu-open .sidebar {
        left: 0 !important;
        transform: none !important;
      }

      html body.mobile-menu-open .app-shell > .sidebar {
        left: 0 !important;
        transform: none !important;
      }

      .sidebar-head {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) 38px;
      }

      .sidebar-brand-link {
        min-width: 0;
      }

      .sidebar-toggle {
        box-shadow: none;
      }

      body.sidebar-collapsed .sidebar,
      body.sidebar-collapsed .sidebar:hover {
        padding: 18px 16px;
        width: 306px;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-text,
      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-card {
        opacity: 1;
        pointer-events: auto;
        transform: none;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-text {
        max-width: none;
        overflow: visible;
        width: auto;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand-link {
        height: auto;
        justify-content: center;
        margin: 0;
        min-height: 46px;
        min-width: 0;
        overflow: visible;
        width: auto;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-brand-link .sidebar-text {
        display: block;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .nav-link,
      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-toggle,
      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-logout-link {
        gap: 10px;
        justify-content: flex-start;
        padding-left: 12px;
        padding-right: 12px;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group-toggle > span {
        gap: 10px;
        justify-content: flex-start;
        min-width: 0;
        width: auto;
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group.open .sidebar-group-toggle {
        background: var(--brand-soft);
        box-shadow: none;
        color: var(--brand);
      }

      body.sidebar-collapsed .sidebar:not(:hover) .sidebar-group.open .sidebar-submenu {
        border-left: 2px solid color-mix(in srgb, var(--hero-start) 26%, var(--line));
        margin-left: 15px;
        max-height: 420px;
        opacity: 1;
        padding-left: 14px;
      }

      .mobile-nav {
        display: flex;
        min-width: 0;
      }

      .mobile-menu-toggle {
        display: inline-flex;
      }

      .page-wrap {
        padding: 16px;
      }

      .topbar {
        top: 0;
      }

    }

    .register-shell {
      grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr);
      width: min(1220px, 100%);
    }

    .register-shell .login-hero,
    .register-shell .login-panel {
      padding: 48px;
    }

    .register-shell .login-copy p {
      margin-bottom: 22px;
    }

    .register-shell .login-form .row.g-3 {
      --bs-gutter-y: .75rem;
    }

    .register-plan-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .register-plan-card {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-height: 126px;
      min-width: 0;
      padding: 12px 14px;
      position: relative;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .register-plan-card:hover {
      border-color: color-mix(in srgb, var(--brand) 48%, var(--line));
      transform: translateY(-1px);
    }

    .register-plan-card:has(input:checked) {
      border-color: var(--brand);
      box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 18%, transparent);
    }

    .register-plan-card input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .register-plan-card-head {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .register-plan-card-head strong {
      color: var(--ink);
      font-size: .95rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .register-plan-card-head span,
    .register-plan-period {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .register-plan-price {
      color: var(--brand);
      font-size: 1.2rem;
      font-weight: 950;
      line-height: 1;
    }

    .register-plan-card small {
      color: var(--muted);
      display: -webkit-box;
      font-size: .78rem;
      line-height: 1.35;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .account-subscription-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-subscription-card {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
    }

    .account-subscription-card span {
      color: var(--muted);
      display: block;
      font-size: .78rem;
      font-weight: 900;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .account-subscription-card strong {
      color: var(--ink);
      display: block;
      font-size: 1.3rem;
      font-weight: 950;
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .account-subscription-card small {
      color: var(--muted);
      display: block;
      font-size: .84rem;
      line-height: 1.35;
    }

    .account-access-alert {
      border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
      border-radius: 12px;
      font-weight: 700;
    }

    .account-subnav {
      margin-bottom: 18px;
    }

    .account-history-block {
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .compact-title {
      margin-bottom: 12px;
    }

    .client-plan-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .client-plan-card {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin: 0;
      min-width: 0;
      padding: 16px;
    }

    .client-plan-card.current {
      border-color: var(--brand);
      box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 14%, transparent);
    }

    .client-plan-type {
      color: var(--brand);
      font-size: .78rem;
      font-weight: 950;
      text-transform: uppercase;
    }

    .client-plan-card strong {
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 950;
      line-height: 1.15;
    }

    .client-plan-price {
      color: var(--ink);
      font-size: 1.45rem;
      font-weight: 950;
      line-height: 1;
    }

    .client-plan-card small,
    .client-plan-card p,
    .pix-payment-card p,
    .pix-payment-values small {
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.35;
      margin: 0;
    }

    .client-plan-card .btn {
      margin-top: auto;
    }

    .pix-payment-card {
      background: color-mix(in srgb, var(--brand) 8%, var(--field));
      border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
      border-radius: 16px;
      display: grid;
      gap: 16px;
      grid-template-columns: 1.2fr .8fr 1.1fr 1.2fr;
      padding: 18px;
    }

    .pix-payment-card h3 {
      color: var(--ink);
      font-size: 1.15rem;
      font-weight: 950;
      margin: 4px 0 6px;
    }

    .pix-payment-values,
    .pix-key-box,
    .receipt-upload-form {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 14px;
    }

    .pix-payment-values span,
    .pix-key-box span {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .pix-payment-values strong,
    .pix-key-box strong {
      color: var(--ink);
      font-size: 1.15rem;
      font-weight: 950;
    }

    .pix-key-box code {
      background: var(--field);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--brand);
      font-size: .9rem;
      font-weight: 850;
      overflow-wrap: anywhere;
      padding: 9px 10px;
    }

    @media (max-width: 1199.98px) {
      .app-shell {
        grid-template-columns: 248px minmax(0, 1fr);
      }

      body.sidebar-collapsed .app-shell {
        grid-template-columns: 82px minmax(0, 1fr);
      }

      .sidebar {
        padding-left: 16px;
        padding-right: 16px;
      }

      .page-wrap {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
      }

      .topbar .page-wrap > .d-flex {
        align-items: flex-start !important;
        flex-wrap: wrap;
      }

      .topbar .d-none.d-lg-block {
        flex: 1 1 320px;
        min-width: 0;
      }

      .topbar .d-none.d-lg-block span {
        display: inline;
      }

      .topbar .theme-toggle {
        justify-content: center;
        min-width: 44px;
        padding-left: 0;
        padding-right: 0;
        width: 44px;
      }

      .topbar .theme-toggle span {
        display: none;
      }

      .topbar .status-pill {
        white-space: nowrap;
      }

      .topbar .profile-toggle {
        max-width: 170px;
      }

      .topbar .profile-toggle > span:not(.profile-avatar) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .files-hero {
        align-items: stretch;
        gap: 18px;
        grid-template-columns: minmax(0, 1fr) minmax(132px, .22fr);
        padding: 24px;
      }

      .files-hero h1 {
        font-size: clamp(1.7rem, 3.4vw, 2.25rem);
      }

      .files-hero p {
        max-width: 560px;
      }

      .files-filter-bar {
        grid-template-columns: minmax(220px, 1fr) minmax(140px, .55fr) minmax(145px, .55fr) auto auto;
      }

      .compare-search-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .compare-search-form > * {
        max-width: none;
        width: 100%;
      }

      .compare-search-action {
        grid-column: 1 / -1;
      }

      .compare-showcase {
        grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
      }

      .compare-summary {
        gap: 8px;
      }

      .files-table-header {
        display: none;
      }

      .files-table {
        grid-template-columns: 1fr;
      }

      .file-row {
        align-items: start;
        background: var(--field);
        border: 1px solid var(--line);
        border-radius: 12px;
        gap: 8px 12px;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        margin-bottom: 10px;
        padding: 12px;
      }

      .file-row .file-card-body {
        grid-column: 2;
      }

      .file-meta-cell {
        font-size: .8rem;
        grid-column: 2 / span 2;
        padding-left: 0;
      }

      .file-meta-cell:nth-of-type(1)::before {
        content: "Tipo: ";
        color: var(--muted);
        font-weight: 950;
      }

      .file-meta-cell:nth-of-type(2)::before {
        content: "Modificado: ";
        color: var(--muted);
        font-weight: 950;
      }

      .file-meta-cell:nth-of-type(3)::before {
        content: "Tamanho: ";
        color: var(--muted);
        font-weight: 950;
      }

      .file-row .file-card-actions {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
      }

      .landing-nav {
        align-items: stretch;
        grid-template-columns: 1fr;
        max-width: 980px;
      }

      .landing-brand {
        justify-self: start;
      }

      .landing-nav-links {
        align-items: center;
        border-top: 1px solid var(--line);
        grid-template-columns: minmax(0, 1fr) auto;
        padding-top: 10px;
      }

      .landing-nav-sections {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .landing-nav-sections::-webkit-scrollbar {
        display: none;
      }

      .landing-nav-actions {
        border-left: 0;
        justify-content: flex-end;
        min-width: 0;
        padding-left: 0;
      }

      .landing-nav-actions .btn {
        min-height: 40px;
      }

      .pix-payment-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

      .landing-product-shot,
      .landing-hero-carousel,
      .landing-hero-carousel .carousel-inner,
      .landing-hero-carousel .carousel-item,
      .landing-carousel-slide {
        height: 620px;
        min-height: 620px;
      }

      .landing-carousel-slide {
        gap: 20px;
        grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr);
      }

      .landing-slide-copy {
        min-height: 0;
      }

      .landing-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .landing-tests,
      .landing-manuals,
      .landing-app-install,
      .landing-contact {
        grid-template-columns: 1fr;
      }

      .landing-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .test-row {
        grid-template-columns: minmax(180px, 1fr) minmax(120px, .7fr);
      }

      .test-row-header {
        display: none;
      }
    }

    @media (max-width: 899.98px) {
      .files-filter-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
      }

      .files-filter-bar label:first-child {
        grid-column: 1 / -1;
      }

      .compare-search-form {
        grid-template-columns: 1fr;
      }

      .compare-search-action {
        grid-column: auto;
      }

      .landing-nav-links {
        align-items: stretch;
        grid-template-columns: 1fr;
      }

      .landing-nav-actions {
        border-top: 1px solid var(--line);
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: 10px;
        width: 100%;
      }

      .landing-nav-actions .btn {
        flex: 1 1 132px;
      }
    }

    @media (max-width: 767.98px) {
      .topbar .page-wrap > .d-flex {
        align-items: center !important;
        flex-wrap: nowrap;
        gap: 8px !important;
      }

      .topbar .page-wrap > .d-flex > .d-flex:last-child {
        gap: 6px !important;
        margin-left: auto;
      }

      .mobile-nav {
        flex: 1 1 auto;
        min-width: 0;
      }

      .mobile-nav .brand-mark {
        height: 38px;
        width: 38px;
      }

      .mobile-nav strong {
        font-size: .92rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-menu-toggle {
        flex-basis: 38px;
        height: 38px;
        width: 38px;
      }

      .theme-toggle span {
        display: none;
      }

      .theme-toggle {
        min-height: 38px;
        width: 38px;
        justify-content: center;
        padding: 7px;
      }

      .topbar .status-pill {
        display: none;
      }

      .profile-toggle {
        gap: 4px;
        min-height: 38px;
        padding: 4px 7px;
      }

      .profile-avatar {
        height: 26px;
        width: 26px;
      }

      .metric {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
      }

      .metric:last-child {
        border-bottom: 0;
      }

      .vehicle-hero {
        padding: 22px 18px;
      }

      .search-panel {
        padding: 14px;
      }

      .appearance-hub-grid,
      .menu-config-preview,
      .menu-config-items,
      .dashboard-metrics,
      .dashboard-grid,
      .permission-grid,
      .register-plan-grid,
      .account-subscription-grid {
        grid-template-columns: 1fr;
      }

      .pix-payment-card {
        grid-template-columns: 1fr;
      }

      .tests-hero,
      .tests-report-head {
        align-items: stretch;
        flex-direction: column;
      }

      .tests-hero-card {
        min-width: 0;
      }

      .tests-meta-grid {
        grid-template-columns: 1fr;
      }

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

      .tests-actions .btn {
        flex: 1;
      }

      .tests-filter-bar {
        align-items: stretch;
        flex-direction: column;
      }

      .tests-filter-bar .form-select {
        max-width: none;
      }

      .tests-history-item,
      .tests-history-meta {
        align-items: stretch;
        flex-direction: column;
      }

      .files-hero,
      .landing-band {
        align-items: flex-start;
        flex-direction: column;
      }

      .files-actions,
      .files-filter-bar,
      .landing-feature-grid,
      .landing-pricing-grid {
        grid-template-columns: 1fr;
      }

      .landing-tests,
      .landing-manuals,
      .landing-app-install,
      .landing-contact {
        padding: 18px;
      }

      .landing-phone-device {
        max-width: 230px;
        transform: none;
      }

      .landing-phone-frame,
      .landing-phone-screen {
        min-height: 455px;
      }

      .landing-app-install-actions .btn {
        flex: 1 1 160px;
      }

      .landing-section {
        padding: 18px;
      }

      .landing-price-card.featured {
        transform: none;
      }

      .files-inline-form {
        align-items: stretch;
        flex-direction: column;
      }

      .file-grid {
        grid-template-columns: 1fr;
      }

      .files-drive-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .files-table-header {
        display: none;
      }

      .files-table {
        grid-template-columns: 1fr;
      }

      .file-row {
        border: 1px solid var(--line);
        border-radius: 12px;
        gap: 8px;
        margin-bottom: 10px;
      }

      .file-meta-cell {
        padding-left: 40px;
      }

      .file-meta-cell:nth-of-type(1)::before {
        content: "Tipo: ";
        color: var(--muted);
        font-weight: 950;
      }

      .file-meta-cell:nth-of-type(2)::before {
        content: "Modificado: ";
        color: var(--muted);
        font-weight: 950;
      }

      .file-meta-cell:nth-of-type(3)::before {
        content: "Tamanho: ";
        color: var(--muted);
        font-weight: 950;
      }

      .file-row .file-card-actions {
        justify-content: flex-start;
        padding-left: 40px;
      }

      .pdf-preview-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
      }

      .pdf-preview-modal .modal-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .pdf-preview-modal .modal-title {
        max-width: calc(100vw - 32px);
        white-space: normal;
      }

      .pdf-preview-actions {
        justify-content: space-between;
        margin-left: 0;
        width: 100%;
      }

      .pdf-preview-modal .modal-body {
        height: calc(100vh - 118px);
      }

      .landing-page {
        padding: 16px;
      }

      .landing-nav {
        align-items: center;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
        top: 8px;
        transition: background .2s ease, box-shadow .2s ease, padding .2s ease, transform .2s ease;
      }

      .landing-menu-toggle {
        display: inline-flex;
      }

      .landing-brand {
        justify-content: center;
        min-width: 0;
        width: 100%;
      }

      .landing-brand span {
        transition: height .2s ease, width .2s ease;
      }

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

      .landing-nav-links {
        align-items: stretch;
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        max-height: 132px;
        opacity: 1;
        overflow: hidden;
        transform: translateY(0);
        transition: max-height .24s ease, opacity .18s ease, transform .22s ease, margin .22s ease;
        width: 100%;
      }

      .landing-nav-sections {
        display: none;
      }

      .landing-nav-actions {
        border: 0;
        display: grid;
        gap: 8px;
        grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
        min-width: 0;
        padding-left: 0;
        width: 100%;
      }

      .landing-nav-actions .btn {
        justify-content: center;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
      }

      .landing-theme-toggle {
        min-width: 44px;
        width: 44px;
      }

      .landing-nav-actions .btn-brand {
        grid-column: 1 / -1;
        min-width: 0;
      }

      .landing-nav.is-compact {
        align-items: center;
        border-radius: 16px;
        box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
        gap: 8px;
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 52px;
        padding: 6px 8px;
      }

      .landing-nav.is-compact .landing-menu-toggle {
        height: 38px;
        width: 38px;
      }

      .landing-nav.is-compact .landing-brand {
        align-items: center;
        display: flex;
        gap: 10px;
        height: 40px;
        justify-content: center;
        min-height: 40px;
        overflow: hidden;
      }

      .landing-nav.is-compact .landing-brand strong {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 1;
      }

      .landing-nav.is-compact .landing-brand span {
        align-self: center;
        height: 38px;
        width: 38px;
      }

      .landing-nav.is-compact .landing-nav-links {
        display: none;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
      }

      .landing-hero {
        min-height: auto;
        scroll-margin-top: 150px;
      }

      .landing-hero-copy {
        grid-template-columns: 1fr;
        padding: 18px;
        text-align: left;
      }

      .landing-hero-copy .vehicle-badge,
      .landing-hero-copy h1,
      .landing-hero-copy p,
      .landing-hero-points,
      .landing-actions {
        grid-column: 1;
      }

      .landing-hero-copy h1 {
        font-size: clamp(1.45rem, 8vw, 2.15rem);
        line-height: 1.08;
        max-width: none;
      }

      .landing-hero-copy p {
        font-size: .98rem;
        line-height: 1.55;
      }

      .landing-hero-points {
        gap: 8px;
        margin-top: 18px;
      }

      .landing-hero-points span {
        font-size: .78rem;
        padding: 7px 10px;
      }

      .landing-actions {
        gap: 8px;
        grid-row: auto;
        justify-content: flex-start;
      }

      .landing-actions .btn {
        flex: 1 1 150px;
        min-width: 0;
        padding-left: 14px;
        padding-right: 14px;
      }

      .landing-product-shot {
        grid-template-columns: 74px minmax(0, 1fr);
        min-height: 340px;
      }

      .landing-hero-carousel,
      .landing-hero-carousel .carousel-inner,
      .landing-hero-carousel .carousel-item,
      .landing-carousel-slide {
        height: 720px;
        min-height: 720px;
      }

      .landing-carousel-slide {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 18px 66px;
      }

      .landing-slide-copy {
        min-height: 185px;
      }

      .landing-carousel-slide h2 {
        font-size: 1.65rem;
      }

      .landing-carousel-slide p {
        font-size: .85rem;
      }

      .landing-app-preview {
        border-radius: 14px;
        gap: 9px;
        margin-top: 12px;
        padding: 10px;
        place-self: stretch;
      }

      .landing-preview-param-grid,
      .landing-preview-status-grid {
        grid-template-columns: 1fr;
      }

      .landing-preview-param-grid span,
      .landing-preview-status-grid span,
      .landing-preview-plan,
      .landing-preview-file-list span,
      .landing-preview-compare-row {
        padding: 8px;
      }

      .landing-preview-file-list span {
        grid-template-columns: auto 1fr;
      }

      .landing-preview-file-list span small {
        grid-column: 2;
      }

      .landing-preview-compare-head,
      .landing-preview-compare-row {
        grid-template-columns: 1fr .8fr .8fr;
      }

      .landing-slide-metrics {
        grid-template-columns: 1fr;
        min-height: 180px;
      }

      .landing-hero-carousel .carousel-control-prev {
        left: 18px;
      }

      .landing-hero-carousel .carousel-control-next {
        left: 62px;
      }

      .landing-section,
      .landing-tests,
      .landing-manuals,
      .landing-contact {
        scroll-margin-top: 150px;
      }

      .landing-tests-steps,
      .landing-tests-result-grid {
        grid-template-columns: 1fr;
      }

      .landing-preview-test-summary {
        grid-template-columns: 1fr;
      }

      .landing-preview-test-summary span {
        min-height: 0;
      }

      .landing-preview-test-list span {
        grid-template-columns: 1fr auto;
      }

      .landing-preview-test-list small {
        grid-column: 1 / -1;
      }

      .landing-footer {
        align-items: flex-start;
        grid-template-columns: 1fr;
      }

      .shot-sidebar {
        padding: 16px 10px;
      }

      .shot-sidebar strong,
      .shot-sidebar small {
        display: none;
      }

      .shot-main {
        padding: 16px;
      }

      .shot-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-list-item {
        align-items: flex-start;
        flex-direction: column;
      }

      .login-page {
        padding: 14px;
      }

      .login-shell {
        border-radius: 18px;
      }

      .login-hero {
        text-align: left;
      }

      .login-logo {
        margin-left: 0;
        margin-right: 0;
      }

      .login-hero h1 {
        font-size: 1.85rem;
      }

      .login-panel {
        padding: 28px 22px;
      }

      .compare-panel .table-responsive {
        display: none;
      }

      .compare-panel .section-title {
        align-items: flex-start;
        flex-direction: column;
      }

      .compare-panel .section-title .d-flex {
        width: 100%;
        flex-direction: column;
      }

      .compare-cards {
        display: block;
      }

      .compare-showcase {
        grid-template-columns: 1fr;
      }

      .vs-badge {
        width: 100%;
        min-height: 38px;
      }

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

      .compare-param {
        font-size: .92rem;
      }

      .compare-result {
        justify-self: stretch;
      }

      .sensor-grid {
        grid-template-columns: 1fr;
      }

      .sensor-reading {
        grid-template-columns: minmax(82px, .68fr) minmax(0, 1fr);
      }

      .settings-grid {
        grid-template-columns: 1fr;
      }

      .permission-grid {
        grid-template-columns: 1fr;
      }

      .preference-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
      }

      .preference-actions {
        width: 100%;
        justify-content: stretch;
      }

      .preference-actions .btn {
        width: 100%;
      }

      .appearance-preview {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .appearance-preview-actions {
        justify-content: stretch;
      }

      .appearance-preview-actions .btn,
      .appearance-hover-sample,
      .appearance-gradient-sample {
        width: 100%;
      }

      .account-photo-row {
        align-items: stretch;
        flex-direction: column;
      }

      .favorite-card,
      .favorite-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .favorite-actions .btn,
      .favorite-actions form {
        width: 100%;
      }

      .settings-preview {
        position: static;
      }

      .import-review-toolbar,
      .import-status-group,
      .import-review-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .import-review-actions .btn {
        width: 100%;
      }

      .working-notice {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
      }

      .parameter-group-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 991.98px) {
      .sidebar.mobile-sidebar-open {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
      }
    }

    @media print {
      @page {
        margin: 12mm;
      }

      .sidebar,
      .topbar,
      .app-footer,
      .no-print,
      .page-transition {
        display: none !important;
      }

      body,
      body[data-theme="dark"] {
        --ink: #0f172a;
        --muted: #475569;
        --line: #cbd5e1;
        --panel: #ffffff;
        --canvas: #ffffff;
        --field: #ffffff;
        background: #fff !important;
        color: #0f172a !important;
        font-size: 10.5pt;
      }

      .app-shell {
        display: block;
      }

      .main,
      .page-wrap {
        display: block;
        margin: 0;
        max-width: none;
        padding: 0;
      }

      .content-panel,
      .tests-report-panel {
        border: 0;
        box-shadow: none;
        padding: 0;
      }

      .tests-hero,
      .search-panel {
        display: none !important;
      }

      .tests-print-header {
        align-items: flex-start;
        border-bottom: 2px solid #0f172a;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10mm;
        padding-bottom: 5mm;
      }

      .tests-print-header strong,
      .tests-print-header span {
        display: block;
      }

      .tests-print-header strong {
        color: #0f172a;
        font-size: 15pt;
        font-weight: 900;
        line-height: 1.1;
      }

      .tests-print-header span,
      .tests-print-header small {
        color: #475569;
        font-size: 9pt;
        font-weight: 700;
      }

      .tests-report-head {
        border-bottom: 1px solid #cbd5e1;
        display: block;
        margin-bottom: 5mm;
        padding-bottom: 4mm;
      }

      .tests-report-head h2 {
        font-size: 16pt;
        line-height: 1.15;
        margin: 4mm 0 2mm;
      }

      .tests-report-head p {
        font-size: 9pt;
        line-height: 1.35;
      }

      .tests-summary {
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        display: grid;
        gap: 0;
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 5mm;
        overflow: hidden;
      }

      .tests-summary .status-pill {
        background: #fff !important;
        border: 0;
        border-right: 1px solid #cbd5e1;
        border-radius: 0;
        color: #0f172a !important;
        justify-content: center;
        padding: 7px 8px;
      }

      .tests-summary .status-pill:last-child {
        border-right: 0;
      }

      .tests-meta-grid {
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 5mm;
      }

      .tests-meta-grid label,
      .tests-notes {
        gap: 2px;
      }

      .tests-meta-grid span,
      .tests-notes span {
        color: #475569;
        font-size: 7.5pt;
      }

      .tests-meta-grid .form-control,
      .tests-notes .form-control {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
        color: #0f172a !important;
        font-size: 9pt;
        min-height: 0;
        padding: 2px 0 4px;
      }

      .tests-notes {
        margin-top: 5mm;
      }

      .tests-notes textarea {
        min-height: 24mm;
      }

      .tests-groups {
        gap: 5mm;
      }

      .test-group {
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        overflow: hidden;
      }

      .test-group:not(:has(.test-row[data-test-status="ok"], .test-row[data-test-status="alert"])) {
        display: none;
      }

      .test-group-head {
        background: #f8fafc !important;
        border-left-width: 0;
        border-bottom: 1px solid #cbd5e1;
        padding: 7px 9px;
      }

      .test-group-head span,
      .test-group-head small {
        color: #0f172a;
        font-size: 9pt;
      }

      .test-row {
        break-inside: avoid;
        gap: 8px;
        grid-template-columns: 1.25fr .75fr .65fr .85fr;
        padding: 6px 9px;
      }

      .test-row[data-test-status="untested"] {
        display: none;
      }

      .test-row-header {
        background: #fff !important;
        color: #475569;
        display: grid;
        font-size: 7.2pt;
        letter-spacing: 0;
        padding: 5px 9px;
      }

      .test-param strong,
      .test-expected,
      .test-status .status-pill {
        font-size: 8.5pt;
      }

      .test-param small,
      .test-status small {
        font-size: 7.5pt;
        line-height: 1.25;
        margin-top: 1px;
      }

      .test-row .form-control {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #94a3b8 !important;
        border-radius: 0 !important;
        color: #0f172a !important;
        font-size: 8.5pt;
        min-height: 0;
        padding: 0 0 2px;
      }

      .test-status .status-pill {
        background: #fff !important;
        border-radius: 999px;
        padding: 3px 7px;
      }

      .test-status .status-pill.ok {
        border: 1px solid #16a34a;
        color: #15803d !important;
      }

      .test-status .status-pill.danger {
        border: 1px solid #dc2626;
        color: #b91c1c !important;
      }

      .test-group,
      .test-row {
        break-inside: avoid;
      }

      .form-control,
      .form-select {
        border-color: #94a3b8 !important;
      }
    }