/* ============ TOKENS ============ */
    :root {
      --bg: #F5F6F7;
      --surface: #FFFFFF;
      --surface-2: #F8F9FA;
      --surface-3: #ECEFF1;
      --border: #DEE3E7;
      --border-strong: #B9C3CC;
      --ink: #14202B;
      --ink-2: #435463;
      --muted: #71808E;
      --accent: #0E7490;
      --accent-strong: #095C73;
      --accent-soft: #E7F3F6;
      --accent-ink: #075E75;
      --success: #1B7A43;
      --success-soft: #EAF5EE;
      --warning: #A05A08;
      --warning-soft: #FBF1DE;
      --danger: #B42318;
      --danger-soft: #FCECEA;
      --info: #2456A6;
      --info-soft: #EAF0FB;
      --violet: #6D4C9F;
      --violet-soft: #F0EAF8;
      --sidebar: #FFFFFF;
      --sidebar-2: #F1F4F5;
      --sidebar-ink: #263746;
      --sidebar-dim: #758493;
      --sidebar-line: #E1E7EB;
      --scrim: rgba(18, 29, 39, .46);
      --shadow: 0 1px 2px rgba(20, 32, 43, .045);
      --shadow-pop: 0 18px 46px rgba(20, 32, 43, .18), 0 3px 10px rgba(20, 32, 43, .08);
      --radius: 9px;
      --radius-sm: 7px;
      --font: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    [data-theme="dark"] {
      --bg: #0B0F14;
      --surface: #12181F;
      --surface-2: #171F28;
      --surface-3: #202A35;
      --border: #26313D;
      --border-strong: #3A4856;
      --ink: #E9EEF2;
      --ink-2: #B7C2CC;
      --muted: #8493A1;
      --accent: #42B7D4;
      --accent-strong: #67C9DE;
      --accent-soft: #12333D;
      --accent-ink: #8ED8E9;
      --success: #58C184;
      --success-soft: #153625;
      --warning: #F2B84B;
      --warning-soft: #3A2B10;
      --danger: #F08A80;
      --danger-soft: #3B1D1A;
      --info: #8FB4F5;
      --info-soft: #1B2A46;
      --violet: #C2A8E8;
      --violet-soft: #2B2140;
      --sidebar: #10161D;
      --sidebar-2: #18212B;
      --sidebar-ink: #CBD5DE;
      --sidebar-dim: #7E8D9B;
      --sidebar-line: #24303C;
      --scrim: rgba(3, 6, 9, .62);
      --shadow: 0 1px 2px rgba(0, 0, 0, .28);
      --shadow-pop: 0 18px 46px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .35);
    }

    html {
      color-scheme: light
    }

    html[data-theme="dark"] {
      color-scheme: dark
    }

    html[data-theme="light"] {
      color-scheme: light
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      font-family: var(--font);
      background: var(--bg);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility
    }

    button {
      font-family: inherit;
      cursor: pointer
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px
    }

    input,
    select,
    textarea {
      font-family: inherit
    }

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

    svg {
      pointer-events: none
    }

    .mono {
      font-family: var(--mono);
      font-variant-numeric: tabular-nums
    }

    ::selection {
      background: var(--accent-soft);
      color: var(--accent-ink)
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border-strong);
      border-radius: 6px;
      border: 2px solid var(--bg)
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    /* ============ APP FRAME ============ */
    .app {
      display: grid;
      grid-template-columns: 252px minmax(0, 1fr);
      min-height: 100vh
    }

    /* ---- Sidebar ---- */
    .sidebar {
      background: var(--sidebar);
      color: var(--sidebar-ink);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      z-index: 40;
      border-right: 1px solid var(--sidebar-line)
    }

    .sb-brand {
      padding: 20px 18px 16px;
      border-bottom: 1px solid var(--sidebar-line);
      display: flex;
      align-items: center;
      gap: 11px
    }

    .sb-logo {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--accent);
      display: grid;
      place-items: center;
      color: #fff;
      flex: none
    }

    .sb-logo svg {
      width: 20px;
      height: 20px
    }

    .sb-brand h1 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.015em;
      line-height: 1.1
    }

    .sb-brand p {
      margin: 2px 0 0;
      font-size: 11px;
      color: var(--sidebar-dim)
    }

    .sb-nav {
      flex: 1;
      overflow-y: auto;
      padding: 12px 12px 18px
    }

    .sb-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .055em;
      text-transform: uppercase;
      color: var(--sidebar-dim);
      margin: 17px 7px 7px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .sb-label:first-child {
      margin-top: 2px
    }

    .sb-label .cnt {
      font-family: var(--mono);
      font-size: 10px;
      background: var(--sidebar-2);
      border: 1px solid var(--sidebar-line);
      padding: 1px 6px;
      border-radius: 20px;
      letter-spacing: 0;
      text-transform: none;
      color: var(--sidebar-ink)
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 36px;
      padding: 7px 9px;
      border: 0;
      background: transparent;
      color: var(--sidebar-ink);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-weight: 500;
      text-align: left;
      margin-bottom: 2px;
      transition: background .15s, color .15s
    }

    .nav-item:hover {
      background: var(--sidebar-2);
      color: var(--ink)
    }

    .nav-item.active {
      background: var(--accent-soft);
      color: var(--accent-ink);
      font-weight: 600
    }

    .nav-item svg {
      width: 17px;
      height: 17px;
      flex: none;
      color: var(--sidebar-dim)
    }

    .nav-item:hover svg {
      color: var(--ink-2)
    }

    .nav-item.active svg {
      color: var(--accent-ink)
    }

    .nav-item .mod-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-left: auto;
      flex: none;
      opacity: .72
    }

    .nav-item .badge {
      margin-left: auto;
      font-size: 10.5px;
      font-family: var(--mono);
      background: var(--sidebar-2);
      border: 1px solid var(--sidebar-line);
      color: var(--sidebar-ink);
      padding: 1px 6px;
      border-radius: 20px
    }

    .nav-item.active .badge {
      background: var(--surface);
      border-color: var(--border);
      color: var(--accent-ink)
    }

    .sb-empty {
      font-size: 12px;
      color: var(--sidebar-dim);
      padding: 7px 9px;
      line-height: 1.55
    }

    /* ---- Main column ---- */
    .main {
      min-width: 0;
      display: flex;
      flex-direction: column
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 22px;
      height: 58px
    }

    .tb-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.01em;
      white-space: nowrap
    }

    .tb-crumb {
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap
    }

    .searchbox {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      height: 40px;
      padding: 0 16px;
      min-width: 280px;
      max-width: 480px;
      flex: 1;
      color: var(--muted);
      font-size: 13.5px;
      text-align: left;
      transition: border-color .15s, box-shadow .15s, background .15s
    }

    .searchbox:hover,
    .searchbox:focus-visible {
      border-color: var(--accent);
      background: var(--surface);
      box-shadow: 0 0 0 3px var(--accent-soft);
      outline: none
    }

    .searchbox svg {
      width: 16px;
      height: 16px;
      flex: none;
      color: var(--accent-ink)
    }

    .searchbox>span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .searchbox .kbd {
      margin-left: auto;
      display: flex;
      gap: 3px;
      flex: none
    }

    .kbd kbd {
      font-family: var(--mono);
      font-size: 10px;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-bottom-width: 2px;
      border-radius: 4px;
      padding: 1px 5px;
      color: var(--ink-2)
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink-2);
      display: grid;
      place-items: center;
      position: relative;
      flex: none
    }

    .icon-btn:hover {
      background: var(--surface-2);
      color: var(--ink)
    }

    .icon-btn svg {
      width: 17px;
      height: 17px
    }

    .icon-btn .nub {
      position: absolute;
      top: -5px;
      right: -5px;
      background: var(--danger);
      color: #fff;
      font-size: 9.5px;
      font-weight: 700;
      min-width: 17px;
      height: 17px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      padding: 0 4px;
      border: 2px solid var(--surface)
    }

    .theme-ic {
      display: none
    }

    html[data-theme="light"] .theme-ic.moon {
      display: block
    }

    html[data-theme="dark"] .theme-ic.moon {
      display: none
    }

    html[data-theme="dark"] .theme-ic.sun {
      display: block
    }

    select.input,
    input.input {
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--ink);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 13px
    }

    select.input:focus,
    input.input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .tb-user {
      display: flex;
      align-items: center;
      gap: 9px;
      padding-left: 4px
    }

    .tb-user .av {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--accent-soft);
      border: 1px solid var(--border);
      color: var(--accent-ink);
      display: grid;
      place-items: center;
      font-size: 12.5px;
      font-weight: 700;
      flex: none
    }

    .tb-user b {
      font-size: 13px;
      display: block;
      line-height: 1.15
    }

    .tb-user span {
      font-size: 11.5px;
      color: var(--muted)
    }

    .menu-btn {
      display: none
    }

    /* ---- Page body ---- */
    .page {
      padding: 26px 28px 64px;
      max-width: 1560px;
      width: 100%;
      margin: 0 auto
    }

    .page-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 16px;
      margin-bottom: 20px
    }

    .page-head h2 {
      margin: 0;
      font-size: 25px;
      font-weight: 700;
      letter-spacing: -.025em;
      line-height: 1.16
    }

    .page-head .sub {
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.55;
      margin-top: 5px;
      max-width: 680px
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 8px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px;
      transition: background .15s, border-color .15s, color .15s
    }

    .btn:hover {
      background: var(--surface-2);
      border-color: var(--muted)
    }

    .btn:active {
      transform: translateY(1px)
    }

    .btn svg {
      width: 15px;
      height: 15px
    }

    .btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff
    }

    .btn.primary:hover {
      background: var(--accent-strong)
    }

    .btn.ghost {
      border-color: transparent;
      background: transparent;
      color: var(--accent-ink)
    }

    .btn.ghost:hover {
      background: var(--accent-soft)
    }

    .btn.sm {
      padding: 6px 10px;
      font-size: 12.5px
    }

    .btn.danger-ghost {
      border-color: transparent;
      background: transparent;
      color: var(--danger)
    }

    .btn.danger-ghost:hover {
      background: var(--danger-soft)
    }

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

    .btn.active-toggle {
      background: var(--accent-soft);
      color: var(--accent-ink);
      border-color: var(--accent)
    }

    /* ============ DASHBOARD GRID & WIDGETS ============ */
    .dash-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 14px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 5px 11px;
      border-radius: 20px;
      color: var(--ink-2)
    }

    .chip svg {
      width: 13px;
      height: 13px
    }

    .chip .pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success)
    }

    .chip.clickable {
      cursor: pointer
    }

    .chip.clickable:hover {
      border-color: var(--accent);
      color: var(--accent-ink)
    }

    .widget-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px
    }

    .widget {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden
    }

    .widget.flash {
      animation: flashIn .8s ease-out
    }

    @keyframes flashIn {
      0% {
        box-shadow: 0 0 0 3px var(--accent-soft)
      }

      100% {
        box-shadow: var(--shadow)
      }
    }

    .widget.span-3 {
      grid-column: span 3
    }

    .widget.span-4 {
      grid-column: span 4
    }

    .widget.span-5 {
      grid-column: span 5
    }

    .widget.span-6 {
      grid-column: span 6
    }

    .widget.span-7 {
      grid-column: span 7
    }

    .widget.span-8 {
      grid-column: span 8
    }

    .widget.span-12 {
      grid-column: span 12
    }

    .w-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 16px 9px
    }

    .w-head h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -.005em;
      color: var(--ink)
    }

    .w-head .w-tag {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .045em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 20px;
      background: var(--surface-3);
      color: var(--muted)
    }

    .w-head .w-tag.module {
      background: var(--accent-soft);
      color: var(--accent-ink)
    }

    .w-head .w-actions {
      margin-left: auto;
      display: flex;
      gap: 2px
    }

    .w-head .w-actions button {
      width: 26px;
      height: 26px;
      border: 0;
      background: transparent;
      border-radius: 6px;
      color: var(--muted);
      display: grid;
      place-items: center
    }

    .w-head .w-actions button:hover {
      background: var(--surface-3);
      color: var(--ink)
    }

    .w-head .w-actions svg {
      width: 14px;
      height: 14px
    }

    .w-body {
      padding: 2px 16px 14px;
      flex: 1
    }

    .w-foot {
      border-top: 1px solid var(--border);
      padding: 9px 16px;
      font-size: 12.5px
    }

    .w-foot button {
      border: 0;
      background: none;
      color: var(--accent-ink);
      font-weight: 600;
      font-size: 12.5px;
      padding: 0
    }

    .w-foot button:hover {
      text-decoration: underline
    }

    .editing .widget {
      outline: 1.5px dashed var(--border-strong);
      outline-offset: -1.5px
    }

    .editing .w-head {
      cursor: grab
    }

    .widget.dragging {
      opacity: .45
    }

    .widget.drop-target {
      outline: 2px solid var(--accent)
    }

    /* KPI tiles inside widgets */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
    }

    .kpi-row.c3 {
      grid-template-columns: repeat(3, 1fr)
    }

    .kpi-row.c2 {
      grid-template-columns: repeat(2, 1fr)
    }

    .kpi {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 13px;
      text-align: left;
      width: 100%;
      transition: border-color .15s, background .15s;
      font-family: inherit;
      color: var(--ink)
    }

    button.kpi:hover {
      border-color: var(--accent);
      background: var(--accent-soft)
    }

    .kpi .k-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: .03em;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px
    }

    .kpi .k-val {
      font-family: var(--mono);
      font-size: 23px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin-top: 3px;
      line-height: 1.1;
      display: block
    }

    .kpi .k-sub {
      font-size: 11.5px;
      margin-top: 3px;
      color: var(--muted);
      display: block
    }

    .kpi .k-sub b {
      font-weight: 700
    }

    .up {
      color: var(--success)
    }

    .down {
      color: var(--danger)
    }

    .warn-t {
      color: var(--warning)
    }

    /* lists */
    .feed {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .feed li {
      display: flex;
      gap: 11px;
      padding: 9px 2px;
      border-bottom: 1px solid var(--border);
      align-items: flex-start
    }

    .feed li:last-child {
      border-bottom: 0
    }

    .feed .ic {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      flex: none
    }

    .feed .ic svg {
      width: 15px;
      height: 15px
    }

    .feed .f-main {
      flex: 1;
      min-width: 0
    }

    .feed .f-title {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35
    }

    .feed .f-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 1px
    }

    .feed .f-time {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap
    }

    .sev {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 20px;
      flex: none;
      margin-top: 2px
    }

    .sev.crit {
      background: var(--danger-soft);
      color: var(--danger)
    }

    .sev.warn {
      background: var(--warning-soft);
      color: var(--warning)
    }

    .sev.info {
      background: var(--info-soft);
      color: var(--info)
    }

    .sev.ok {
      background: var(--success-soft);
      color: var(--success)
    }

    .task-check {
      width: 19px;
      height: 19px;
      border-radius: 6px;
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      flex: none;
      margin-top: 1px;
      display: grid;
      place-items: center;
      color: #fff;
      padding: 0
    }

    .task-check svg {
      width: 12px;
      height: 12px;
      opacity: 0
    }

    .task-check.done {
      background: var(--success);
      border-color: var(--success)
    }

    .task-check.done svg {
      opacity: 1
    }

    .task-done .f-title {
      text-decoration: line-through;
      color: var(--muted)
    }

    /* tables */
    .tbl-wrap {
      overflow-x: auto;
      margin: 0 -16px;
      padding: 0 16px
    }

    table.tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      min-width: 520px
    }

    .tbl th {
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .045em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      background: var(--surface-2)
    }

    .tbl td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle
    }

    .tbl tbody tr:last-child td {
      border-bottom: 0
    }

    .tbl tbody tr.clickable {
      cursor: pointer
    }

    .tbl tbody tr.clickable:hover td {
      background: var(--surface-2)
    }

    .tbl .r {
      text-align: right
    }

    .tbl .mono {
      font-size: 12.5px
    }

    /* status pills */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      padding: 2.5px 8px;
      border-radius: 20px;
      white-space: nowrap
    }

    .pill::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor
    }

    .pill.st-quoted {
      background: var(--surface-3);
      color: var(--ink-2)
    }

    .pill.st-booked {
      background: var(--info-soft);
      color: var(--info)
    }

    .pill.st-intransit {
      background: var(--accent-soft);
      color: var(--accent-ink)
    }

    .pill.st-customs {
      background: var(--violet-soft);
      color: var(--violet)
    }

    .pill.st-ofd {
      background: var(--warning-soft);
      color: var(--warning)
    }

    .pill.st-delivered {
      background: var(--success-soft);
      color: var(--success)
    }

    .pill.st-delayed {
      background: var(--danger-soft);
      color: var(--danger)
    }

    .pill.st-returned {
      background: var(--surface-3);
      color: var(--muted)
    }

    .pill.st-hold {
      background: var(--danger-soft);
      color: var(--danger)
    }

    .pill.st-filed {
      background: var(--info-soft);
      color: var(--info)
    }

    .pill.st-cleared {
      background: var(--success-soft);
      color: var(--success)
    }

    .pill.st-prep {
      background: var(--surface-3);
      color: var(--ink-2)
    }

    /* quick actions */
    .qa-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px
    }

    .qa {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: 9px;
      padding: 11px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      text-align: left;
      transition: border-color .15s, background .15s;
      font-family: inherit
    }

    .qa:hover {
      border-color: var(--accent);
      background: var(--accent-soft)
    }

    .qa .ic {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      color: var(--accent-ink);
      flex: none
    }

    .qa .ic svg {
      width: 15px;
      height: 15px
    }

    .qa small {
      display: block;
      font-weight: 500;
      color: var(--muted);
      font-size: 11.5px
    }

    /* charts */
    .chart-box {
      width: 100%
    }

    .chart-box svg {
      display: block;
      width: 100%;
      height: auto
    }

    .axis-lbl {
      font-family: var(--mono);
      font-size: 9.5px;
      fill: var(--muted)
    }

    .legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 6px
    }

    .legend i {
      width: 9px;
      height: 9px;
      border-radius: 3px;
      display: inline-block;
      margin-right: 5px;
      vertical-align: -1px
    }

    .bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 7px 0;
      font-size: 12.5px
    }

    .bar-row .bl {
      width: 118px;
      flex: none;
      color: var(--ink-2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .bar-row .bt {
      flex: 1;
      background: var(--surface-3);
      border-radius: 5px;
      height: 9px;
      overflow: hidden
    }

    .bar-row .bf {
      height: 100%;
      border-radius: 5px;
      background: var(--accent)
    }

    .bar-row .bv {
      font-family: var(--mono);
      font-size: 12px;
      width: 52px;
      text-align: right;
      flex: none
    }

    .donut-flex {
      display: grid;
      grid-template-columns: 204px minmax(0, 1fr);
      gap: 24px;
      align-items: center;
      padding: 6px 2px 2px
    }

    .donut-canvas {
      position: relative;
      width: 204px;
      height: 204px;
      flex: none;
      margin: 0 auto
    }

    .donut-canvas svg {
      display: block;
      width: 204px;
      height: 204px
    }

    .donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
      padding: 0 18px
    }

    .donut-center .dc-val {
      font-family: var(--mono);
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--ink)
    }

    .donut-center .dc-lbl {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 5px;
      line-height: 1.2
    }

    .donut-center .dc-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 3px;
      line-height: 1.3
    }

    .donut-legend {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0
    }

    .donut-legend .dl-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: 10px
    }

    .donut-legend .dl-row:hover {
      background: var(--surface)
    }

    .donut-legend .dl-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex: none;
      box-shadow: 0 0 0 3px var(--surface)
    }

    .donut-legend .dl-main {
      flex: 1;
      min-width: 0
    }

    .donut-legend .dl-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .donut-legend .dl-bar {
      height: 5px;
      background: var(--surface-3);
      border-radius: 99px;
      overflow: hidden;
      margin-top: 6px
    }

    .donut-legend .dl-bar i {
      display: block;
      height: 100%;
      border-radius: 99px
    }

    .donut-legend .dl-nums {
      text-align: right;
      flex: none;
      line-height: 1.1
    }

    .donut-legend .dl-nums b {
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      display: block
    }

    .donut-legend .dl-nums span {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }

    .donut-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px 2px;
      font-size: 12px;
      color: var(--muted)
    }

    .donut-total b {
      font-family: var(--mono);
      color: var(--ink);
      font-size: 13px
    }

    @media (max-width:720px) {
      .donut-flex {
        grid-template-columns: 1fr;
        gap: 18px
      }

      .donut-canvas {
        margin: 0 auto
      }
    }

    .progress {
      height: 8px;
      background: var(--surface-3);
      border-radius: 5px;
      overflow: hidden
    }

    .progress i {
      display: block;
      height: 100%;
      background: var(--accent);
      border-radius: 5px
    }

    /* ============ STORE ============ */
    .bundle-banner {
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 20px 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      margin-bottom: 20px;
      box-shadow: var(--shadow)
    }

    .bundle-banner h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.015em
    }

    .bundle-banner p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      max-width: 560px
    }

    .bundle-banner .price {
      font-family: var(--mono);
      font-size: 29px;
      font-weight: 700;
      color: var(--ink)
    }

    .bundle-banner .price small {
      font-size: 13px;
      color: var(--muted);
      font-weight: 500
    }

    .bundle-banner .save {
      background: var(--success-soft);
      color: var(--success);
      font-size: 11.5px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px
    }

    .store-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
      gap: 14px
    }

    .mod-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow);
      transition: border-color .15s, background .15s
    }

    .mod-card:hover {
      border-color: var(--border-strong)
    }

    .mod-card.active {
      border-color: var(--accent)
    }

    .mod-card .mc-top {
      display: flex;
      gap: 12px;
      align-items: flex-start
    }

    .mod-icon {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      flex: none;
      color: #fff
    }

    .mod-icon svg {
      width: 21px;
      height: 21px
    }

    .mod-card h3 {
      margin: 0;
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -.01em
    }

    .mod-card .mc-code {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }

    .mod-card .mc-desc {
      font-size: 13px;
      color: var(--ink-2);
      margin: 10px 0 12px;
      line-height: 1.5
    }

    .mod-card .mc-meta {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px
    }

    .mc-widgets {
      font-size: 12px;
      color: var(--muted);
      border-top: 1px solid var(--border);
      padding-top: 10px;
      margin-top: auto
    }

    .mc-widgets b {
      color: var(--ink-2);
      font-weight: 600
    }

    .mc-foot {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px
    }

    .mc-price {
      font-family: var(--mono);
      font-weight: 700;
      font-size: 16px
    }

    .mc-price small {
      font-size: 11px;
      color: var(--muted);
      font-weight: 500
    }

    .switch {
      position: relative;
      width: 42px;
      height: 24px;
      flex: none
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute
    }

    .switch .track {
      position: absolute;
      inset: 0;
      background: var(--border-strong);
      border-radius: 20px;
      transition: background .18s;
      cursor: pointer
    }

    .switch .track::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: left .18s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .25)
    }

    .switch input:checked+.track {
      background: var(--accent)
    }

    .switch input:checked+.track::after {
      left: 21px
    }

    .switch input:focus-visible+.track {
      outline: 2px solid var(--accent);
      outline-offset: 2px
    }

    .status-txt {
      font-size: 12px;
      font-weight: 600
    }

    .status-txt.on {
      color: var(--success)
    }

    .status-txt.off {
      color: var(--muted)
    }

    /* ============ MODULE DEEP PAGE ============ */
    .mod-hero {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      margin-bottom: 16px
    }

    .mod-hero .mod-icon {
      width: 52px;
      height: 52px;
      border-radius: 13px
    }

    .mod-hero .mod-icon svg {
      width: 26px;
      height: 26px
    }

    .mod-hero h2 {
      margin: 0;
      font-size: 23px;
      font-weight: 800;
      letter-spacing: -.02em
    }

    .mod-hero .sub {
      color: var(--muted);
      font-size: 13.5px;
      margin-top: 2px;
      max-width: 620px
    }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px 18px
    }

    .panel h3 {
      margin: 0 0 10px;
      font-size: 13.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .panel h3 svg {
      width: 15px;
      height: 15px;
      color: var(--accent-ink)
    }

    .check-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 13px
    }

    .check-list li {
      display: flex;
      gap: 9px;
      padding: 5px 0;
      align-items: flex-start;
      color: var(--ink-2)
    }

    .check-list li svg {
      width: 15px;
      height: 15px;
      flex: none;
      margin-top: 2px;
      color: var(--success)
    }

    .check-list li svg.link-c {
      color: var(--accent)
    }

    .feat-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 7px
    }

    .feat {
      font-size: 12.5px;
      font-weight: 500;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: 20px;
      padding: 5px 11px;
      color: var(--ink-2)
    }

    .section-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 22px 0 12px;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .section-title .st-note {
      font-size: 12px;
      color: var(--muted);
      font-weight: 500
    }

    /* ============ SHIPMENT 360 ============ */
    .ship-head {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 16px
    }

    .ship-head h2 {
      margin: 0;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.01em
    }

    .route-line {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 6px;
      font-size: 13.5px;
      color: var(--ink-2)
    }

    .route-line .rl-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      flex: none
    }

    .route-line .rl-bar {
      flex: 0 0 44px;
      height: 2px;
      background: var(--border-strong)
    }

    .timeline {
      position: relative;
      padding-left: 26px
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: var(--border)
    }

    .tl-item {
      position: relative;
      padding: 0 0 18px
    }

    .tl-item::before {
      content: "";
      position: absolute;
      left: -25px;
      top: 3px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--surface);
      border: 2.5px solid var(--border-strong);
      z-index: 1
    }

    .tl-item.done::before {
      background: var(--success);
      border-color: var(--success)
    }

    .tl-item.now::before {
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft)
    }

    .tl-item .tl-t {
      font-size: 13.5px;
      font-weight: 600
    }

    .tl-item .tl-s {
      font-size: 12px;
      color: var(--muted);
      margin-top: 1px
    }

    .tl-item.pending {
      opacity: .62
    }

    .doc-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 2px;
      border-bottom: 1px solid var(--border);
      font-size: 13px
    }

    .doc-row:last-child {
      border-bottom: 0
    }

    .doc-row .dic {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: var(--danger-soft);
      color: var(--danger);
      display: grid;
      place-items: center;
      flex: none;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700
    }

    .msg {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border)
    }

    .msg:last-child {
      border-bottom: 0
    }

    .msg .av {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      flex: none;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 11px;
      font-weight: 700
    }

    .msg b {
      font-size: 13px
    }

    .msg .m-time {
      font-size: 11px;
      color: var(--muted);
      font-family: var(--mono)
    }

    .msg p {
      margin: 2px 0 0;
      font-size: 13px;
      color: var(--ink-2)
    }

    /* ============ ADMIN PANEL ============ */
    .admin-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px
    }

    .admin-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column
    }

    .admin-card h3 {
      margin: 0 0 4px;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .admin-card h3 svg {
      width: 16px;
      height: 16px;
      color: var(--accent-ink)
    }

    .admin-card .ac-sub {
      font-size: 12.5px;
      color: var(--muted);
      margin-bottom: 14px;
      line-height: 1.5
    }

    .admin-card.span-4 {
      grid-column: span 4
    }

    .admin-card.span-5 {
      grid-column: span 5
    }

    .admin-card.span-6 {
      grid-column: span 6
    }

    .admin-card.span-7 {
      grid-column: span 7
    }

    .admin-card.span-8 {
      grid-column: span 8
    }

    .admin-card.span-12 {
      grid-column: span 12
    }

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

    .stat-box {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 12px 13px
    }

    .stat-box .sv {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      display: block;
      line-height: 1.15
    }

    .stat-box .sl {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-top: 3px;
      display: block
    }

    .role-row {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border)
    }

    .role-row:last-child {
      border-bottom: 0
    }

    .role-dot {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex: none;
      color: #fff
    }

    .role-dot svg {
      width: 16px;
      height: 16px
    }

    .role-row b {
      font-size: 13px;
      display: block
    }

    .role-row span {
      font-size: 11.5px;
      color: var(--muted)
    }

    .perm-chips {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-left: auto
    }

    .perm-chip {
      font-size: 10.5px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: 20px;
      padding: 2px 8px;
      color: var(--ink-2)
    }

    .hbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 8px 0;
      font-size: 12.5px
    }

    .hbar .hl {
      width: 130px;
      flex: none;
      color: var(--ink-2)
    }

    .hbar .ht {
      flex: 1;
      background: var(--surface-3);
      border-radius: 5px;
      height: 9px;
      overflow: hidden
    }

    .hbar .hf {
      height: 100%;
      border-radius: 5px
    }

    .hbar .hv {
      font-family: var(--mono);
      font-size: 12px;
      width: 64px;
      text-align: right;
      flex: none
    }

    .switch-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 0;
      border-bottom: 1px solid var(--border);
      font-size: 13px
    }

    .switch-row:last-child {
      border-bottom: 0
    }

    .switch-row b {
      font-weight: 600;
      display: block
    }

    .switch-row span {
      font-size: 11.5px;
      color: var(--muted)
    }

    .switch-row .switch {
      margin-left: auto
    }

    .code-block {
      background: var(--surface-2);
      color: var(--ink-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 18px;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.65;
      overflow-x: auto;
      white-space: pre
    }

    .code-block .cm {
      color: var(--muted)
    }

    .code-block .kw {
      color: var(--accent-ink)
    }

    .code-block .str {
      color: var(--success)
    }

    /* ============ QUOTE BUILDER ============ */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-2);
      margin-bottom: 5px
    }

    .field select,
    .field input {
      width: 100%;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--ink);
      border-radius: 8px;
      padding: 9px 11px;
      font-size: 13.5px
    }

    .field select:focus,
    .field input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .charge-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    .charge-table td,
    .charge-table th {
      padding: 8px 8px;
      border-bottom: 1px solid var(--border);
      text-align: left
    }

    .charge-table th {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--muted)
    }

    .charge-table .r {
      text-align: right;
      font-family: var(--mono)
    }

    .charge-table tr.total td {
      font-weight: 700;
      border-top: 2px solid var(--border-strong);
      border-bottom: 0;
      font-size: 14px
    }

    input[type=range] {
      width: 100%;
      accent-color: var(--accent)
    }

    /* ============ RECEIVING WORKFLOW ============ */
    .recv-steps {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .recv-step {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--ink-2);
      border-radius: 9px;
      padding: 8px 12px;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit
    }

    .recv-step:hover {
      border-color: var(--accent)
    }

    .recv-step.on {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--ink)
    }

    .recv-n {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--surface-3);
      color: var(--ink-2);
      display: grid;
      place-items: center;
      font-size: 11px;
      font-weight: 700;
      flex: none
    }

    .recv-step.on .recv-n {
      background: var(--accent);
      color: #fff
    }

    .recv-flow {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 15px 16px;
      background: var(--surface-2);
      margin-bottom: 4px
    }

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

    .recv-flow-head h4 {
      margin: 0;
      font-size: 14.5px;
      font-weight: 700
    }

    .recv-flow p {
      margin: 0;
      font-size: 13.5px;
      color: var(--ink-2);
      line-height: 1.6;
      max-width: 900px
    }

    .recv-stepmeta {
      margin-top: 10px
    }

    .recv-kpi {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }

    .recv-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border)
    }

    /* ============ DRAWER / PALETTE / TOAST ============ */
    .overlay {
      position: fixed;
      inset: 0;
      background: var(--scrim);
      z-index: 80;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s
    }

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

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(380px, 92vw);
      background: var(--surface);
      z-index: 90;
      display: none;
      flex-direction: column;
      box-shadow: var(--shadow-pop)
    }

    .drawer.show {
      display: flex;
      animation: drawerIn .22s ease-out
    }

    @keyframes drawerIn {
      from {
        transform: translateX(24px);
        opacity: .4
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .drawer header {
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .drawer header h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 700
    }

    .drawer .d-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px 18px
    }

    .picker-item {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      padding: 11px 0;
      border-bottom: 1px solid var(--border)
    }

    .picker-item:last-child {
      border-bottom: 0
    }

    .picker-item b {
      font-size: 13px;
      display: block
    }

    .picker-item p {
      margin: 1px 0 0;
      font-size: 12px;
      color: var(--muted)
    }

    .picker-item .switch {
      margin-left: auto;
      margin-top: 2px
    }

    .palette {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 9vh 16px 16px;
      background: var(--scrim)
    }

    .palette.show {
      display: flex
    }

    .palette-box {
      background: var(--surface);
      border-radius: 12px;
      width: min(640px, 100%);
      box-shadow: var(--shadow-pop);
      overflow: hidden;
      border: 1px solid var(--border)
    }

    .palette-box>input {
      width: 100%;
      border: 0;
      padding: 16px 18px;
      font-size: 15.5px;
      background: transparent;
      color: var(--ink)
    }

    .palette-box>input:focus {
      outline: none
    }

    .palette-results {
      max-height: 380px;
      overflow-y: auto;
      border-top: 1px solid var(--border);
      padding: 8px
    }

    .pal-group {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 8px 10px 4px
    }

    .pal-item {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      padding: 9px 10px;
      border: 0;
      background: transparent;
      border-radius: 8px;
      text-align: left;
      color: var(--ink);
      font-size: 13.5px;
      font-family: inherit
    }

    .pal-item.sel {
      background: var(--accent-soft)
    }

    .pal-item .ic {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: var(--surface-3);
      display: grid;
      place-items: center;
      color: var(--ink-2);
      flex: none
    }

    .pal-item .ic svg {
      width: 15px;
      height: 15px
    }

    .pal-item small {
      display: block;
      color: var(--muted);
      font-size: 11.5px
    }

    .pal-item .kbd {
      margin-left: auto
    }

    /* quick module switcher — small, low-visibility edge tab */
    .quick-mod {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 75;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px
    }

    .quick-mod-btn {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 38px;
      padding: 11px 3px;
      border-radius: 10px 0 0 10px;
      border: 1px solid var(--border);
      border-right: 0;
      background: var(--surface);
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      box-shadow: var(--shadow);
      opacity: .55;
      transition: opacity .18s, color .18s, border-color .18s, box-shadow .18s;
      overflow: hidden
    }

    .quick-mod-btn:hover,
    .quick-mod-btn:focus-visible {
      opacity: 1;
      color: var(--ink);
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
      outline: none
    }

    .quick-mod-btn svg {
      width: 14px;
      height: 14px;
      flex: none
    }

    .quick-mod-btn .qm-label {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      line-height: 1
    }

    .quick-mod-btn .qm-count {
      font-family: var(--mono);
      font-size: 8.5px;
      font-weight: 700;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 1px 3px;
      color: var(--ink-2);
      line-height: 1.2;
      writing-mode: horizontal-tb;
      max-width: 34px;
      overflow: hidden;
      white-space: nowrap
    }

    .quick-mod-panel {
      width: min(302px, calc(100vw - 52px));
      max-height: min(540px, 72vh);
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow-pop);
      padding: 10px;
      display: none;
      order: -1
    }

    .quick-mod-panel.show {
      display: block;
      animation: toastIn .18s ease-out
    }

    .qm-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 4px 8px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 6px
    }

    .qm-head b {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--ink)
    }

    .qm-head span {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted)
    }

    .qm-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 4px;
      border-radius: 8px
    }

    .qm-row:hover {
      background: var(--surface-2)
    }

    .qm-row .qm-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: none
    }

    .qm-row .qm-name {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .qm-row .qm-name small {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .toast-stack {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 120;
      display: flex;
      flex-direction: column;
      gap: 9px;
      max-width: min(360px, 90vw)
    }

    .toast {
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 15px;
      box-shadow: var(--shadow-pop);
      display: flex;
      gap: 11px;
      align-items: flex-start;
      animation: toastIn .25s ease-out
    }

    @keyframes toastIn {
      from {
        transform: translateY(10px);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .toast .tic {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--accent);
      display: grid;
      place-items: center;
      flex: none;
      color: #fff
    }

    .toast .tic svg {
      width: 15px;
      height: 15px
    }

    .toast b {
      font-size: 13px;
      display: block
    }

    .toast p {
      margin: 1px 0 0;
      font-size: 12px;
      color: var(--muted)
    }

    .notif-drop {
      position: absolute;
      top: 48px;
      right: 0;
      width: 330px;
      max-width: 88vw;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow-pop);
      z-index: 60;
      display: none
    }

    .notif-drop.show {
      display: block
    }

    .notif-drop header {
      padding: 12px 15px;
      border-bottom: 1px solid var(--border);
      font-size: 13.5px;
      font-weight: 700
    }

    .notif-drop .feed {
      padding: 4px 15px
    }

    .pop-wrap {
      position: relative
    }

    /* misc */
    .empty-state {
      text-align: center;
      padding: 26px 16px;
      color: var(--muted)
    }

    .empty-state svg {
      width: 30px;
      height: 30px;
      margin-bottom: 8px;
      color: var(--border-strong)
    }

    .empty-state p {
      margin: 0;
      font-size: 13px
    }

    .empty-state b {
      color: var(--ink-2);
      display: block;
      font-size: 13.5px;
      margin-bottom: 2px
    }

    .divider-note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 14px;
      line-height: 1.6
    }

    .divider-note a {
      font-weight: 600
    }

    /* ============ HEADER CURRENCY PICKER ============ */
    .curr-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 36px;
      padding: 0 10px 0 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--ink);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      flex: none;
      transition: border-color .15s, box-shadow .15s, background .15s
    }

    .curr-btn:hover {
      border-color: var(--accent);
      background: var(--surface-2)
    }

    .curr-btn:focus-visible {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .curr-btn .curr-sym {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent-ink);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 700;
      flex: none
    }

    .curr-btn .curr-code {
      font-family: var(--mono);
      font-size: 12.5px;
      letter-spacing: .02em
    }

    .curr-btn .curr-chev {
      color: var(--muted);
      display: grid;
      place-items: center
    }

    .curr-btn .curr-chev svg {
      width: 14px;
      height: 14px
    }

    .curr-drop {
      position: absolute;
      top: 46px;
      right: 0;
      width: 330px;
      max-width: calc(100vw - 28px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow-pop);
      z-index: 70;
      display: none;
      overflow: hidden
    }

    .curr-drop.show {
      display: block;
      animation: toastIn .16s ease-out
    }

    .curr-drop-head {
      padding: 12px 14px 10px;
      border-bottom: 1px solid var(--border)
    }

    .curr-drop-head b {
      font-size: 13px;
      display: block
    }

    .curr-drop-head span {
      font-size: 11.5px;
      color: var(--muted)
    }

    .curr-search {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 10px 12px 6px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0 10px;
      height: 36px;
      color: var(--muted)
    }

    .curr-search:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
      background: var(--surface)
    }

    .curr-search svg {
      width: 15px;
      height: 15px;
      flex: none
    }

    .curr-search input {
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      flex: 1;
      min-width: 0;
      outline: none;
      font-family: inherit
    }

    .curr-list {
      max-height: 300px;
      overflow-y: auto;
      padding: 4px 6px 8px
    }

    .curr-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 8px;
      border: 0;
      background: transparent;
      border-radius: 8px;
      text-align: left;
      color: var(--ink);
      font-family: inherit
    }

    .curr-item:hover,
    .curr-item:focus-visible {
      background: var(--surface-2);
      outline: none
    }

    .curr-item.sel {
      background: var(--accent-soft)
    }

    .curr-item .cs {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      flex: none
    }

    .curr-item.sel .cs {
      background: var(--surface);
      color: var(--accent-ink);
      border-color: var(--accent)
    }

    .curr-item .cm {
      flex: 1;
      min-width: 0
    }

    .curr-item .cm b {
      font-size: 13px;
      display: block;
      line-height: 1.25
    }

    .curr-item .cm span {
      font-size: 11.5px;
      color: var(--muted);
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .curr-item .cr {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-align: right;
      flex: none;
      line-height: 1.35
    }

    .curr-item .cr b {
      color: var(--ink-2);
      font-size: 11.5px
    }

    .curr-item .ccheck {
      color: var(--accent-ink);
      display: none;
      flex: none
    }

    .curr-item.sel .ccheck {
      display: grid
    }

    .curr-item .ccheck svg {
      width: 15px;
      height: 15px
    }

    .curr-foot {
      border-top: 1px solid var(--border);
      padding: 9px 14px;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.5;
      background: var(--surface-2)
    }

    /* ============ ADVANCED CHARTS ============ */
    .chart-box {
      position: relative
    }

    .chart-box svg text {
      user-select: none
    }

    .chart-gridline {
      stroke: var(--border);
      stroke-width: 1
    }

    .chart-axis-val {
      font-family: var(--mono);
      font-size: 9px;
      fill: var(--muted);
      text-anchor: end
    }

    .chart-bar {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation: barGrow .7s cubic-bezier(.22, 1, .36, 1) both;
      cursor: pointer;
      transition: opacity .15s
    }

    .chart-bar:hover {
      opacity: .82
    }

    @keyframes barGrow {
      from {
        transform: scaleY(0)
      }

      to {
        transform: scaleY(1)
      }
    }

    .chart-area {
      animation: fadeIn .8s ease-out both
    }

    .chart-line-path {
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: lineDraw 1s cubic-bezier(.22, 1, .36, 1) forwards
    }

    @keyframes lineDraw {
      to {
        stroke-dashoffset: 0
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .chart-dot {
      cursor: pointer;
      transition: r .15s
    }

    .chart-dot:hover {
      r: 5.5
    }

    .chart-series {
      transition: opacity .2s
    }

    .chart-series.off {
      opacity: .08
    }

    .legend button {
      display: inline-flex;
      align-items: center;
      gap: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 11.5px;
      font-family: inherit;
      padding: 3px 6px;
      border-radius: 6px;
      cursor: pointer
    }

    .legend button:hover {
      background: var(--surface-2);
      color: var(--ink)
    }

    .legend button.off {
      opacity: .45;
      text-decoration: line-through
    }

    .chart-tip {
      position: fixed;
      z-index: 130;
      pointer-events: none;
      background: var(--ink);
      color: var(--bg);
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 12px;
      line-height: 1.45;
      box-shadow: var(--shadow-pop);
      opacity: 0;
      transition: opacity .12s;
      max-width: 240px
    }

    .chart-tip.show {
      opacity: 1
    }

    .chart-tip b {
      display: block;
      font-size: 12px
    }

    .chart-tip span {
      opacity: .75;
      font-size: 11px
    }

    .donut-seg {
      cursor: pointer;
      transition: stroke-width .15s, opacity .15s
    }

    .donut-seg:hover {
      opacity: .88
    }

    /* ============ LIFECYCLE FLOWCHART ============ */
    .flow-scroll {
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin
    }

    .flow-track {
      display: flex;
      align-items: stretch;
      gap: 0;
      min-width: 760px
    }

    .flow-node {
      flex: 1 1 0;
      min-width: 0;
      border: 1.5px solid var(--border);
      background: var(--surface);
      border-radius: 10px;
      padding: 10px 10px 9px;
      text-align: left;
      font-family: inherit;
      color: var(--ink);
      display: flex;
      flex-direction: column;
      gap: 3px;
      transition: border-color .15s, background .15s, box-shadow .15s;
      position: relative
    }

    .flow-node:hover {
      border-color: var(--border-strong);
      background: var(--surface-2)
    }

    .flow-node:focus-visible {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .flow-node.sel {
      border-color: var(--accent);
      background: var(--accent-soft);
      box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .flow-node .fn-ic {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      color: #fff;
      flex: none
    }

    .flow-node .fn-ic svg {
      width: 15px;
      height: 15px
    }

    .flow-node .fn-step {
      font-family: var(--mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .flow-node.sel .fn-step {
      color: var(--accent-ink)
    }

    .flow-node .fn-name {
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.25
    }

    .flow-node .fn-meta {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4
    }

    .flow-node .fn-count {
      font-family: var(--mono);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.1;
      margin-top: 1px
    }

    .flow-node .fn-dot {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    .flow-node .fn-dot.live {
      background: var(--success)
    }

    .flow-node .fn-dot.watch {
      background: var(--warning)
    }

    .flow-node .fn-dot.block {
      background: var(--danger)
    }

    .flow-arrow {
      display: grid;
      place-items: center;
      color: var(--muted);
      width: 22px;
      flex: none
    }

    .flow-arrow svg {
      width: 14px;
      height: 14px
    }

    .flow-arrow.done {
      color: var(--success)
    }

    .flow-detail {
      margin-top: 12px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: 10px;
      padding: 13px 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-start
    }

    .flow-detail .fd-main {
      flex: 1;
      min-width: 230px
    }

    .flow-detail .fd-main b {
      font-size: 13.5px;
      display: block
    }

    .flow-detail .fd-main p {
      margin: 3px 0 0;
      font-size: 12.5px;
      color: var(--ink-2);
      line-height: 1.55
    }

    .flow-detail .fd-stats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .flow-detail .fd-stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 10px;
      min-width: 96px
    }

    .flow-detail .fd-stat b {
      font-family: var(--mono);
      font-size: 14px;
      display: block;
      line-height: 1.2
    }

    .flow-detail .fd-stat span {
      font-size: 10.5px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .flow-legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 9px
    }

    .flow-legend i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
      vertical-align: 0
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width:1180px) {

      .widget.span-3,
      .widget.span-4 {
        grid-column: span 6
      }

      .widget.span-5,
      .widget.span-6,
      .widget.span-7,
      .widget.span-8 {
        grid-column: span 12
      }

      .admin-card.span-4,
      .admin-card.span-5,
      .admin-card.span-6 {
        grid-column: span 6
      }

      .admin-card.span-7,
      .admin-card.span-8 {
        grid-column: span 12
      }

      .kpi-row {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width:860px) {
      .app {
        grid-template-columns: 1fr
      }

      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 264px;
        display: none;
        box-shadow: var(--shadow-pop)
      }

      .sidebar.open {
        display: flex;
        animation: drawerIn .2s ease-out
      }

      .menu-btn {
        display: grid
      }

      .page {
        padding: 18px 14px 50px
      }

      .widget.span-3,
      .widget.span-4,
      .widget.span-5,
      .widget.span-6,
      .widget.span-7,
      .widget.span-8 {
        grid-column: span 12
      }

      .two-col {
        grid-template-columns: 1fr
      }

      .form-grid {
        grid-template-columns: 1fr
      }

      .searchbox {
        min-width: 0;
        flex: none;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center
      }

      .searchbox>span {
        display: none
      }

      .searchbox .kbd {
        display: none
      }

      .tb-title {
        display: none
      }

      .tb-user {
        display: none
      }

      .role-select select {
        max-width: 132px
      }

      .tb-user .tu-meta {
        display: none
      }

      .topbar {
        padding: 0 14px;
        gap: 8px
      }

      .tb-crumb {
        display: none
      }

      .admin-card.span-4,
      .admin-card.span-5,
      .admin-card.span-6,
      .admin-card.span-7,
      .admin-card.span-8 {
        grid-column: span 12
      }

      .qa-grid {
        grid-template-columns: 1fr
      }

      .flow-scroll {
        overflow: visible
      }

      .flow-track {
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px
      }

      .flow-node {
        flex: 1 1 calc(50% - 8px)
      }

      .flow-arrow {
        display: none
      }

      .curr-drop {
        position: fixed;
        top: 62px;
        right: 12px;
        left: 12px;
        width: auto
      }
    }

    @media (max-width:560px) {
      table.tbl {
        min-width: 0
      }

      .tbl .hidemb {
        display: none
      }

      .tbl td,
      .tbl th {
        padding: 8px 6px
      }

      .bar-row .bl {
        width: 86px
      }

      .curr-btn .curr-code {
        display: none
      }

      .flow-node {
        flex-basis: 100%
      }

      .donut-flex {
        grid-template-columns: 1fr;
        gap: 16px
      }

      .donut-canvas {
        width: 188px;
        height: 188px
      }

      .donut-canvas svg {
        width: 188px;
        height: 188px
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
      }
    }

    /* ============ DOCK-TO-STOCK RECEIVING TERMINAL ============ */
    .terminal-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 22px 24px;
      box-shadow: var(--shadow);
      margin-bottom: 18px
    }

    .terminal-stepper {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 10px;
      margin-bottom: 20px;
      scrollbar-width: thin
    }

    .t-step {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 600;
      white-space: nowrap;
      transition: all .15s;
      font-family: inherit;
      cursor: pointer
    }

    .t-step:hover {
      border-color: var(--accent);
      color: var(--ink)
    }

    .t-step.active {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent-ink);
      box-shadow: 0 0 0 2px var(--accent-soft)
    }

    .t-step.done {
      background: var(--success-soft);
      border-color: var(--success);
      color: var(--success)
    }

    .t-step .t-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--surface-3);
      color: var(--ink-2);
      display: grid;
      place-items: center;
      font-size: 11px;
      font-weight: 700;
      flex: none
    }

    .t-step.active .t-num {
      background: var(--accent);
      color: #fff
    }

    .t-step.done .t-num {
      background: var(--success);
      color: #fff
    }

    .t-step-arrow {
      color: var(--border-strong);
      display: grid;
      place-items: center;
      flex: none
    }

    .t-step-arrow svg {
      width: 12px;
      height: 12px
    }

    .recv-panel {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px 20px;
      background: var(--surface-2);
      margin-bottom: 14px
    }

    .recv-panel h4 {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .recv-panel h4 svg {
      width: 16px;
      height: 16px
    }

    .recv-panel p {
      margin: 0 0 10px;
      font-size: 13.5px;
      color: var(--ink-2);
      line-height: 1.6;
      max-width: 900px
    }

    .recv-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px
    }

    .recv-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 6px 11px;
      border-radius: 20px;
      color: var(--ink-2);
      cursor: pointer;
      transition: all .15s;
      font-family: inherit
    }

    .recv-chip:hover {
      border-color: var(--accent);
      color: var(--accent-ink)
    }

    .recv-chip.danger {
      border-color: var(--danger);
      background: var(--danger-soft);
      color: var(--danger)
    }

    .recv-chip.warning {
      border-color: var(--warning);
      background: var(--warning-soft);
      color: var(--warning)
    }

    .recv-chip.success {
      border-color: var(--success);
      background: var(--success-soft);
      color: var(--success)
    }

    .recv-chip.selected {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent-ink)
    }

    .recv-chip svg {
      width: 13px;
      height: 13px
    }

    .recv-evidence {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 8px;
      margin-top: 10px
    }

    .recv-photo {
      aspect-ratio: 4/3;
      border-radius: 8px;
      background: var(--surface-3);
      border: 2px dashed var(--border-strong);
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      transition: border-color .15s
    }

    .recv-photo:hover {
      border-color: var(--accent)
    }

    .recv-photo.has-photo {
      border-style: solid;
      border-color: var(--success);
      background: var(--success-soft);
      color: var(--success)
    }

    .recv-count {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      margin-top: 10px
    }

    .recv-count-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .recv-count-item .rci-label {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .03em
    }

    .recv-count-item .rci-row {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .recv-count-item .rci-input {
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--ink);
      border-radius: 7px;
      padding: 7px 10px;
      font-size: 16px;
      font-weight: 700;
      font-family: var(--mono);
      width: 80px;
      text-align: center
    }

    .recv-count-item .rci-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .recv-count-item .rci-expected {
      font-size: 12px;
      color: var(--muted);
      font-family: var(--mono)
    }

    .recv-count-item .rci-variance {
      font-size: 12px;
      font-weight: 700;
      font-family: var(--mono)
    }

    .recv-count-item .rci-variance.short {
      color: var(--danger)
    }

    .recv-count-item .rci-variance.over {
      color: var(--warning)
    }

    .recv-count-item .rci-variance.match {
      color: var(--success)
    }

    .recv-blind .rci-expected {
      filter: blur(6px);
      user-select: none
    }

    .recv-blind.revealed .rci-expected {
      filter: none
    }

    .grn-doc {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow);
      max-width: 680px;
      margin: 12px auto 0
    }

    .grn-doc h3 {
      margin: 0 0 4px;
      font-size: 18px;
      font-weight: 800;
      text-align: center
    }

    .grn-doc .grn-sub {
      text-align: center;
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 16px
    }

    .grn-doc table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      margin-bottom: 12px
    }

    .grn-doc table th,
    .grn-doc table td {
      padding: 7px 10px;
      border: 1px solid var(--border);
      text-align: left
    }

    .grn-doc table th {
      background: var(--surface-2);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
      font-weight: 700
    }

    .grn-doc .grn-stamp {
      text-align: center;
      margin-top: 16px;
      padding: 12px;
      border: 2px solid var(--success);
      border-radius: 10px;
      background: var(--success-soft);
      color: var(--success);
      font-weight: 700;
      font-size: 14px
    }

    .grn-doc .grn-stamp.pending {
      border-color: var(--warning);
      background: var(--warning-soft);
      color: var(--warning)
    }

    .oilfield-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
      margin-top: 10px
    }

    .oilfield-check {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 12px 14px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      transition: border-color .15s;
      font-family: inherit;
      color: var(--ink);
      text-align: left;
      font-size: 13px
    }

    .oilfield-check:hover {
      border-color: var(--accent)
    }

    .oilfield-check.checked {
      border-color: var(--success);
      background: var(--success-soft)
    }

    .oilfield-check .oc-box {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 2px solid var(--border-strong);
      background: var(--surface);
      display: grid;
      place-items: center;
      flex: none;
      color: transparent
    }

    .oilfield-check.checked .oc-box {
      background: var(--success);
      border-color: var(--success);
      color: #fff
    }

    .oilfield-check b {
      display: block;
      font-size: 13px;
      line-height: 1.3
    }

    .oilfield-check small {
      display: block;
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.4
    }

    /* ============ AI OCR DOCUMENT READER ============ */
    .ocr-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      min-height: 520px
    }

    .ocr-doc {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px;
      display: flex;
      flex-direction: column
    }

    .ocr-doc-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px
    }

    .ocr-doc-head h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      flex: 1
    }

    .ocr-doc-body {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 16px 18px;
      font-family: var(--mono);
      font-size: 12.5px;
      line-height: 1.7;
      overflow-y: auto;
      position: relative
    }

    .ocr-field {
      display: inline;
      border-bottom: 2px solid transparent;
      padding: 1px 3px;
      border-radius: 3px;
      transition: all .15s;
      cursor: pointer
    }

    .ocr-field.high {
      border-color: var(--success);
      background: var(--success-soft)
    }

    .ocr-field.med {
      border-color: var(--warning);
      background: var(--warning-soft)
    }

    .ocr-field.low {
      border-color: var(--danger);
      background: var(--danger-soft)
    }

    .ocr-field:hover {
      opacity: .8
    }

    .ocr-results {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px;
      display: flex;
      flex-direction: column
    }

    .ocr-results-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px
    }

    .ocr-results-head h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      flex: 1
    }

    .ocr-conf {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: 10px;
      margin-bottom: 12px
    }

    .ocr-conf-bar {
      flex: 1;
      height: 10px;
      background: var(--surface-3);
      border-radius: 6px;
      overflow: hidden
    }

    .ocr-conf-bar i {
      display: block;
      height: 100%;
      border-radius: 6px;
      transition: width .6s ease-out
    }

    .ocr-conf-val {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 700;
      min-width: 56px;
      text-align: right
    }

    .ocr-conf-label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600
    }

    .ocr-field-list {
      flex: 1;
      overflow-y: auto
    }

    .ocr-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 2px;
      border-bottom: 1px solid var(--border);
      font-size: 13px
    }

    .ocr-row:last-child {
      border-bottom: 0
    }

    .ocr-row .or-label {
      flex: 1;
      min-width: 0;
      font-weight: 600;
      color: var(--ink-2)
    }

    .ocr-row .or-value {
      font-family: var(--mono);
      font-size: 12.5px;
      flex: 1;
      min-width: 0
    }

    .ocr-row .or-conf {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 20px;
      flex: none
    }

    .ocr-row .or-conf.high {
      background: var(--success-soft);
      color: var(--success)
    }

    .ocr-row .or-conf.med {
      background: var(--warning-soft);
      color: var(--warning)
    }

    .ocr-row .or-conf.low {
      background: var(--danger-soft);
      color: var(--danger)
    }

    .ocr-action {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border)
    }

    @media(max-width:860px) {
      .ocr-split {
        grid-template-columns: 1fr
      }
    }

    /* ============ CARRIER FEED INGESTOR ============ */
    .ingest-terminal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow)
    }

    .ingest-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2)
    }

    .ingest-head h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      flex: 1
    }

    .ingest-head .ih-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex: none
    }

    .ingest-head .ih-dot.live {
      background: var(--success);
      animation: pulseDot 1.5s infinite
    }

    .ingest-head .ih-dot.idle {
      background: var(--muted)
    }

    @keyframes pulseDot {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    .ingest-body {
      padding: 18px;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.7;
      max-height: 420px;
      overflow-y: auto;
      background: var(--bg)
    }

    .ingest-body .il {
      display: flex;
      gap: 10px;
      align-items: flex-start
    }

    .ingest-body .il-time {
      color: var(--muted);
      flex: none;
      min-width: 80px
    }

    .ingest-body .il-ok {
      color: var(--success)
    }

    .ingest-body .il-warn {
      color: var(--warning)
    }

    .ingest-body .il-err {
      color: var(--danger)
    }

    .ingest-body .il-info {
      color: var(--accent-ink)
    }

    .ingest-stats {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 10px;
      padding: 16px 18px;
      border-top: 1px solid var(--border);
      background: var(--surface-2)
    }

    .ingest-stat {
      text-align: center
    }

    .ingest-stat .is-val {
      font-family: var(--mono);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.2
    }

    .ingest-stat .is-label {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .ingest-controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      padding: 14px 18px;
      border-top: 1px solid var(--border)
    }

    .iso-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-family: var(--mono);
      padding: 4px 8px;
      border-radius: 6px
    }

    .iso-check.valid {
      background: var(--success-soft);
      color: var(--success)
    }

    .iso-check.invalid {
      background: var(--danger-soft);
      color: var(--danger)
    }
    /* ============ TYPOGRAPHY REFINEMENT ============ */
    :root {
      --font: "Plus Jakarta Sans", "Instrument Sans", "Inter", system-ui, sans-serif;
      --mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace;
    }
    body { font-size: 14px; letter-spacing: -.005em; }
    .sb-brand h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.035em; }
    .sb-brand p, .sb-label, .k-label, .w-head .w-tag, .mc-code, .data-table th {
      letter-spacing: .045em;
    }
    .nav-item { font-size: 13px; letter-spacing: -.01em; }
    .tb-title { font-weight: 800; letter-spacing: -.025em; }
    .page-head h2 { font-family: var(--font); font-size: 27px; font-weight: 800; letter-spacing: -.045em; }
    .page-head .sub { font-size: 13.5px; line-height: 1.6; }
    .btn { font-size: 12.5px; letter-spacing: -.01em; }
    .w-head h3, .mc-top h3, .section-title { font-weight: 700; letter-spacing: -.025em; }
    .kpi .k-label { font-size: 10px; letter-spacing: .055em; }
    .kpi .k-val { font-family: var(--mono); font-weight: 700; letter-spacing: -.035em; }
    .feed .f-title, .data-table td { letter-spacing: -.01em; }
    .feed .f-sub, .kpi .k-sub { font-size: 11.5px; line-height: 1.45; }
    @media(max-width:800px) { .page-head h2 { font-size: 24px; } }