:root {
      color-scheme: light;
      --brand: #64c800;
      --brand-strong: #3f9300;
      --ink: #18212b;
      --muted: #667383;
      --line: #dde5ec;
      --soft-line: #edf1f5;
      --panel: #ffffff;
      --surface: #f5f8fa;
      --header: #20252b;
      --blue: #206fbd;
      --teal: #148c8c;
      --amber: #a96507;
      --red: #bd3b38;
      --shadow: 0 14px 30px rgba(24, 33, 43, 0.08);
      --font-cn: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      --font-data: "Outfit", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
      font-family: var(--font-data);
      font-size: 14px;
      line-height: 1.45;
      letter-spacing: 0;
    }

    * { box-sizing: border-box; }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--surface);
    }

    button, input, select { font: inherit; }

    button {
      cursor: pointer;
      letter-spacing: 0;
    }

    a {
      color: var(--blue);
      text-decoration: none;
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .icon-btn,
    .toolbar-btn,
    .primary-btn,
    .ghost-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 34px;
      border: 1px solid transparent;
      border-radius: 6px;
      white-space: nowrap;
    }

    .icon-btn {
      width: 34px;
      padding: 0;
      color: rgba(255, 255, 255, 0.86);
      background: rgba(255, 255, 255, 0.08);
    }

    .icon-btn:hover { background: rgba(255, 255, 255, 0.15); }

    .primary-btn {
      padding: 0 13px;
      color: #173400;
      border-color: #58b700;
      background: var(--brand);
      font-weight: 800;
    }

    .primary-btn:hover { background: #72d314; }

    .primary-btn:disabled,
    .ghost-btn:disabled,
    .toolbar-btn:disabled {
      opacity: 0.56;
      cursor: wait;
    }

    .ghost-btn,
    .toolbar-btn {
      padding: 0 12px;
      color: #334252;
      border-color: #ced8e1;
      background: #fff;
    }

    .toolbar-btn:hover,
    .ghost-btn:hover {
      border-color: #9eb0bf;
      background: #f8fafb;
    }

    .toolbar-btn.active {
      color: #113b05;
      border-color: #6ecb1c;
      background: #edf9e6;
      font-weight: 750;
    }

    .page {
      display: grid;
      grid-template-rows: auto 1fr;
      min-width: 0;
    }

    .workspace-head {
      position: relative;
      display: grid;
      grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      padding: 18px 22px 12px;
      color: #fff;
      background: #20252b;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 22px rgba(24, 33, 43, 0.12);
    }

    .header-auth {
      position: absolute;
      top: 8px;
      right: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      max-width: min(420px, calc(100% - 44px));
      min-width: 0;
    }

    .crumb {
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      font-size: 12px;
      white-space: nowrap;
    }

    .title-top {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .title-tools {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .language-switch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 12px;
      white-space: nowrap;
    }

    .language-select {
      height: 28px;
      max-width: 128px;
      padding: 0 26px 0 9px;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.1);
      outline: none;
    }

    .language-select option {
      color: #18212b;
      background: #fff;
    }

    .header-user {
      max-width: 260px;
      overflow: hidden;
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      line-height: 24px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .header-auth-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      padding: 0 8px;
      color: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      font: inherit;
      font-size: 12px;
      line-height: 1;
    }

    .header-auth-btn:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.34);
      background: rgba(255, 255, 255, 0.14);
    }

    .market-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 28px;
      padding: 0 8px;
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
    }

    .market-link:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.34);
      background: rgba(255, 255, 255, 0.14);
    }

    .demo-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      padding: 2px 7px;
      border: 1px solid rgba(250, 176, 5, 0.45);
      border-radius: 999px;
      color: #6f4300;
      background: #fff2b8;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .title-row {
      display: grid;
      gap: 4px;
      align-items: start;
      min-width: 0;
      overflow: visible;
    }

    h1 {
      margin: 0;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 800;
      white-space: normal;
    }

    .headline-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .headline-row .market-link {
      margin-left: auto;
      flex-shrink: 0;
    }

    .subhead {
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .summary-strip {
      display: grid;
      grid-template-columns: repeat(8, minmax(72px, 1fr));
      gap: 6px;
      min-width: 0;
      width: 100%;
    }

    .metric {
      min-height: 52px;
      padding: 8px 9px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.08);
    }

    .metric span {
      display: block;
      color: rgba(255, 255, 255, 0.64);
      font-size: 11px;
      line-height: 1.15;
      white-space: nowrap;
    }

    .metric strong {
      display: block;
      margin-top: 2px;
      color: #fff;
      font-size: 18px;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .content-grid {
      display: grid;
      grid-template-columns: 282px minmax(520px, 1fr);
      gap: 14px;
      min-height: calc(100vh - 136px);
      padding: 14px;
    }

    .content-grid.detail-open {
      grid-template-columns: 282px minmax(520px, 1fr) 354px;
    }

    .panel {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .filter-panel {
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
    }

    .panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 48px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
    }

    .panel-title strong { font-size: 14px; }

    .filter-close-btn {
      display: none;
      width: 30px;
      height: 30px;
      min-height: 30px;
      border: 1px solid #ced8e1;
      border-radius: 6px;
      color: #637181;
      background: #fff;
      font-size: 18px;
      line-height: 1;
      font-weight: 800;
    }

    .count {
      padding: 2px 7px;
      border-radius: 999px;
      color: var(--teal);
      background: #e7f5f3;
      font-size: 12px;
      font-weight: 800;
    }

    .filter-body {
      overflow: auto;
      padding: 12px 14px 4px;
    }

    .field { margin-bottom: 14px; }

    .field label,
    .filter-label {
      display: block;
      margin-bottom: 6px;
      color: #475565;
      font-size: 12px;
      font-weight: 750;
    }

    .input,
    .select {
      width: 100%;
      height: 36px;
      border: 1px solid #cfd9e2;
      border-radius: 6px;
      padding: 0 10px;
      color: var(--ink);
      background: #fff;
      outline: none;
    }

    .input:focus,
    .select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(32, 111, 189, 0.12);
    }

    .chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .chip-grid.compact .chip {
      flex: 1 1 calc(50% - 6px);
      padding-inline: 8px;
    }

    .chip {
      min-height: 30px;
      border: 1px solid #d8e1e8;
      border-radius: 999px;
      padding: 5px 10px;
      color: #344455;
      background: #fff;
      font-size: 12px;
    }

    .chip.active {
      color: #133d07;
      border-color: rgba(100, 200, 0, 0.55);
      background: #ecfadf;
      font-weight: 750;
    }

    .advanced-filters {
      display: none;
      gap: 10px;
    }

    .advanced-filters.visible {
      display: grid;
    }

    .range-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
    }

    .date-field {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .eta-range-row {
      gap: 14px;
      grid-template-columns: repeat(2, minmax(0, min(112px, calc((100% - 14px) / 2))));
      justify-content: end;
    }

    .eta-range-row .date-field {
      width: 100%;
    }

    .eta-range-row .input {
      min-width: 0;
      padding-inline: 8px;
    }

    .date-label {
      color: #5a6877;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.2;
    }

    .suggestion-menu {
      position: absolute;
      z-index: 20;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      display: none;
      max-height: 260px;
      overflow: auto;
      border: 1px solid #cfd9e2;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(31, 45, 61, 0.16);
    }

    .suggestion-menu.open { display: block; }

    .suggestion-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      width: 100%;
      min-height: 38px;
      border: 0;
      border-bottom: 1px solid #edf1f4;
      padding: 8px 10px;
      color: #223140;
      background: #fff;
      text-align: left;
    }

    .suggestion-item:hover {
      background: #f4f8fb;
    }

    .suggestion-item span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 750;
    }

    .suggestion-item em {
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      white-space: nowrap;
    }

    .tag-list,
    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag-chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border: 1px solid #d8e1e8;
      border-radius: 999px;
      padding: 3px 8px;
      color: #344455;
      background: #fff;
      font-size: 12px;
      font-weight: 750;
    }

    button.tag-chip:hover {
      border-color: var(--brand-strong);
      color: #173400;
      background: #edf9e6;
    }

    .tag-chip.active {
      color: #133d07;
      border-color: rgba(100, 200, 0, 0.55);
      background: #ecfadf;
    }

    .filter-footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 2px 0 14px;
    }

    .note {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfd;
      padding: 10px;
      color: #4a5968;
      font-size: 12px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .note.error {
      color: var(--red);
      background: #fff5f3;
      border-color: #efb4ad;
    }

    .action-status {
      display: grid;
      gap: 4px;
      margin-bottom: 8px;
      border: 1px solid #c9d9eb;
      border-radius: 8px;
      padding: 10px;
      color: #24486b;
      background: #f4f9ff;
      font-size: 12px;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .action-status strong {
      display: block;
      color: #1d568b;
      font-size: 13px;
    }

    .action-status.success {
      color: #234f16;
      border-color: #b7dfa1;
      background: #f2fbec;
    }

    .action-status.success strong { color: #28670c; }

    .action-status.error {
      color: var(--red);
      border-color: #efb4ad;
      background: #fff5f3;
      box-shadow: inset 4px 0 0 var(--red);
    }

    .action-status.error strong { color: var(--red); }

    .action-status.billing {
      color: #7a2e00;
      border-color: #e4a23a;
      background: #fff8e6;
      box-shadow: inset 4px 0 0 #d97706;
    }

    .action-status.billing strong { color: #9a3412; }

    .action-status .mail-detail {
      margin-top: 6px;
      border-top: 1px solid rgba(36, 72, 107, 0.18);
      padding-top: 7px;
      color: #34495e;
      white-space: pre-wrap;
      max-height: 260px;
      overflow: auto;
    }

    .list-panel {
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
      overflow: hidden;
    }

    @media (min-width: 921px) {
      .list-panel.market-scroll-mode {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: calc(100dvh - 164px);
        min-height: 420px;
      }
    }

    .list-panel.usage-mode .search-box,
    .list-panel.login-log-mode .search-box,
    .list-panel.usage-mode #sortLabel,
    .list-panel.login-log-mode #sortLabel,
    .list-panel.usage-mode #enrichBtn2,
    .list-panel.login-log-mode #enrichBtn2,
    .list-panel.usage-mode #syncBtn2,
    .list-panel.login-log-mode #syncBtn2,
    .list-panel.usage-mode #privateDeployLink,
    .list-panel.usage-mode #downloadLink,
    .list-panel.usage-mode #legacyVersionLink {
      display: none;
    }

    .list-panel.login-log-mode #privateDeployLink,
    .list-panel.login-log-mode #downloadLink,
    .list-panel.login-log-mode #legacyVersionLink {
      display: none;
    }

    .list-panel.usage-mode .table-wrap,
    .list-panel.usage-mode .pagination,
    .list-panel.usage-mode .destination-progress,
    .list-panel.usage-mode .usage-summary-grid,
    .list-panel.usage-mode #billingPanel,
    .list-panel.login-log-mode .destination-progress,
    .list-panel.login-log-mode .usage-summary-grid,
    .list-panel.login-log-mode #billingPanel {
      display: none;
    }

    .list-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    .search-box { position: relative; }

    .search-box .input { padding-left: 34px; }

    .search-box::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      width: 13px;
      height: 13px;
      border: 2px solid #7c8997;
      border-radius: 50%;
      transform: translateY(-55%);
    }

    .search-box::after {
      content: "";
      position: absolute;
      left: 24px;
      top: 24px;
      width: 7px;
      height: 2px;
      border-radius: 2px;
      background: #7c8997;
      transform: rotate(45deg);
    }

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

    .toolbar-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      border: 1px solid #e3b341;
      border-radius: 8px;
      padding: 0 11px;
      color: #173400;
      background: #fff3bf;
      box-shadow: 0 1px 0 rgba(138, 91, 0, 0.12);
      font-size: 12px;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
    }

    .toolbar-link:hover {
      border-color: #c99000;
      color: #0f2a00;
      background: #ffe28a;
      text-decoration: none;
    }

    .toolbar-link.legacy-link {
      border-color: #bdd0e5;
      color: #1b4f7b;
      background: #edf6ff;
      box-shadow: 0 1px 0 rgba(46, 93, 138, 0.1);
    }

    .toolbar-link.legacy-link:hover {
      border-color: #83a9cc;
      color: #123c60;
      background: #dceeff;
    }

    .toolbar-link.download-link {
      border-color: #b9dcc3;
      color: #236037;
      background: #eefaf1;
      box-shadow: 0 1px 0 rgba(37, 114, 58, 0.1);
    }

    .toolbar-link.download-link:hover {
      border-color: #7fc08e;
      color: #174728;
      background: #dcf3e2;
    }

    .tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfd;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar { display: none; }

    .usage-toolbar {
      display: grid;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .subscription-console {
      --subscription-console-header-offset: 56px;
      display: grid;
      gap: 10px;
      min-height: calc(100vh - 260px);
    }

    .subscription-console-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid #dbe6cf;
      border-radius: 8px;
      background: #fbfdf7;
    }

    .subscription-console-title {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .subscription-console-title strong {
      color: #263a1b;
      font-size: 13px;
    }

    .subscription-console-title span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .subscription-console-frame-wrap {
      width: 100%;
      height: calc(100vh - 330px);
      min-height: 570px;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .subscription-console-frame {
      display: block;
      width: 100%;
      height: calc(100% + var(--subscription-console-header-offset));
      border: 0;
      background: #fff;
      transform: translateY(calc(-1 * var(--subscription-console-header-offset)));
    }

    .usage-filter-row {
      display: grid;
      grid-template-columns: 140px 150px 150px 150px auto;
      gap: 8px;
      align-items: center;
    }

    .usage-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
      gap: 8px;
    }

    .usage-card {
      min-height: 54px;
      padding: 8px 10px;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      background: #f8fafb;
    }

    .usage-card span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .usage-card strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.1;
    }

    .billing-panel {
      display: grid;
      gap: 10px;
      border: 1px solid #dbe6cf;
      border-radius: 8px;
      padding: 10px;
      background: #fbfdf7;
    }

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

    .billing-head strong {
      color: #263a1b;
      font-size: 13px;
    }

    .billing-actions,
    .account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .terms-link {
      color: #1e5f9e;
      font-weight: 850;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .terms-link:hover {
      color: #143e69;
    }

    .account-setup-toggle {
      display: flex;
      justify-content: flex-end;
      margin: 0;
    }

    .billing-grid,
    .account-setup-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: end;
    }

    .billing-grid.compact {
      grid-template-columns: minmax(160px, 1.3fr) minmax(110px, 0.8fr) minmax(140px, 1fr) auto;
    }

    .billing-plan-tabs {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      gap: 4px;
      border: 1px solid #dbe6cf;
      border-radius: 999px;
      padding: 4px;
      background: #f2f8eb;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .billing-plan-tabs::-webkit-scrollbar { display: none; }

    .billing-plan-tab {
      border: 0;
      border-radius: 999px;
      padding: 7px 12px;
      color: #516248;
      background: transparent;
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .billing-plan-tab.active {
      color: #17240f;
      background: #fff;
      box-shadow: 0 1px 3px rgba(34, 52, 24, .12);
    }

    .billing-plan-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 8px;
    }

    .billing-output,
    .account-setup-output {
      min-height: 34px;
      border: 1px dashed #c9d7ba;
      border-radius: 8px;
      padding: 8px 10px;
      color: #3f5134;
      background: #fff;
      font-size: 12px;
      line-height: 1.55;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .billing-package-list,
    .billing-order-list,
    .invoice-list {
      display: grid;
      gap: 6px;
    }

    .billing-package-row,
    .billing-plan-card,
    .billing-order-row,
    .invoice-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      font-size: 12px;
    }

    .billing-plan-card {
      align-content: start;
      min-height: 208px;
      grid-template-columns: 1fr;
    }

    .billing-plan-card.recommended {
      border-color: #b9db83;
      box-shadow: 0 0 0 1px rgba(149, 201, 72, .3);
    }

    .billing-plan-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .billing-plan-name {
      display: block;
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
    }

    .billing-plan-price {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 8px;
      color: #15220f;
      font-size: 22px;
      font-weight: 950;
      line-height: 1.05;
    }

    .billing-plan-original {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      text-decoration: line-through;
    }

    .billing-plan-desc {
      min-height: 32px;
      margin-top: 8px;
      color: var(--muted);
      line-height: 1.45;
    }

    .billing-plan-features {
      display: grid;
      gap: 4px;
      margin: 8px 0 0;
      padding: 0;
      color: #53624d;
      list-style: none;
      font-size: 11px;
      line-height: 1.35;
    }

    .billing-plan-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }

    .billing-package-row strong,
    .billing-order-row strong,
    .invoice-row strong {
      display: block;
      color: var(--ink);
      font-size: 13px;
    }

    .billing-package-row span,
    .billing-order-row span,
    .invoice-row span {
      color: var(--muted);
    }

    .billing-subhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 2px;
      color: #405238;
      font-size: 12px;
      font-weight: 850;
    }

    .billing-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .billing-metric {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid #dbe6cf;
      border-radius: 999px;
      padding: 3px 7px;
      background: #fbfdf7;
      color: #405238;
      font-size: 11px;
      font-weight: 750;
      white-space: nowrap;
    }

    .invoice-form-panel {
      display: grid;
      gap: 8px;
      border: 1px solid #dbe6cf;
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }

    .invoice-form-panel.hidden {
      display: none;
    }

    .account-setup-box {
      display: grid;
      gap: 10px;
      border: 1px solid #d8e7cb;
      border-radius: 8px;
      padding: 10px;
      background: #f8fcf3;
    }

    .secret-once {
      font-family: Consolas, "SFMono-Regular", monospace;
      min-height: 72px;
      resize: vertical;
    }

    table,
    .row-title,
    .row-sub,
    .cell-text,
    .laycan-text,
    .score,
    .count,
    .metric strong,
    .subhead,
    .page-status,
    .page-select,
    .page-btn,
    .usage-card strong,
    .billing-plan-price,
    .billing-metric,
    .info-item strong,
    .detail-title,
    #detailScore,
    #detailScoreLabel,
    #routeLabel,
    #mailSubject,
    .mail-body,
    .contact-card,
    .tag-chip,
    .pill,
    .enrich-icon,
    .detail-score,
    .route-label,
    .suggestion-item,
    .subscription-console-title span,
    .billing-output,
    .account-setup-output {
      font-family: var(--font-data);
      font-variant-numeric: tabular-nums;
    }

    .tab {
      position: relative;
      min-height: 40px;
      border: 0;
      padding: 0 14px;
      color: var(--muted);
      background: transparent;
      font-weight: 750;
      white-space: nowrap;
    }

    .tab.active { color: var(--ink); }

    .tab.active::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 0;
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: var(--brand);
    }

    .table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      min-height: 0;
      cursor: grab;
      scrollbar-gutter: stable;
      touch-action: pan-y;
    }

    .table-wrap.dragging {
      cursor: grabbing;
      user-select: none;
    }

    .table-wrap.dragging * {
      cursor: grabbing !important;
    }

    .destination-progress {
      display: none;
      margin: 0 0 10px;
      padding: 10px 12px;
      border: 1px solid #dfe8dd;
      border-radius: 8px;
      background: #f7fbf4;
      color: #314233;
    }

    .destination-progress.visible {
      display: block;
    }

    .destination-progress-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .destination-progress-row span:last-child {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .destination-progress-track {
      position: relative;
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: #e1eadf;
    }

    .destination-progress-bar {
      position: absolute;
      inset: 0 auto 0 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), #80b94f);
      animation: destination-progress-slide 1.25s ease-in-out infinite;
    }

    table {
      width: 100%;
      min-width: 1080px;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .content-grid.detail-open .table-wrap,
    .content-grid.detail-open .table-wrap.destination-mode {
      overflow-x: auto;
      overflow-y: auto;
    }

    .content-grid.detail-open table,
    .content-grid.detail-open table.usage-table,
    .content-grid.detail-open table.destination-table {
      min-width: 1080px;
      width: 100%;
      max-width: none;
      table-layout: fixed;
    }

    th,
    td {
      border-bottom: 1px solid var(--soft-line);
      padding: 10px 10px;
      text-align: left;
      vertical-align: middle;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: #637181;
      background: #f8fafb;
      font-size: 12px;
      font-weight: 800;
    }

    tbody tr {
      background: #fff;
      cursor: pointer;
    }

    tbody tr:hover { background: #f6faf4; }

    tbody tr.selected {
      background: #eef8e8;
      box-shadow: inset 3px 0 0 var(--brand);
    }

    .type-cell { width: 70px; }
    .type-wide-cell { width: 120px; }
    .route-cell { width: 235px; }
    .main-cell { width: 165px; }
    .key-cell { width: 235px; }
    .laycan-cell { width: 118px; }
    .source-cell { width: 180px; }
    .score-cell { width: 58px; }
    .score-wide-cell { width: 96px; }
    .unknown-parsed-cell { width: 156px; min-width: 156px; }
    .unknown-length-cell { width: 92px; min-width: 92px; }
    .unknown-status-cell { width: 126px; min-width: 126px; }
    .action-cell { width: 85px; }

    table[data-table-view="unknown"] {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      table-layout: fixed;
    }

    table[data-table-view="unknown"] .unknown-subject-cell { width: 20%; }
    table[data-table-view="unknown"] .unknown-source-cell { width: 14%; }
    table[data-table-view="unknown"] .unknown-result-cell { width: 23%; }
    table[data-table-view="unknown"] .unknown-parsed-cell { width: 15%; min-width: 0; }
    table[data-table-view="unknown"] .unknown-length-cell { width: 10%; min-width: 0; }
    table[data-table-view="unknown"] .unknown-status-cell { width: 12%; min-width: 0; }
    table[data-table-view="unknown"] .unknown-action-cell { width: 6%; }

    .content-grid.detail-open table[data-table-view="unknown"] {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      table-layout: fixed;
    }

    table.usage-table {
      min-width: 980px;
    }

    table.usage-table th,
    table.usage-table td {
      padding-left: 10px;
      padding-right: 10px;
    }

    .usage-time-cell { width: 136px; }
    .usage-service-cell { width: 148px; }
    .usage-op-cell { width: 112px; }
    .usage-endpoint-cell { width: 252px; }
    .usage-points-cell { width: 92px; }
    .usage-count-cell { width: 86px; }
    .usage-status-cell { width: 86px; }
    .usage-note-cell { width: 168px; }

    .table-wrap.destination-mode {
      overflow-x: hidden;
    }

    table.destination-table {
      min-width: 0;
      width: 100%;
      table-layout: fixed;
    }

    table.destination-table th,
    table.destination-table td {
      padding: 8px 8px;
    }

    .destination-ship-cell { width: 22%; }
    .destination-type-cell { width: 15%; }
    .destination-dwt-cell { width: 11%; }
    .destination-port-cell { width: 16%; }
    .destination-eta-cell { width: 17%; }
    .destination-dist-cell { width: 9%; }
    .destination-contact-cell { width: 10%; }

    tbody td:first-child .pill {
      justify-content: center;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.25;
      text-align: center;
    }

    .row-title,
    .cell-text {
      display: block;
      font-weight: 800;
      color: #1e2b38;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cell-text {
      font-weight: 700;
    }

    .laycan-text {
      display: block;
      color: #1e2b38;
      font-weight: 750;
      line-height: 1.35;
      white-space: normal;
      overflow: visible;
      overflow-wrap: anywhere;
    }

    .row-sub {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .enrich-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
    }

    .enrich-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 24px;
      border: 1px solid #d7e1e8;
      border-radius: 6px;
      color: #708090;
      background: #f5f7f8;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      cursor: help;
      user-select: none;
    }

    .enrich-icon.done {
      color: #114d2b;
      border-color: #aad6bb;
      background: #e7f6eb;
    }

    .enrich-icon.pending {
      color: #7a5b16;
      border-color: #ead49c;
      background: #fff7db;
    }

    .enrich-icon.na {
      color: #8b98a5;
      border-color: #dbe3e8;
      background: #f1f4f6;
    }

    .hover-tooltip {
      position: fixed;
      z-index: 9999;
      max-width: min(420px, calc(100vw - 32px));
      padding: 9px 10px;
      border: 1px solid rgba(27, 39, 52, .12);
      border-radius: 7px;
      color: #f8fafc;
      background: rgba(27, 39, 52, .94);
      box-shadow: 0 12px 28px rgba(16, 24, 35, .22);
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-line;
      overflow-wrap: anywhere;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .12s ease, transform .12s ease;
    }

    .hover-tooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      max-width: 100%;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .pill.ship {
      color: #0c5960;
      background: #e2f4f4;
    }

    .pill.cargo {
      color: #7a4400;
      background: #fff0d9;
    }

    .pill.match {
      color: #174f91;
      background: #eaf2ff;
    }

    .pill.destination {
      color: #155a48;
      background: #e4f5ef;
    }

    .pill.alert {
      color: #8a2825;
      background: #fde8e7;
    }

    .pill.unknown {
      color: #5c4a08;
      background: #fff6cf;
    }

    .pill.failed {
      color: #8a2825;
      background: #fde8e7;
    }

    .mail-body {
      max-height: 320px;
      overflow: auto;
      margin-top: 8px;
      padding: 10px;
      border: 1px solid var(--soft-line);
      border-radius: 6px;
      background: #f8fafb;
      color: #334252;
      font-size: 12px;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .contact-list {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }

    .contact-card {
      display: grid;
      gap: 4px;
      padding: 9px 10px;
      border: 1px solid var(--soft-line);
      border-radius: 6px;
      background: #f8fafb;
      color: #344455;
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .contact-card strong {
      color: var(--ink);
      font-size: 13px;
    }

    .contact-card em {
      color: var(--muted);
      font-style: normal;
    }

    .score {
      display: inline-grid;
      place-items: center;
      min-width: 38px;
      height: 28px;
      border-radius: 6px;
      color: #113b05;
      background: #eaf8df;
      font-weight: 850;
    }

    .text-btn {
      border: 0;
      padding: 0;
      color: var(--blue);
      background: transparent;
      font-weight: 800;
    }

    .text-btn:disabled {
      color: var(--muted);
      cursor: wait;
    }

    .empty-table {
      height: 240px;
      color: var(--muted);
      text-align: center;
      cursor: default;
    }

    .empty-table td {
      border-bottom: 0;
      font-size: 13px;
    }

    .pagination {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 48px;
      padding: 8px 14px;
      border-top: 1px solid var(--line);
      background: #fbfcfd;
    }

    .page-status {
      color: var(--muted);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .page-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .page-select {
      width: auto;
      min-width: 108px;
      height: 32px;
      border: 1px solid #cfd9e2;
      border-radius: 6px;
      color: var(--ink);
      background: #fff;
      padding: 0 8px;
    }

    .page-btn {
      min-width: 34px;
      height: 32px;
      border: 1px solid #cfd9e2;
      border-radius: 6px;
      color: #334252;
      background: #fff;
      padding: 0 10px;
    }

    .page-btn:hover:not(:disabled) {
      border-color: var(--brand-strong);
      color: #173400;
      background: #edf9e6;
    }

    .page-btn:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }

    .detail-panel {
      display: none;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }

    .content-grid.detail-open .detail-panel {
      display: grid;
    }

    .detail-head {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfd;
    }

    .detail-kicker {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

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

    .detail-close {
      width: 28px;
      height: 28px;
      min-height: 28px;
      border: 1px solid #ced8e1;
      border-radius: 6px;
      color: #637181;
      background: #fff;
      font-size: 18px;
      line-height: 1;
      font-weight: 700;
    }

    .detail-close:hover {
      color: #173400;
      border-color: var(--brand-strong);
      background: #edf9e6;
    }

    .detail-title {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .confidence {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .bar {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: #e2e8ee;
    }

    .bar span {
      display: block;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--brand), var(--teal));
      transition: width 0.2s ease;
    }

    .detail-body {
      overflow: auto;
      padding: 14px;
    }

    .route-asset {
      position: relative;
      height: 150px;
      overflow: hidden;
      border: 1px solid #d7e0e8;
      border-radius: 8px;
      background:
        linear-gradient(125deg, rgba(20, 140, 140, 0.15), rgba(100, 200, 0, 0.08)),
        radial-gradient(circle at 23% 46%, rgba(32, 111, 189, 0.24), transparent 14%),
        radial-gradient(circle at 72% 58%, rgba(100, 200, 0, 0.24), transparent 11%),
        #e9f1f4;
    }

    .route-asset::before,
    .route-asset::after {
      content: "";
      position: absolute;
      border-radius: 999px;
    }

    .route-asset::before {
      left: 42px;
      right: 48px;
      top: 72px;
      height: 3px;
      background: repeating-linear-gradient(90deg, var(--blue) 0 15px, transparent 15px 24px);
      transform: rotate(-8deg);
    }

    .route-asset::after {
      right: 42px;
      top: 54px;
      width: 12px;
      height: 12px;
      border: 4px solid #fff;
      background: var(--brand);
      box-shadow: 0 0 0 2px var(--brand-strong), -182px 34px 0 -2px #fff, -182px 34px 0 2px var(--blue);
    }

    .route-label {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 10px;
      padding: 6px 8px;
      border: 1px solid rgba(24, 33, 43, 0.08);
      border-radius: 6px;
      color: #243241;
      background: rgba(255, 255, 255, 0.84);
      font-size: 12px;
      backdrop-filter: blur(6px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin: 12px 0;
    }
    .public-contact-action { margin: 12px 0 18px; }

    .info-item {
      min-height: 58px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .info-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .info-item strong {
      display: block;
      margin-top: 2px;
      overflow-wrap: anywhere;
    }

    .section-title {
      margin: 16px 0 8px;
      color: #334252;
      font-size: 13px;
      font-weight: 850;
    }

    .mail-card,
    .task-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }

    .mail-card p {
      margin: 6px 0 0;
      color: #4a5968;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .task-list {
      display: grid;
      gap: 8px;
    }

    .task-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 9px;
      align-items: center;
      font-size: 13px;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--brand);
    }

    .dot.amber { background: #d89018; }
    .dot.blue { background: var(--blue); }

    .bottom-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .bottom-actions button {
      min-width: 0;
      min-height: 32px;
      padding-inline: 8px;
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.25;
    }

    .bottom-actions #watchBtn {
      justify-self: stretch;
      min-width: 0;
      max-width: none;
      width: 100%;
    }

    .bottom-actions #openMailboxBtn {
      grid-column: span 2;
    }

    .bottom-actions button:disabled {
      color: #8d98a4;
      border-color: #d8e0e7;
      background: #eef2f5;
      cursor: not-allowed;
      opacity: 0.86;
    }

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

    .hidden { display: none !important; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(15, 23, 32, 0.48);
    }

    .settings-modal {
      width: min(980px, 100%);
      max-height: min(86vh, 820px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 24px 64px rgba(12, 22, 33, 0.28);
      overflow: hidden;
    }

    .settings-head,
    .settings-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }

    .settings-footer {
      border-top: 1px solid var(--line);
      border-bottom: 0;
    }

    .settings-head h2 {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
    }

    .settings-body {
      overflow: auto;
      padding: 14px 16px;
      background: #fbfcfd;
    }

    .settings-section {
      margin-bottom: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .settings-section h3 {
      margin: 0;
      padding: 10px 12px;
      border-bottom: 1px solid var(--soft-line);
      font-size: 14px;
    }

    .settings-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--soft-line);
    }

    .settings-section-head h3 {
      flex: 1 1 auto;
      padding: 0;
      border-bottom: 0;
    }

    .settings-section-head .account-setup-toggle {
      flex: 0 0 auto;
    }

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

    .settings-grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-field {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .settings-field label {
      color: #475565;
      font-size: 12px;
      font-weight: 800;
    }

    .settings-hint {
      color: #7b8794;
      font-size: 12px;
      line-height: 1.35;
    }

    .settings-field textarea {
      min-height: 86px;
      resize: vertical;
      padding: 9px 10px;
      line-height: 1.45;
    }

    .settings-field.full {
      grid-column: 1 / -1;
    }

    .settings-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .settings-label-row label {
      min-width: 0;
    }

    .folder-fetch-btn {
      flex: 0 0 auto;
      padding: 6px 9px;
      font-size: 12px;
      line-height: 1;
    }

    .mailbox-folder-picker {
      display: grid;
      gap: 6px;
      max-height: 172px;
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      background: #f8fafb;
    }

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

    .mailbox-folder-choice {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      padding: 6px 8px;
      border: 1px solid #dce4eb;
      border-radius: 7px;
      background: #fff;
      color: #263443;
      font-size: 12px;
      line-height: 1.25;
    }

    .mailbox-folder-choice span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mailbox-folder-choice.disabled {
      color: #98a3ad;
      background: #eef2f5;
    }

    .email-accounts-block {
      padding: 0 12px 12px;
    }

    .email-accounts-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .email-accounts-title {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .email-accounts-title strong {
      color: #243242;
      font-size: 13px;
      line-height: 1.25;
    }

    .email-accounts-list {
      display: grid;
      gap: 10px;
    }

    .email-account-row {
      display: grid;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--soft-line);
    }

    .email-account-row:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .email-account-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .email-account-head strong {
      color: #344455;
      font-size: 13px;
    }

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

    .user-admin-block {
      display: grid;
      gap: 12px;
      padding: 12px;
    }

    .user-admin-form,
    .user-admin-row {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1.1fr 1fr 0.72fr 0.72fr auto;
      gap: 8px;
      align-items: end;
    }

    .user-admin-row {
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid var(--soft-line);
    }

    .user-admin-row:first-child {
      padding-top: 0;
      border-top: 0;
    }

    .user-admin-row .row-actions {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .user-admin-list {
      display: grid;
      gap: 10px;
    }

    .user-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .login-log-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .login-log-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      background: rgba(255,255,255,0.72);
    }

    .login-log-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      font-size: 12px;
    }

    .login-log-table th,
    .login-log-table td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--soft-line);
      text-align: left;
      vertical-align: top;
    }

    .login-log-table th {
      color: #536274;
      font-weight: 800;
      background: rgba(246,248,242,0.92);
    }

    .login-log-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .login-log-result {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 800;
      white-space: nowrap;
    }

    .login-log-result.success {
      color: #1d5c2f;
      background: rgba(64,145,91,0.13);
    }

    .login-log-result.failed {
      color: #a33a2b;
      background: rgba(191,81,65,0.12);
    }

    .toggle-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      color: #344455;
      font-size: 13px;
      font-weight: 750;
    }

    .settings-status {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .settings-status.error { color: var(--red); }
    .settings-status.success { color: var(--brand-strong); }

    .spinner {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid rgba(23, 52, 0, 0.28);
      border-top-color: #173400;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    @keyframes destination-progress-slide {
      0% { transform: translateX(-115%); }
      55% { transform: translateX(120%); }
      100% { transform: translateX(240%); }
    }

    @media (max-width: 1240px) {
      .content-grid {
        grid-template-columns: 258px minmax(500px, 1fr);
      }

      .content-grid.detail-open {
        grid-template-columns: 238px minmax(320px, 1fr) 300px;
      }

      .detail-panel {
        grid-column: 1 / -1;
      }

      .content-grid.detail-open .detail-panel {
        grid-column: auto;
      }

      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow-x: hidden;
      }

      .content-grid.detail-open table,
      .content-grid.detail-open table.usage-table,
      .content-grid.detail-open table.destination-table {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
      }

      .content-grid.detail-open .type-cell,
      .content-grid.detail-open .type-wide-cell {
        width: 78px;
      }

      .content-grid.detail-open .route-cell,
      .content-grid.detail-open .main-cell,
      .content-grid.detail-open .key-cell {
        width: auto;
      }

      .content-grid.detail-open .laycan-cell {
        width: 118px;
      }

      .content-grid.detail-open th,
      .content-grid.detail-open td {
        overflow: hidden;
      }

      .content-grid.detail-open table[data-table-view="items"] th:nth-child(3),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="items"] th:nth-child(4),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(4),
      .content-grid.detail-open table[data-table-view="items"] th:nth-child(6),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="items"] th:nth-child(7),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="items"] th:nth-child(8),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(8),
      .content-grid.detail-open table[data-table-view="openvessel"] th:nth-child(2),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="openvessel"] th:nth-child(3),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="openvessel"] th:nth-child(5),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="openvessel"] th:nth-child(6),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="openvessel"] th:nth-child(7),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="cargo"] th:nth-child(2),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="cargo"] th:nth-child(3),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="cargo"] th:nth-child(5),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="cargo"] th:nth-child(6),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="cargo"] th:nth-child(7),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="public_openvessel"] th:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_openvessel"] th:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_openvessel"] th:nth-child(5),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="public_openvessel"] th:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_openvessel"] th:nth-child(7),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="public_cargo"] th:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_cargo"] th:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_cargo"] th:nth-child(5),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="public_cargo"] th:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_cargo"] th:nth-child(7),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(7) {
        display: none;
      }
    }

    @media (max-width: 1180px) {
      .workspace-head {
        grid-template-columns: 1fr;
        align-items: start;
      }
    }

    @media (max-width: 920px) {
      .workspace-head {
        grid-template-columns: 1fr;
        padding: 14px;
      }

      .title-row {
        gap: 4px;
      }

      .summary-strip {
        min-width: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .content-grid {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 10px;
      }

      .content-grid.detail-open {
        grid-template-columns: 1fr;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed;
        top: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 9200;
        display: grid;
        width: min(400px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        border-radius: 12px;
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .content-grid.detail-open .detail-panel .detail-body {
        min-height: 0;
        max-height: none;
      }

      .content-grid.detail-open .list-panel {
        width: calc(100vw - 444px);
        min-width: 0;
        max-width: 100%;
      }

      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow: visible;
      }

      .content-grid.detail-open table,
      .content-grid.detail-open table.usage-table,
      .content-grid.detail-open table.destination-table {
        min-width: 0;
        width: 100%;
        table-layout: auto;
      }

      .content-grid.detail-open table thead {
        display: none;
      }

      .content-grid.detail-open table,
      .content-grid.detail-open tbody,
      .content-grid.detail-open tr,
      .content-grid.detail-open td {
        display: block;
      }

      .content-grid.detail-open tbody {
        padding: 6px 8px;
      }

      .content-grid.detail-open tbody tr {
        margin-bottom: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(24, 33, 43, 0.06);
      }

      .content-grid.detail-open tbody tr.selected {
        box-shadow: inset 3px 0 0 var(--brand), 0 8px 20px rgba(24, 33, 43, 0.06);
      }

      .content-grid.detail-open th,
      .content-grid.detail-open td,
      .content-grid.detail-open table.destination-table th,
      .content-grid.detail-open table.destination-table td,
      .content-grid.detail-open table.usage-table th,
      .content-grid.detail-open table.usage-table td {
        padding: 0;
      }

      .content-grid.detail-open td {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        min-height: 34px;
        padding: 7px 9px;
        border-bottom: 1px solid var(--soft-line);
      }

      .content-grid.detail-open td:last-child {
        border-bottom: 0;
      }

      .content-grid.detail-open td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 850;
        line-height: 1.35;
      }

      .content-grid.detail-open td > * {
        grid-column: 2;
        min-width: 0;
      }

      .content-grid.detail-open .empty-table td {
        display: block;
        padding: 18px 12px;
        text-align: center;
      }

      .content-grid.detail-open .empty-table td::before {
        display: none;
      }

      .content-grid.detail-open table[data-table-view="items"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(4),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(8),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(5),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(7) {
        display: none;
      }

      .filter-panel { display: none; }
      .filter-panel.open { display: grid; }
      .mobile-filter-toggle { display: inline-flex; }

      .list-toolbar { grid-template-columns: 1fr; }

      .toolbar-group {
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .subscription-console {
        min-height: 640px;
      }

      .subscription-console-head {
        align-items: stretch;
        flex-direction: column;
      }

      .subscription-console-frame-wrap {
        height: 560px;
        min-height: 560px;
      }

      .subscription-console-frame {
        height: calc(100% + var(--subscription-console-header-offset));
      }

      .pagination {
        grid-template-columns: 1fr;
      }

      .page-controls {
        justify-content: space-between;
      }

      .email-account-grid {
        grid-template-columns: 1fr;
      }

      .user-admin-form,
      .user-admin-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .user-admin-row .row-actions {
        justify-content: flex-start;
      }

      .billing-grid,
      .billing-grid.compact,
      .account-setup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      table { min-width: 760px; }
    }

    @media (max-width: 560px) {
      body { font-size: 13px; }

      h1 { font-size: 19px; }

      .info-grid,
      .bottom-actions,
      .billing-grid,
      .billing-grid.compact,
      .account-setup-grid {
        grid-template-columns: 1fr;
      }

      .metric { min-height: 52px; }
      .content-grid { gap: 10px; }

      .panel-title,
      .list-toolbar,
      .detail-head,
      .detail-body {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    @media (max-width: 700px) {
      html,
      body {
        width: 100%;
        overflow-x: hidden;
      }

      body {
        background: #fff;
      }

      .app-shell {
        min-width: 0;
      }

      .workspace-head {
        gap: 8px;
        padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
      }

      .header-auth {
        position: static;
        justify-self: end;
        width: 100%;
        max-width: 100%;
        order: -1;
        min-height: 24px;
        gap: 6px;
      }

      .header-user {
        max-width: min(62vw, 230px);
        line-height: 22px;
      }

      .header-auth-btn {
        height: 22px;
        padding-inline: 7px;
      }

      .title-top {
        align-items: center;
        gap: 8px;
      }

      .crumb {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
      }

      .title-tools {
        gap: 6px;
        margin-left: auto;
      }

      .language-switch > span {
        display: none;
      }

      .language-select {
        height: 26px;
        max-width: 108px;
      }

      .headline-row {
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
      }

      .market-link {
        height: 24px;
        padding-inline: 7px;
      }

      .subhead {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .summary-strip {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
      }

      .summary-strip::-webkit-scrollbar {
        display: none;
      }

      .metric {
        flex: 0 0 90px;
        min-height: 42px;
        padding: 6px 7px;
      }

      .metric strong {
        font-size: 15px;
      }

      .content-grid {
        gap: 8px;
        padding: 6px 8px 8px;
      }

      .list-panel {
        border-radius: 8px;
      }

      .filter-panel.open {
        position: fixed;
        inset: 10px;
        z-index: 9000;
        display: grid;
        max-height: calc(100dvh - 20px);
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .filter-panel.open .panel-title {
        min-height: 44px;
        background: #fff;
      }

      .filter-panel.open .filter-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .filter-panel.open .filter-body {
        padding-bottom: 12px;
      }

      .list-toolbar {
        gap: 7px;
        padding: 8px;
      }

      .search-box .input {
        height: 34px;
      }

      .toolbar-group {
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }

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

      .toolbar-group > * {
        flex: 0 0 auto;
      }

      .toolbar-btn,
      .primary-btn,
      .ghost-btn,
      .toolbar-link {
        min-height: 32px;
      }

      .tabs {
        gap: 4px;
        padding: 0 8px;
      }

      .tab {
        min-height: 34px;
        padding: 0 9px;
        font-size: 12px;
      }

      .usage-toolbar,
      .pagination {
        padding-left: 10px;
        padding-right: 10px;
      }

      .usage-filter-row {
        grid-template-columns: 1fr;
      }

      .subscription-console {
        min-height: 560px;
      }

      .subscription-console-frame-wrap {
        height: 520px;
        min-height: 520px;
      }

      .table-wrap,
      .table-wrap.destination-mode {
        overflow: visible;
      }

      table,
      table.usage-table,
      table.destination-table {
        min-width: 0;
        width: 100%;
        table-layout: auto;
      }

      table thead {
        display: none;
      }

      table,
      tbody,
      tr,
      td {
        display: block;
      }

      tbody {
        padding: 6px 8px;
      }

      tbody tr {
        margin-bottom: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(24, 33, 43, 0.06);
      }

      tbody tr.selected {
        box-shadow: inset 3px 0 0 var(--brand), 0 8px 20px rgba(24, 33, 43, 0.06);
      }

      th,
      td,
      table.destination-table th,
      table.destination-table td,
      table.usage-table th,
      table.usage-table td {
        padding: 0;
      }

      td {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        border-bottom: 1px solid var(--soft-line);
        padding: 7px 9px;
        min-height: 34px;
      }

      td:last-child {
        border-bottom: 0;
      }

      td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 850;
        line-height: 1.35;
      }

      td > * {
        grid-column: 2;
        min-width: 0;
      }

      tbody td:first-child .pill {
        width: 100%;
        min-height: 23px;
        padding-inline: 6px;
      }

      .empty-table td {
        display: block;
        padding: 18px 12px;
        text-align: center;
      }

      .empty-table td::before {
        display: none;
      }

      .row-title,
      .cell-text,
      .row-sub {
        max-width: 100%;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        line-height: 1.32;
      }

      .row-title,
      .cell-text {
        -webkit-line-clamp: 2;
      }

      td:nth-child(2) .row-title,
      td:nth-child(3) .row-title,
      td:nth-child(4) .row-title {
        -webkit-line-clamp: 1;
      }

      .row-sub {
        -webkit-line-clamp: 1;
      }

      table[data-table-view="items"] td:nth-child(4) .row-sub,
      table[data-table-view="openvessel"] td:nth-child(3) .row-sub,
      table[data-table-view="cargo"] td:nth-child(3) .row-sub,
      table[data-table-view="public_openvessel"] td:nth-child(3) .row-sub,
      table[data-table-view="public_cargo"] td:nth-child(3) .row-sub,
      table[data-table-view="matches"] td:nth-child(3) .row-sub {
        -webkit-line-clamp: 1;
      }

      table[data-table-view="items"] td:nth-child(6),
      table[data-table-view="items"] td:nth-child(8),
      table[data-table-view="openvessel"] td:nth-child(5),
      table[data-table-view="openvessel"] td:nth-child(7),
      table[data-table-view="cargo"] td:nth-child(5),
      table[data-table-view="cargo"] td:nth-child(7),
      table[data-table-view="public_openvessel"] td:nth-child(5),
      table[data-table-view="public_openvessel"] td:nth-child(7),
      table[data-table-view="public_cargo"] td:nth-child(5),
      table[data-table-view="public_cargo"] td:nth-child(7) {
        display: none;
      }

      .pagination {
        gap: 7px;
        min-height: 0;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
      }

      .page-controls {
        display: grid;
        grid-template-columns: 1fr repeat(4, minmax(0, auto));
        gap: 6px;
        align-items: center;
      }

      .page-select {
        grid-column: auto;
        width: 100%;
        min-width: 88px;
      }

      .page-btn {
        width: 100%;
        min-width: 0;
        padding-inline: 7px;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9200;
        display: grid;
        width: auto;
        max-height: 42dvh;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -18px 60px rgba(12, 22, 33, 0.32);
      }

      .content-grid.detail-open .list-panel {
        width: auto;
        max-width: 100%;
        height: calc(58dvh - 18px);
        max-height: calc(58dvh - 18px);
        overflow: hidden;
      }

      .content-grid.detail-open {
        padding-bottom: calc(42dvh + 8px);
      }

      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .content-grid.detail-open table[data-table-view="items"] td:nth-child(4),
      .content-grid.detail-open table[data-table-view="items"] td:nth-child(7),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(6),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(6) {
        display: none;
      }

      .detail-head {
        gap: 9px;
        padding: 12px;
      }

      .detail-title {
        font-size: 16px;
      }

      .detail-body {
        max-height: calc(42dvh - 110px);
        padding: 12px;
      }

      .route-asset {
        height: 96px;
      }

      .task-row {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .task-row .ghost-btn,
      .task-row .primary-btn {
        grid-column: 2;
        justify-self: start;
      }

      .bottom-actions #openMailboxBtn,
      .bottom-actions button {
        grid-column: auto;
      }

      .bottom-actions {
        grid-template-columns: 1fr;
      }

      .modal-backdrop {
        place-items: stretch;
        padding: 0;
      }

      .settings-modal {
        width: 100%;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
      }

      .settings-head,
      .settings-footer {
        padding: 10px 12px;
      }

      .settings-body {
        padding: 10px;
      }

      .settings-grid,
      .settings-grid.two,
      .email-account-grid,
      .mailbox-folder-grid,
      .billing-grid,
      .billing-grid.compact,
      .account-setup-grid,
      .user-admin-form,
      .user-admin-row {
        grid-template-columns: 1fr;
      }

      .user-admin-row .row-actions {
        justify-content: flex-start;
      }
    }

    @media (min-width: 561px) and (max-width: 700px) {
      .content-grid.detail-open {
        padding-bottom: 6px;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed;
        top: 10px;
        left: auto;
        right: 10px;
        bottom: 10px;
        width: min(340px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        border-radius: 12px;
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .content-grid.detail-open .list-panel {
        width: calc(100vw - 374px);
        height: auto;
        max-height: none;
      }

      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow: visible;
      }

      .content-grid.detail-open .detail-body {
        max-height: none;
      }
    }

    @media (min-width: 431px) and (max-width: 560px) {
      .content-grid.detail-open {
        padding-bottom: 6px;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed;
        top: 10px;
        left: auto;
        right: 10px;
        bottom: 10px;
        width: min(280px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        border-radius: 12px;
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .content-grid.detail-open .list-panel {
        width: calc(100vw - 314px);
        height: auto;
        max-height: none;
      }

      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow: visible;
      }

      .content-grid.detail-open .detail-body {
        max-height: none;
      }
    }

    @media (min-width: 361px) and (max-width: 430px) {
      .content-grid.detail-open {
        padding-bottom: 6px;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed;
        top: 10px;
        left: auto;
        right: 10px;
        bottom: 10px;
        width: min(210px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        border-radius: 12px;
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .content-grid.detail-open .list-panel {
        width: calc(100vw - 244px);
        height: auto;
        max-height: none;
      }

      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow: visible;
      }

      .content-grid.detail-open .detail-body {
        max-height: none;
      }
    }

    @media (max-width: 360px) {
      .content-grid.detail-open .detail-panel {
        max-height: 38dvh;
      }

      .content-grid.detail-open {
        padding-bottom: calc(38dvh + 8px);
      }

      .content-grid.detail-open .detail-body {
        max-height: calc(38dvh - 110px);
      }

      .content-grid.detail-open table[data-table-view="items"] td:nth-child(3),
      .content-grid.detail-open table[data-table-view="openvessel"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="cargo"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_openvessel"] td:nth-child(2),
      .content-grid.detail-open table[data-table-view="public_cargo"] td:nth-child(2) {
        display: none;
      }
    }

    @media (min-width: 701px) {
      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow-x: auto !important;
        overflow-y: hidden !important;
      }

      .content-grid.detail-open table,
      .content-grid.detail-open table.usage-table,
      .content-grid.detail-open table.destination-table {
        display: table !important;
        min-width: 1080px !important;
        width: 100% !important;
        max-width: none !important;
        table-layout: fixed !important;
      }

      .content-grid.detail-open thead {
        display: table-header-group !important;
      }

      .content-grid.detail-open tbody {
        display: table-row-group !important;
        padding: 0 !important;
      }

      .content-grid.detail-open tr {
        display: table-row !important;
      }

      .content-grid.detail-open th,
      .content-grid.detail-open td {
        display: table-cell !important;
        padding: 10px 10px !important;
      }

      .content-grid.detail-open td::before {
        content: none !important;
        display: none !important;
      }

      .content-grid.detail-open tbody tr {
        margin-bottom: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      .content-grid.detail-open tbody tr.selected {
        background: #eef8e8 !important;
        box-shadow: inset 3px 0 0 var(--brand) !important;
      }
    }

    /* HiFleet Market inspired visual refresh */
    :root {
      --brand: #2c65b7;
      --brand-strong: #1f4f91;
      --ink: #22334c;
      --muted: #718098;
      --line: #e0e7ef;
      --soft-line: #edf1f5;
      --panel: #ffffff;
      --surface: #f5f7fa;
      --header: #142c50;
      --blue: #2c65b7;
      --teal: #398472;
      --amber: #be9652;
      --red: #a75d49;
      --mint: #b9d7ff;
      --shadow: 0 10px 30px rgba(19, 31, 48, 0.08);
    }

    body {
      background:
        linear-gradient(180deg, rgba(20, 44, 80, 0.03), rgba(20, 44, 80, 0) 210px),
        var(--surface);
      font-family: var(--font-data);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: var(--brand); }

    .workspace-head {
      grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
      gap: 24px;
      min-height: 118px;
      padding: 18px 22px 16px;
      background: var(--header);
      border-bottom: 1px solid rgba(185, 215, 255, 0.16);
      box-shadow: none;
    }

    .workspace-head::before {
      content: "";
      position: absolute;
      inset: auto 22px 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .header-auth {
      top: 10px;
      right: 22px;
    }

    .crumb {
      color: #aeb8c6;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.9px;
      text-transform: uppercase;
    }

    .title-top {
      gap: 18px;
    }

    .headline-row {
      justify-content: flex-start;
      gap: 12px;
    }

    h1 {
      color: #f4f7fb;
      font-size: 28px;
      font-weight: 650;
      letter-spacing: 0;
    }

    .demo-badge {
      border-radius: 4px;
      border-color: rgba(185, 215, 255, 0.36);
      color: var(--mint);
      background: rgba(185, 215, 255, 0.1);
      font-size: 11px;
      font-weight: 600;
    }

    .subhead {
      max-width: 620px;
      color: #aeb8c6;
      font-size: 12px;
      line-height: 1.65;
    }

    .title-tools,
    .top-actions {
      gap: 10px;
    }

    .language-switch {
      gap: 8px;
      color: #aeb8c6;
      font-size: 11px;
    }

    .language-select {
      height: 30px;
      border-color: #424c5a;
      border-radius: 5px;
      color: #eef4fb;
      background: rgba(255, 255, 255, 0.06);
    }

    .language-select:hover,
    .language-select:focus {
      border-color: rgba(185, 215, 255, 0.58);
      box-shadow: 0 0 0 2px rgba(185, 215, 255, 0.12);
    }

    .market-link,
    .header-auth-btn,
    .icon-btn {
      border-color: #424c5a;
      border-radius: 5px;
      color: #ced7e2;
      background: rgba(255, 255, 255, 0.06);
    }

    .market-link:hover,
    .header-auth-btn:hover,
    .icon-btn:hover {
      color: #fff;
      border-color: rgba(185, 215, 255, 0.5);
      background: rgba(185, 215, 255, 0.1);
    }

    .headline-row .market-link {
      margin-left: 0;
    }

    .summary-strip {
      grid-template-columns: repeat(8, minmax(82px, 1fr));
      gap: 8px;
      padding-top: 8px;
    }

    .metric {
      min-height: 64px;
      padding: 10px 12px;
      border-color: rgba(185, 215, 255, 0.18);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.07);
    }

    .metric:first-child {
      background: rgba(185, 215, 255, 0.14);
      border-color: rgba(185, 215, 255, 0.26);
    }

    .metric span {
      color: #aeb8c6;
      font-size: 10px;
      font-weight: 500;
    }

    .metric strong {
      margin-top: 6px;
      color: #f7fbff;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.4px;
    }

    .content-grid {
      grid-template-columns: 294px minmax(560px, 1fr);
      gap: 18px;
      padding: 14px;
      min-height: calc(100vh - 118px);
    }

    .content-grid.detail-open {
      grid-template-columns: 294px minmax(560px, 1fr) 370px;
    }

    .panel {
      border-color: var(--line);
      border-radius: 7px;
      box-shadow: none;
    }

    .panel-title {
      min-height: 54px;
      padding: 0 18px;
      border-bottom-color: var(--line);
      background: #fff;
    }

    .panel-title strong {
      color: #334252;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: 0.2px;
    }

    .count {
      border: 1px solid #dbe2eb;
      border-radius: 4px;
      color: #607089;
      background: #f7f9fb;
      font-size: 10px;
      font-weight: 600;
    }

    .filter-body {
      padding: 16px 18px 6px;
    }

    .field {
      margin-bottom: 17px;
    }

    .field label,
    .filter-label {
      margin-bottom: 7px;
      color: #6f7b8a;
      font-size: 11px;
      font-weight: 600;
    }

    .input,
    .select {
      height: 36px;
      border-color: #dfe3e8;
      border-radius: 4px;
      color: #344455;
      background: #fff;
    }

    .input:hover,
    .select:hover {
      border-color: #c6d1dd;
    }

    .input:focus,
    .select:focus {
      border-color: #91afda;
      box-shadow: 0 0 0 3px rgba(44, 101, 183, 0.12);
    }

    .chip-grid {
      gap: 4px;
      padding: 3px;
      border-radius: 5px;
      background: #f2f3f5;
    }

    .chip {
      min-height: 31px;
      border: 0;
      border-radius: 4px;
      color: #7d8794;
      background: transparent;
      font-size: 11px;
      font-weight: 500;
    }

    .chip:hover {
      color: var(--brand);
      background: rgba(255, 255, 255, 0.72);
    }

    .chip.active {
      color: var(--brand);
      background: #fff;
      box-shadow: 0 1px 4px rgba(33, 49, 72, 0.08);
      font-weight: 650;
    }

    .tag-cloud,
    .tag-list {
      gap: 5px;
    }

    .tag-chip {
      min-height: 25px;
      border-color: #dfe3e8;
      border-radius: 4px;
      color: #657284;
      background: #fff;
      font-size: 11px;
      font-weight: 600;
    }

    button.tag-chip:hover,
    .tag-chip.active {
      color: var(--brand);
      border-color: #91afda;
      background: #edf4fe;
    }

    .filter-footer {
      gap: 9px;
      margin: 4px 0 18px;
    }

    .primary-btn,
    .ghost-btn,
    .toolbar-btn,
    .page-btn,
    .toolbar-link {
      border-radius: 5px;
      font-weight: 600;
    }

    .primary-btn {
      color: #f4f7fb;
      border-color: var(--header);
      background: var(--header);
    }

    .primary-btn:hover {
      border-color: #28374b;
      background: #28374b;
    }

    .ghost-btn,
    .toolbar-btn,
    .page-btn {
      color: #46566a;
      border-color: #dfe3e8;
      background: #fff;
    }

    .ghost-btn:hover,
    .toolbar-btn:hover,
    .page-btn:hover {
      color: var(--brand);
      border-color: #c6d5e8;
      background: #f3f7fc;
    }

    .toolbar-btn.active {
      color: var(--brand);
      border-color: #91afda;
      background: #edf4fe;
      font-weight: 650;
    }

    .toolbar-link {
      min-height: 34px;
      border-color: #e0d3a6;
      color: #745714;
      background: #fff7d8;
    }

    .toolbar-link:hover {
      color: #5e470d;
      border-color: #c9ad55;
      background: #fff1b8;
    }

    .toolbar-link.download-link,
    .toolbar-link.legacy-link {
      border-color: #dfe3e8;
      color: #46566a;
      background: #fff;
    }

    .toolbar-link.download-link:hover,
    .toolbar-link.legacy-link:hover {
      color: var(--brand);
      border-color: #c6d5e8;
      background: #f3f7fc;
    }

    .note,
    .action-status,
    .destination-progress {
      border-radius: 6px;
      background: #f9fafb;
      box-shadow: none;
    }

    .note {
      border-color: #e3e8ef;
      color: #607089;
      font-size: 11px;
    }

    .note.error,
    .action-status.error {
      color: #9f513f;
      border-color: #e8c5bd;
      background: #fff7f5;
    }

    .action-status {
      border-color: #c8d9ee;
      color: #2d527a;
      background: #f4f8fe;
    }

    .action-status strong {
      color: #245d9c;
      font-weight: 650;
    }

    .action-status.success {
      color: #356d4a;
      border-color: #c7dfcd;
      background: #f3faf5;
    }

    .list-panel {
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    }

    .list-toolbar {
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 14px;
      padding: 16px 18px;
      border-bottom-color: var(--line);
      background: #fff;
    }

    .search-box::before {
      border-color: #8b97a6;
    }

    .search-box::after {
      background: #8b97a6;
    }

    .toolbar-group {
      gap: 7px;
    }

    .tabs {
      gap: 29px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .tab {
      min-height: 50px;
      padding: 0;
      color: #838b95;
      font-size: 12px;
      font-weight: 500;
    }

    .tab:hover {
      color: var(--brand);
    }

    .tab.active {
      color: var(--brand);
      font-weight: 650;
    }

    .tab.active::after {
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 0;
      background: var(--brand);
    }

    .table-wrap {
      background: #fff;
      scrollbar-color: #aeb9c8 #eef2f6;
    }

    table {
      color: #2f3d4f;
    }

    th,
    td {
      border-bottom-color: #edeff1;
      padding: 12px 14px;
    }

    th {
      color: #818790;
      background: #eff1f3;
      font-size: 11px;
      font-weight: 500;
    }

    tbody tr:hover {
      background: #f8fafc;
    }

    tbody tr.selected {
      background: #edf4fe;
      box-shadow: inset 3px 0 0 var(--brand);
    }

    .row-title,
    .cell-text {
      color: #26364b;
      font-weight: 650;
    }

    .row-sub {
      color: #7d8794;
      font-size: 11px;
    }

    .pill {
      border-radius: 4px;
      font-weight: 650;
    }

    .pill.cargo {
      color: #2f6d49;
      border-color: #bfdfca;
      background: #f0faf3;
    }

    .pill.vessel,
    .pill.openvessel {
      color: #245d9c;
      border-color: #c5d7ef;
      background: #edf4fe;
    }

    .pill.public,
    .pill.destination {
      color: #75571a;
      border-color: #e7d4a6;
      background: #fff7df;
    }

    .enrich-icon {
      border-radius: 4px;
      border-color: #dfe3e8;
      color: #657284;
      background: #fff;
    }

    .enrich-icon.done {
      color: var(--brand);
      border-color: #bdd2ef;
      background: #edf4fe;
    }

    .pagination {
      min-height: 52px;
      padding: 12px 18px;
      border-top-color: var(--line);
      background: #fff;
    }

    .page-status,
    .page-select {
      color: #7d8794;
      font-size: 11px;
    }

    .detail-panel {
      border-color: var(--line);
      background: #fff;
    }

    .detail-head {
      border-bottom-color: var(--line);
      background: #fff;
    }

    .detail-kicker {
      color: var(--brand);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

    .detail-title {
      color: #2d3d52;
      font-size: 18px;
      font-weight: 650;
    }

    .detail-close {
      border-radius: 5px;
      border-color: #dfe3e8;
      color: #7d8794;
      background: #fff;
    }

    .detail-close:hover {
      color: var(--brand);
      border-color: #c6d5e8;
      background: #f3f7fc;
    }

    .confidence {
      color: #778292;
      font-size: 11px;
    }

    .bar {
      background: #eef1f5;
    }

    .bar span {
      background: var(--brand);
    }

    .detail-body {
      background: #fff;
    }

    .route-asset,
    .mail-card,
    .contact-card,
    .info-item {
      border-radius: 6px;
      border-color: #e1e6ed;
      background: #f9fafb;
      box-shadow: none;
    }

    .route-asset {
      background:
        linear-gradient(135deg, rgba(44, 101, 183, 0.08), rgba(185, 215, 255, 0.12)),
        #f7f9fc;
    }

    .section-title {
      color: #6f7b8a;
      font-size: 10px;
      letter-spacing: 1.3px;
      text-transform: uppercase;
    }

    .mail-card strong,
    .info-item strong,
    .contact-card strong {
      color: #2d3d52;
      font-weight: 650;
    }

    .bottom-actions {
      gap: 8px;
    }

    .usage-card,
    .billing-panel,
    .billing-plan-card,
    .invoice-form-panel,
    .subscription-console {
      border-color: var(--line);
      border-radius: 7px;
      box-shadow: none;
    }

    .usage-card {
      background: #fff;
    }

    .usage-card strong,
    .billing-plan-price,
    .billing-metric strong {
      color: #2d3d52;
      font-weight: 600;
    }

    .suggestion-menu {
      border-color: var(--line);
      border-radius: 6px;
      box-shadow: 0 10px 30px rgba(19, 31, 48, 0.12);
    }

    .suggestion-item:hover {
      background: #f3f7fc;
    }

    .hover-tooltip {
      border-color: #d6deea;
      border-radius: 6px;
      box-shadow: 0 12px 34px rgba(19, 31, 48, 0.18);
    }

    @media (max-width: 1200px) {
      .workspace-head {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 30px;
      }

      .summary-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .workspace-head {
        min-height: auto;
        padding: 18px 14px 14px;
      }

      .header-auth {
        right: 14px;
      }

      h1 {
        font-size: 24px;
      }

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

      .metric {
        min-height: 62px;
      }

      .content-grid,
      .content-grid.detail-open {
        padding: 12px;
        gap: 12px;
      }

      .list-toolbar {
        padding: 12px;
      }

      .tabs {
        gap: 22px;
        padding: 0 12px;
      }

      th,
      td,
      .content-grid.detail-open th,
      .content-grid.detail-open td {
        padding: 10px 12px !important;
      }
    }

    @media (min-width: 701px) {
      .content-grid.detail-open {
        grid-template-columns: 284px minmax(570px, 1fr) 370px;
      }

      .content-grid:not(.detail-open) .table-wrap,
      .content-grid:not(.detail-open) .table-wrap.destination-mode,
      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow-x: hidden !important;
      }

      .content-grid:not(.detail-open) table,
      .content-grid:not(.detail-open) table.destination-table,
      .content-grid.detail-open table,
      .content-grid.detail-open table.usage-table,
      .content-grid.detail-open table.destination-table {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
      }

      .content-grid:not(.detail-open) .type-cell,
      .content-grid:not(.detail-open) .type-wide-cell {
        width: 7% !important;
      }

      .content-grid:not(.detail-open) .route-cell {
        width: 22% !important;
      }

      .content-grid:not(.detail-open) .main-cell {
        width: 16% !important;
      }

      .content-grid:not(.detail-open) .key-cell {
        width: 22% !important;
      }

      .content-grid:not(.detail-open) table[data-table-view="openvessel"] .route-cell {
        width: 20% !important;
      }

      .content-grid:not(.detail-open) table[data-table-view="openvessel"] .key-cell {
        width: 24% !important;
      }

      .content-grid.detail-open table[data-table-view="openvessel"] .route-cell {
        width: 210px !important;
      }

      .content-grid.detail-open table[data-table-view="openvessel"] .key-cell {
        width: 260px !important;
      }

      .content-grid:not(.detail-open) .laycan-cell {
        width: 11% !important;
      }

      .content-grid:not(.detail-open) .score-cell,
      .content-grid:not(.detail-open) .score-wide-cell {
        width: 5% !important;
      }

      .content-grid:not(.detail-open) .source-cell {
        width: 12% !important;
      }

      .content-grid:not(.detail-open) .action-cell {
        width: 5% !important;
      }

      .content-grid:not(.detail-open) .usage-time-cell {
        width: 14% !important;
      }

      .content-grid:not(.detail-open) .usage-service-cell {
        width: 14% !important;
      }

      .content-grid:not(.detail-open) .usage-op-cell {
        width: 11% !important;
      }

      .content-grid:not(.detail-open) .usage-endpoint-cell {
        width: 23% !important;
      }

      .content-grid:not(.detail-open) .usage-points-cell {
        width: 9% !important;
      }

      .content-grid:not(.detail-open) .usage-count-cell {
        width: 9% !important;
      }

      .content-grid:not(.detail-open) .usage-status-cell {
        width: 8% !important;
      }

      .content-grid:not(.detail-open) .usage-note-cell {
        width: 12% !important;
      }
    }

    @media (min-width: 921px) {
      .content-grid.detail-open .table-wrap {
        overflow-x: auto !important;
      }

      .content-grid.detail-open table[data-table-view="items"],
      .content-grid.detail-open table[data-table-view="openvessel"],
      .content-grid.detail-open table[data-table-view="cargo"],
      .content-grid.detail-open table[data-table-view="public_openvessel"],
      .content-grid.detail-open table[data-table-view="public_cargo"] {
        min-width: 1200px !important;
        max-width: none !important;
      }

      .content-grid.detail-open table[data-table-view="items"] {
        min-width: 1360px !important;
      }

      .content-grid.detail-open table[data-table-view="items"] .type-cell {
        width: 144px !important;
      }

      .content-grid.detail-open table[data-table-view="items"] tbody td:first-child .pill {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
      }

      .content-grid.detail-open table[data-table-view="watchlist"] .type-cell {
        width: 144px !important;
      }

      .content-grid.detail-open table[data-table-view="watchlist"] tbody td:first-child .pill {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
      }
    }

    .tabs {
      scrollbar-width: none !important;
      -ms-overflow-style: none;
    }

    .tabs::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none !important;
    }

    .enrich-icon {
      width: auto !important;
      min-width: 18px;
      height: auto !important;
      border-color: transparent !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #7d8794;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.1;
      text-decoration: none;
    }

    .enrich-icon.done {
      color: var(--brand) !important;
    }

    .enrich-icon.pending {
      color: var(--amber) !important;
    }

    .enrich-icon.na {
      color: #a4afba !important;
    }

    /* Mobile and tablet layout polish */
    @media (max-width: 1180px) {
      .workspace-head {
        grid-template-columns: 1fr !important;
      }

      .list-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .toolbar-group {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
      }

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

      .toolbar-group > * {
        flex: 0 0 auto;
      }
    }

    @media (min-width: 921px) and (max-width: 1180px) {
      .content-grid {
        grid-template-columns: 248px minmax(0, 1fr) !important;
        gap: 12px;
        padding: 12px;
      }

      .content-grid.detail-open {
        grid-template-columns: 248px minmax(0, 1fr) !important;
      }

      .content-grid.detail-open .list-panel {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        left: auto !important;
        z-index: 9200;
        display: grid !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 12px;
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .content-grid.detail-open .detail-body {
        max-height: calc(100dvh - 132px) !important;
        overflow: auto;
      }
    }

    @media (max-width: 920px) {
      html,
      body {
        width: 100%;
        overflow-x: hidden;
      }

      .app-shell {
        min-width: 0;
      }

      .workspace-head {
        min-height: auto !important;
        gap: 10px;
        padding: max(12px, env(safe-area-inset-top)) 12px 12px !important;
      }

      .workspace-head::before {
        left: 12px;
        right: 12px;
      }

      .header-auth {
        position: static !important;
        justify-self: stretch;
        justify-content: flex-end;
        width: 100%;
        min-height: 24px;
        gap: 6px;
        order: -1;
      }

      .header-user {
        max-width: min(64vw, 280px);
      }

      .title-top {
        align-items: flex-start;
        gap: 8px;
      }

      .title-tools {
        flex: 0 0 auto;
        margin-left: auto;
      }

      .headline-row {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }

      h1 {
        font-size: 24px;
        line-height: 1.18;
      }

      .subhead {
        max-width: 100%;
        white-space: normal;
      }

      .summary-strip {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }

      .summary-strip::-webkit-scrollbar {
        display: none;
      }

      .metric {
        flex: 0 0 118px;
        min-height: 56px;
        scroll-snap-align: start;
      }

      .content-grid,
      .content-grid.detail-open {
        grid-template-columns: 1fr !important;
        gap: 10px;
        min-height: 0;
        padding: 10px !important;
      }

      .filter-panel {
        display: none;
      }

      .filter-panel.open {
        position: fixed;
        inset: 12px;
        z-index: 9300;
        display: grid;
        max-height: calc(100dvh - 24px);
        border-radius: 12px;
        box-shadow: 0 24px 70px rgba(12, 22, 33, 0.34);
      }

      .filter-panel.open .filter-close-btn {
        display: inline-flex;
      }

      .mobile-filter-toggle {
        display: inline-flex;
      }

      .list-panel {
        min-width: 0;
        border-radius: 8px;
      }

      .list-toolbar {
        gap: 8px;
        padding: 10px;
      }

      .search-box .input {
        height: 36px;
      }

      .toolbar-btn,
      .primary-btn,
      .ghost-btn,
      .toolbar-link {
        min-height: 34px;
      }

      .tabs {
        gap: 8px;
        padding: 0 10px;
      }

      .tab {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 10px;
      }

      .table-wrap,
      .table-wrap.destination-mode,
      .content-grid.detail-open .table-wrap,
      .content-grid.detail-open .table-wrap.destination-mode {
        overflow: visible !important;
      }

      table,
      table.usage-table,
      table.destination-table,
      .content-grid.detail-open table,
      .content-grid.detail-open table.usage-table,
      .content-grid.detail-open table.destination-table {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
      }

      thead,
      .content-grid.detail-open thead {
        display: none !important;
      }

      tbody,
      .content-grid.detail-open tbody {
        display: block !important;
        padding: 6px 8px !important;
      }

      tr,
      .content-grid.detail-open tr {
        display: block !important;
      }

      tbody tr,
      .content-grid.detail-open tbody tr {
        margin-bottom: 8px !important;
        border: 1px solid var(--line) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #fff;
        box-shadow: 0 8px 20px rgba(24, 33, 43, 0.06) !important;
      }

      tbody tr.selected,
      .content-grid.detail-open tbody tr.selected {
        background: #edf4fe !important;
        box-shadow: inset 3px 0 0 var(--brand), 0 8px 20px rgba(24, 33, 43, 0.06) !important;
      }

      td,
      table.destination-table td,
      table.usage-table td,
      .content-grid.detail-open td,
      .content-grid.detail-open table.destination-table td,
      .content-grid.detail-open table.usage-table td {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 9px;
        align-items: start;
        min-height: 36px;
        padding: 8px 10px !important;
        border-bottom: 1px solid var(--soft-line);
      }

      td:last-child,
      .content-grid.detail-open td:last-child {
        border-bottom: 0;
      }

      td::before,
      .content-grid.detail-open td::before {
        content: attr(data-label) !important;
        display: block !important;
        color: var(--muted);
        font-size: 11px;
        font-weight: 750;
        line-height: 1.35;
      }

      td > *,
      .content-grid.detail-open td > * {
        grid-column: 2;
        min-width: 0;
      }

      .empty-table td,
      .content-grid.detail-open .empty-table td {
        display: block !important;
        padding: 20px 12px !important;
        text-align: center;
      }

      .empty-table td::before,
      .content-grid.detail-open .empty-table td::before {
        display: none !important;
      }

      .row-title,
      .cell-text,
      .row-sub,
      .laycan-text {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .row-title,
      .cell-text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .row-sub {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .pagination {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
      }

      .page-controls {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
      }

      .page-select,
      .page-btn {
        width: 100%;
        min-width: 0;
        padding-inline: 6px;
      }

      .content-grid.detail-open {
        padding-bottom: calc(50dvh + 12px) !important;
      }

      .content-grid.detail-open .list-panel {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
      }

      .content-grid.detail-open .detail-panel {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9200;
        display: grid !important;
        width: auto !important;
        max-height: 50dvh !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -18px 60px rgba(12, 22, 33, 0.32);
      }

      .content-grid.detail-open .detail-head {
        padding: 12px;
      }

      .content-grid.detail-open .detail-title {
        font-size: 16px;
      }

      .content-grid.detail-open .detail-body {
        max-height: calc(50dvh - 112px) !important;
        overflow: auto;
        padding: 12px;
      }

      .route-asset {
        height: 96px;
      }
    }

    @media (max-width: 560px) {
      .workspace-head {
        padding: max(10px, env(safe-area-inset-top)) 10px 10px !important;
      }

      .header-user {
        max-width: min(60vw, 220px);
      }

      h1 {
        font-size: 20px;
      }

      .demo-badge,
      .market-link {
        height: 24px;
      }

      .language-switch > span {
        display: none;
      }

      .language-select {
        max-width: 108px;
        height: 28px;
      }

      .subhead {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .metric {
        flex-basis: 98px;
        min-height: 50px;
        padding: 7px 8px;
      }

      .metric strong {
        font-size: 15px;
      }

      .content-grid,
      .content-grid.detail-open {
        padding: 8px !important;
      }

      .toolbar-group {
        gap: 6px;
      }

      .toolbar-btn,
      .primary-btn,
      .ghost-btn,
      .toolbar-link {
        min-height: 32px;
        padding-inline: 10px;
      }

      td,
      table.destination-table td,
      table.usage-table td,
      .content-grid.detail-open td,
      .content-grid.detail-open table.destination-table td,
      .content-grid.detail-open table.usage-table td {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
        padding: 7px 9px !important;
      }

      table[data-table-view="items"] td:nth-child(6),
      table[data-table-view="items"] td:nth-child(8),
      table[data-table-view="openvessel"] td:nth-child(5),
      table[data-table-view="openvessel"] td:nth-child(7),
      table[data-table-view="cargo"] td:nth-child(5),
      table[data-table-view="cargo"] td:nth-child(7),
      table[data-table-view="public_openvessel"] td:nth-child(5),
      table[data-table-view="public_openvessel"] td:nth-child(7),
      table[data-table-view="public_cargo"] td:nth-child(5),
      table[data-table-view="public_cargo"] td:nth-child(7) {
        display: none !important;
      }

      .page-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .page-select {
        grid-column: 1 / -1;
      }

      .content-grid.detail-open {
        padding-bottom: calc(58dvh + 10px) !important;
      }

      .content-grid.detail-open .detail-panel {
        max-height: 58dvh !important;
      }

      .content-grid.detail-open .detail-body {
        max-height: calc(58dvh - 108px) !important;
      }

      .bottom-actions {
        grid-template-columns: 1fr;
      }

      .modal-backdrop {
        place-items: stretch;
        padding: 0;
      }

      .settings-modal {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
      }
    }