:root {
    --navy-deep: #0B1F33;
    --navy: #142E4A;
    --navy-mid: #1F4061;
    --navy-soft: rgba(255,255,255,0.7);
    --ivory: #F5F3EE;
    --white: #ffffff;
    --line: rgba(255,255,255,0.18);
    --ink: #0B1F33;
    --muted: #6B7280;
    --line-light: rgba(11,31,51,0.1);
    --line-soft: rgba(11,31,51,0.05);
    --good: #10b981;
    --hot: #ef4444;
    --warn: #f59e0b;
    --cls-economy: #6B8A9E;
    --cls-premium: #2C4A5E;
    --cls-luxury: #0B1F33;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--ink);
    background: var(--ivory);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* ======= NAUTICAL HEADLINES — OPEN SANS BLACK/LIGHT CONTRAST ======= */
  .greet h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    text-transform: none;
  }
  .inc-route {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: none;
  }
  .greet h1 .light,
  .inc-route .light {
    font-weight: 300;
    letter-spacing: -0.03em;
  }
  .greet-eyebrow {
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
  }

  /* ============ MOBILE HAMBURGER + MENU ============ */
  .nav-burger {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    align-items: center; justify-content: center;
    color: var(--white);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
  }
  .nav-burger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  @media (max-width: 1100px) {
    .nav-burger { display: inline-flex; }
    .nav .lang-switch { display: none; }
  }

  /* ============ LANGUAGE SWITCHER ============ */
  html:not([lang="en"]) .lang-en { display: none !important; }
  html[lang="en"] .lang-me { display: none !important; }

  .lang-switch {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px; padding: 3px;
    font-family: inherit; cursor: pointer;
  }
  .lang-switch button {
    background: transparent; border: 0; color: var(--white);
    opacity: 0.55; font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
    cursor: pointer; font-family: inherit;
    transition: opacity .15s, background .15s;
  }
  .lang-switch button:hover { opacity: 1; }
  .lang-switch button.active {
    background: var(--white); color: var(--navy-deep); opacity: 1;
  }
  .lang-switch.dark {
    background: rgba(11,31,51,0.06);
    border-color: rgba(11,31,51,0.14);
  }
  .lang-switch.dark button { color: var(--navy-deep); }
  .lang-switch.dark button.active { background: var(--navy-deep); color: var(--white); }

  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--navy-deep);
    z-index: 200;
    padding: 22px 24px 28px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .mobile-menu.open { transform: translateX(0); }
  body.menu-open { overflow: hidden; }

  .mm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .mm-brand { display: flex; align-items: center; gap: 14px; }
  .mm-brand svg { height: 36px; fill: var(--white); }
  .mm-brand-text {
    border-left: 1px solid var(--line);
    padding-left: 12px;
    line-height: 1;
  }
  .mm-brand-text .full {
    font-size: 11px; font-weight: 800;
    color: var(--white);
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .mm-brand-text .tag {
    display: block;
    font-size: 9px; font-weight: 500;
    color: var(--navy-soft);
    letter-spacing: 2px;
    margin-top: 4px;
    text-transform: uppercase;
  }
  .mm-close {
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    background: transparent;
    cursor: pointer;
  }
  .mm-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  .mm-tier {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
  }
  .mm-tier .lvl {
    background: var(--white);
    color: var(--navy-deep);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
  }

  .mm-section-title {
    font-size: 9px; font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
    margin: 14px 0 8px;
  }

  .mm-link {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .mm-link.active { color: var(--white); font-weight: 700; }
  .mm-link.active::before { content: '◆'; color: var(--white); margin-right: 0; opacity: 0.7; font-size: 11px; }
  .mm-link svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
    opacity: 0.6;
  }
  .mm-link .badge {
    margin-left: auto;
    background: var(--hot); color: var(--white);
    font-size: 10px; font-weight: 800;
    padding: 2px 8px; border-radius: 999px;
  }

  .mm-footer {
    padding-top: 18px;
    margin-top: auto;
    border-top: 1px solid var(--line);
  }
  .mm-profile {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
  }
  .mm-profile .ava {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--white); color: var(--navy-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
  }
  .mm-profile .info { flex: 1; line-height: 1.3; }
  .mm-profile .info .nm {
    font-size: 13px; font-weight: 700;
    color: var(--white);
    letter-spacing: 0.3px;
  }
  .mm-profile .info .role {
    font-size: 10px; font-weight: 500;
    color: var(--navy-soft);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .mm-online {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(110,231,183,0.12);
    border: 1px solid rgba(110,231,183,0.3);
    border-radius: 999px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6ee7b7;
  }
  .mm-online .dot {
    width: 6px; height: 6px;
    background: #6ee7b7;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

  /* ============ TOP NAV ============ */
  .topbar {
    background: var(--navy-deep);
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky; top: 0; z-index: 50;
  }
  .topbar-inner {
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .brand {
    display: flex; align-items: center; gap: 18px;
  }
  .brand .logo {
    height: 48px; width: auto;
    fill: var(--white);
  }
  .brand-text {
    border-left: 1px solid var(--line);
    padding-left: 18px;
    line-height: 1;
  }
  .brand-text .full {
    font-size: 14px; font-weight: 800;
    color: var(--white);
    letter-spacing: 4px;
    text-transform: uppercase;
  }
  .brand-text .tag {
    display: block;
    font-size: 10px; font-weight: 500;
    color: var(--navy-soft);
    letter-spacing: 2.5px;
    margin-top: 6px;
    text-transform: uppercase;
  }

  .topbar-actions {
    display: flex; align-items: center; gap: 14px;
  }
  .tier-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.04);
  }
  .tier-chip .lvl {
    background: var(--white);
    color: var(--navy-deep);
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
  }

  .online-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(110,231,183,0.4);
    background: rgba(16,185,129,0.12);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px;
    color: #6ee7b7;
    text-transform: uppercase;
  }
  .online-toggle .dot {
    width: 7px; height: 7px;
    background: #6ee7b7;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  .icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    background: rgba(255,255,255,0.04);
    position: relative;
  }
  .icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .icon-btn .badge-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 7px; height: 7px;
    background: var(--hot);
    border-radius: 50%;
    border: 1.5px solid var(--navy-deep);
  }

  .profile-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
    border-radius: 999px;
  }
  .profile-chip .ava {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--white);
    color: var(--navy-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
  }
  .profile-chip .nm { font-size: 12px; font-weight: 700; color: var(--white); letter-spacing: 0.3px; }

  /* ============ LAYOUT ============ */
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 78px);
  }
  .sidebar {
    background: var(--white);
    border-right: 1px solid var(--line-light);
    padding: 24px 14px;
    position: sticky;
    top: 78px;
    height: calc(100vh - 78px);
    overflow-y: auto;
  }
  .sb-section {
    font-size: 9px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--muted);
    padding: 12px 14px 8px;
  }
  .sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy-deep);
    margin-bottom: 2px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .sb-item:hover { background: var(--ivory); }
  .sb-item.active {
    background: var(--navy-deep);
    color: var(--white);
    font-weight: 700;
  }
  .sb-item svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
  }
  .sb-item .badge {
    margin-left: auto;
    background: var(--hot); color: var(--white);
    font-size: 9px; font-weight: 800;
    padding: 2px 7px; border-radius: 999px;
    letter-spacing: 0.5px;
  }
  .sb-item.active .badge { background: var(--white); color: var(--navy-deep); }

  /* ============ MAIN ============ */
  .main {
    padding: 36px 40px 60px;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* GREETING */
  .greet-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  .greet-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--navy-deep);
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--navy-deep);
  }
  .greet h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--navy-deep);
  }
  .greet h1 .light { font-weight: 300; }
  .greet p {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.3px;
  }
  .today-earnings {
    background: var(--navy-deep);
    color: var(--white);
    padding: 22px 28px;
    border-radius: 4px;
    min-width: 240px;
    position: relative;
    overflow: hidden;
  }
  .today-earnings::before {
    content: '';
    position: absolute; inset: -40px -40px auto auto;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  }
  .today-earnings .l {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
    position: relative; z-index: 2;
  }
  .today-earnings .v {
    font-size: 32px; font-weight: 700;
    letter-spacing: 0.4px;
    margin: 6px 0 4px;
    position: relative; z-index: 2;
  }
  .today-earnings .trend {
    font-size: 11px;
    color: #6ee7b7;
    letter-spacing: 0.3px;
    position: relative; z-index: 2;
  }

  /* KPI ROW */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 32px;
  }
  .kpi {
    background: var(--white);
    padding: 22px 24px;
    border-radius: 4px;
  }
  .kpi-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
  }
  .kpi .l {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--muted);
  }
  .kpi-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ivory);
    display: flex; align-items: center; justify-content: center;
    color: var(--navy-deep);
  }
  .kpi-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .kpi .v {
    font-size: 28px; font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--navy-deep);
    margin-bottom: 4px;
  }
  .kpi .trend {
    font-size: 11px;
    color: var(--good);
    font-weight: 600;
  }
  .kpi .trend svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.5; vertical-align: middle; margin-right: 3px; }

  /* TIER PROGRESS */
  .tier-progress {
    background: var(--white);
    padding: 28px 32px;
    border-radius: 4px;
    margin-bottom: 32px;
  }
  .tp-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 26px;
    flex-wrap: wrap; gap: 12px;
  }
  .tp-head h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--navy-deep);
  }
  .tp-head h3 .light { font-weight: 300; }
  .tp-head-meta {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.3px;
  }
  .tp-now {
    background: var(--ivory);
    padding: 18px 22px;
    border-radius: 4px;
    border-left: 3px solid var(--navy-deep);
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap; gap: 12px;
  }
  .tp-now-block { line-height: 1.2; }
  .tp-now-block .l {
    font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--muted);
  }
  .tp-now-block .v {
    font-size: 22px; font-weight: 700;
    color: var(--navy-deep);
    margin-top: 4px;
    letter-spacing: 0.3px;
  }
  .tp-now-block .v.small {
    font-size: 14px;
    font-weight: 700;
  }

  .tp-bar-wrap {
    position: relative;
    padding: 10px 0 32px;
  }
  .tp-bar {
    height: 6px;
    background: var(--ivory);
    border-radius: 999px;
    position: relative;
  }
  .tp-fill {
    height: 100%; border-radius: 999px;
    background: var(--navy-deep);
    width: 47%;
  }
  .tp-points {
    display: flex; justify-content: space-between;
    position: absolute;
    top: 0; left: 0; right: 0;
    pointer-events: none;
  }
  .tp-point {
    text-align: center;
    width: 100px;
    margin-left: -50px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
    position: relative;
    top: 30px;
  }
  .tp-point:first-child { margin-left: 0; text-align: left; }
  .tp-point:last-child { margin-left: 0; margin-right: 0; text-align: right; }
  .tp-point.done { color: var(--navy-deep); }
  .tp-point.current { color: var(--navy-deep); }
  .tp-point .pct {
    display: block;
    font-size: 8px;
    margin-top: 2px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  .tp-point::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--ivory);
    border: 2px solid var(--ivory);
    position: absolute;
    /* Center the dot on the 6px bar:
       points-container top = 0 (bar starts at 10px padding)
       bar center at y = 13 (10 padding + 3 half-bar)
       text shifted down 30px (.tp-point top: 30px)
       so dot top from text = 13 - 30 - 7 (half-dot) = -24 */
    top: -24px; left: 50%; transform: translateX(-50%);
  }
  .tp-point:first-child::before { left: 0; transform: none; }
  .tp-point:last-child::before { left: auto; right: 0; transform: none; }
  .tp-point.done::before, .tp-point.current::before {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
  }
  .tp-point.current::before {
    box-shadow: 0 0 0 4px rgba(11,31,51,0.15);
  }

  .tp-next {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(11,31,51,0.04);
    border-radius: 4px;
    font-size: 12px;
    color: var(--navy-deep);
    line-height: 1.55;
  }
  .tp-next strong { color: var(--navy-deep); font-weight: 700; }

  /* ============ INCOMING BID ============ */
  .incoming {
    background: var(--navy-deep);
    color: var(--white);
    padding: 28px 32px;
    border-radius: 4px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
  }
  .incoming::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
  }
  .inc-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    position: relative; z-index: 2;
    flex-wrap: wrap; gap: 12px;
  }
  .inc-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(252,165,165,0.4);
    background: rgba(239,68,68,0.12);
    border-radius: 999px;
    font-size: 9px; font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fca5a5;
  }
  .inc-status .dot {
    width: 6px; height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.3s infinite;
  }
  .inc-id {
    font-size: 11px;
    color: var(--navy-soft);
    letter-spacing: 1.5px;
  }
  .inc-route {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 8px;
    position: relative; z-index: 2;
  }
  .inc-route .light { font-weight: 300; }
  .inc-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 22px;
    position: relative; z-index: 2;
  }
  .inc-tag {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.04);
  }
  .inc-tag.class-luxury {
    background: var(--white); color: var(--navy-deep);
    border-color: var(--white);
  }

  .inc-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    margin-bottom: 22px;
    position: relative; z-index: 2;
  }
  .inc-info-cell {
    padding: 16px 18px;
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  .inc-info-cell:last-child { border-right: 0; }
  .inc-info-cell .l {
    font-size: 8.5px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
  }
  .inc-info-cell .v {
    font-size: 22px; font-weight: 700;
    letter-spacing: 0.3px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .inc-info-cell .v.urgent { color: #fca5a5; animation: pulse 1s infinite; }
  .inc-info-cell .v.small { font-size: 13px; line-height: 1.3; padding-top: 2px; }

  .inc-bid-form {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 10px;
    align-items: end;
    position: relative; z-index: 2;
    margin-bottom: 14px;
  }
  .ibf-field { display: flex; flex-direction: column; min-width: 0; }
  .ibf-label {
    display: block;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
    margin-bottom: 7px;
  }
  .ibf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ibf-input-wrap .currency {
    position: absolute;
    left: 14px;
    color: var(--navy-soft);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
  }
  .ibf-input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 30px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: all 0.15s;
  }
  .ibf-select {
    width: 100%;
    height: 46px;
    padding: 0 36px 0 14px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    background-color: rgba(255,255,255,0.06);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.2px;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.15s;
  }
  .ibf-input:focus, .ibf-select:focus {
    outline: none;
    border-color: var(--white);
    background-color: rgba(255,255,255,0.1);
  }
  .ibf-select option { background: var(--navy-deep); color: var(--white); }
  .ibf-submit {
    height: 46px;
    padding: 0 24px;
    border-radius: 4px;
    background: var(--white);
    color: var(--navy-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .ibf-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255,255,255,0.18);
  }
  .ibf-submit svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

  .inc-earn-bar {
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px;
    color: var(--navy-soft);
    position: relative; z-index: 2;
    flex-wrap: wrap; gap: 10px;
  }
  .inc-earn-bar strong {
    color: var(--white);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.3px;
  }

  .inc-comp {
    margin-top: 22px;
    position: relative; z-index: 2;
  }
  .inc-comp-title {
    font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--navy-soft);
    margin-bottom: 8px;
  }
  .inc-comp-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 4px;
    align-items: center;
  }
  .inc-comp-row.lowest {
    background: var(--white);
    color: var(--navy-deep);
    font-weight: 700;
  }
  .inc-comp-row .ava {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700;
  }
  .inc-comp-row.lowest .ava {
    background: var(--navy-deep); color: var(--white);
  }
  .inc-comp-row .vsl {
    font-size: 10px; color: var(--navy-soft);
  }
  .inc-comp-row.lowest .vsl { color: var(--muted); }
  .inc-class-badge {
    font-size: 8px; font-weight: 800;
    padding: 2px 6px; border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.1);
    color: var(--white);
  }
  .inc-comp-row.lowest .inc-class-badge {
    background: var(--navy-deep); color: var(--white);
  }
  .inc-comp-row .pr {
    font-size: 14px; font-weight: 800;
  }

  /* ============ TWO-COLUMN GRID ============ */
  .grid-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
  }
  .grid-2-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
  }
  @media (max-width: 1100px) {
    .grid-2-equal { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
  }
  @media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

  /* ============ TYPE BADGE (PROVIDER / PARTNER) ============ */
  .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px 5px 5px;
    background: rgba(11,31,51,0.06);
    border: 1px solid var(--line-light);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--navy-deep);
    margin-bottom: 12px;
  }
  .type-badge .lvl {
    background: var(--navy-deep);
    color: var(--white);
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
  }
  .type-badge.partner .lvl { background: var(--good); }

  /* ============ PARTNER PROGRAM CARD ============ */
  .partner-card {
    background: var(--white);
    border-radius: 4px;
    padding: 24px 26px;
    border: 1px dashed var(--line-light);
    position: relative;
    overflow: hidden;
  }
  .partner-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11,31,51,0.04), transparent 70%);
  }
  .partner-card .pc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(11,31,51,0.06);
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--navy-deep);
    margin-bottom: 14px;
  }
  .partner-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--navy-deep);
    margin-bottom: 8px;
  }
  .partner-card h3 .light { font-weight: 300; }
  .partner-card .pc-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .partner-card .pc-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ivory);
    border-radius: 4px;
    margin-bottom: 14px;
  }
  .partner-card .pc-progress .num {
    font-size: 26px;
    font-weight: 800;
    color: var(--navy-deep);
    letter-spacing: -0.02em;
  }
  .partner-card .pc-progress .num span { color: var(--muted); font-weight: 500; }
  .partner-card .pc-progress .lbl {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
    letter-spacing: 0.3px;
  }
  .partner-card .pc-bar {
    flex: 1;
    height: 6px;
    background: rgba(11,31,51,0.08);
    border-radius: 999px;
    margin-left: auto;
    max-width: 100px;
  }
  .partner-card .pc-bar-fill {
    height: 100%;
    background: var(--navy-deep);
    border-radius: 999px;
    width: 30%;
  }
  .partner-card .pc-benefits {
    list-style: none;
    margin-bottom: 16px;
  }
  .partner-card .pc-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--navy-deep);
  }
  .partner-card .pc-benefits svg {
    width: 14px; height: 14px;
    stroke: var(--good);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .partner-card .pc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--navy-deep);
    color: var(--white);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .partner-card .pc-cta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  /* ============ STATISTICS SECTION ============ */
  .stats-section {
    margin-top: 32px;
  }
  .stats-head {
    margin-bottom: 18px;
  }
  .stats-head h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy-deep);
    line-height: 1.1;
  }
  .stats-head h2 .light { font-weight: 300; }
  .stats-head .sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    letter-spacing: 0.3px;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 24px;
  }
  @media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } }
  .stat-card {
    background: var(--white);
    padding: 22px 22px;
    border-radius: 4px;
  }
  .stat-card.dark {
    background: var(--navy-deep);
    color: var(--white);
  }
  .stat-card .ic {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ivory);
    color: var(--navy-deep);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .stat-card.dark .ic {
    background: rgba(255,255,255,0.08);
    color: var(--white);
  }
  .stat-card .ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .stat-card .l {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .stat-card.dark .l { color: var(--navy-soft); }
  .stat-card .v {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy-deep);
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-card.dark .v { color: var(--white); }
  .stat-card .desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
  }
  .stat-card.dark .desc { color: var(--navy-soft); }

  /* ROUTE-LIST STAT */
  .stat-routes {
    background: var(--white);
    padding: 22px 22px;
    border-radius: 4px;
    grid-column: span 2;
  }
  @media (max-width: 1100px) { .stat-routes { grid-column: span 1; } }
  .stat-routes-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
  }
  .stat-routes-row:last-child { border-bottom: 0; }
  .stat-routes-row .rank {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ivory);
    color: var(--navy-deep);
    font-size: 10px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .stat-routes-row .name {
    flex: 1;
    font-weight: 600;
    color: var(--navy-deep);
  }
  .stat-routes-row .pct {
    width: 80px;
    height: 4px;
    background: rgba(11,31,51,0.08);
    border-radius: 999px;
  }
  .stat-routes-row .pct-fill {
    height: 100%;
    background: var(--navy-deep);
    border-radius: 999px;
  }
  .stat-routes-row .num {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy-deep);
    min-width: 36px;
    text-align: right;
  }

  /* CLASS BREAKDOWN STAT */
  .stat-class {
    background: var(--white);
    padding: 22px 22px;
    border-radius: 4px;
    grid-column: span 2;
  }

  /* ============ DASHBOARD FOOTER ============ */
  .dash-footer {
    background: var(--navy-deep);
    color: var(--white);
    padding: 56px 40px 28px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .dash-footer-inner { max-width: 1400px; margin: 0 auto; }
  .dash-footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .dash-footer-brand .logo {
    height: 36px;
    fill: var(--white);
    margin-bottom: 16px;
    display: block;
  }
  .dash-footer-brand .name {
    font-size: 13px; font-weight: 800;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 5px;
  }
  .dash-footer-brand .tag {
    font-size: 10px; color: var(--navy-soft);
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .dash-footer-brand .desc {
    font-size: 12px; color: var(--navy-soft);
    line-height: 1.7;
    margin-top: 16px;
    max-width: 320px;
  }
  .dash-footer-col-title {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 18px;
  }
  .dash-footer-links {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 11px;
  }
  .dash-footer-links a {
    font-size: 12.5px;
    color: var(--navy-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
  }
  .dash-footer-links a:hover { color: var(--white); }
  .dash-footer-links a svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5;
    opacity: 0.5;
  }

  .dash-status {
    margin-top: 18px;
    padding: 11px 14px;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 4px;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px;
    color: #6ee7b7;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .dash-status .dot {
    width: 7px; height: 7px;
    background: #6ee7b7;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }

  .dash-footer-bottom {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .dash-copy {
    font-size: 11.5px;
    color: var(--navy-soft);
    letter-spacing: 0.3px;
  }
  .dash-meta {
    display: flex; gap: 24px;
    font-size: 11.5px;
    color: var(--navy-soft);
    align-items: center;
    flex-wrap: wrap;
  }
  .dash-meta a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .dash-meta a:hover { color: var(--white); }
  .dash-meta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.7; }
  .dash-version {
    font-size: 10px;
    color: var(--navy-soft);
    letter-spacing: 1.5px;
    font-family: monospace;
    opacity: 0.7;
    text-transform: uppercase;
  }

  @media (max-width: 900px) {
    .dash-footer { padding: 40px 22px 22px; }
    .dash-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 28px; }
    .dash-footer-brand { grid-column: 1 / -1; }
    .dash-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .dash-meta { flex-wrap: wrap; gap: 14px; }
  }
  @media (max-width: 1100px) { .stat-class { grid-column: span 1; } }
  .class-bars {
    display: flex;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    margin: 14px 0 16px;
  }
  .class-bar.economy { background: var(--cls-economy); }
  .class-bar.premium { background: var(--cls-premium); }
  .class-bar.luxury { background: var(--cls-luxury); }
  .class-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .class-legend-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px;
    color: var(--navy-deep);
  }
  .class-legend-row .dot {
    width: 9px; height: 9px;
    border-radius: 2px;
  }
  .class-legend-row .nm {
    flex: 1;
    font-weight: 600;
  }
  .class-legend-row .pct-num {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--navy-deep);
    min-width: 70px;
    text-align: right;
  }

  .panel {
    background: var(--white);
    border-radius: 4px;
    padding: 24px 26px;
    margin-bottom: 24px;
  }
  .panel-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-light);
  }
  .panel-head h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--navy-deep);
  }
  .panel-head .link {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--navy-deep);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }
  .panel-head .link svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  /* CALENDAR */
  .cal-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
  }
  .cal-tab {
    padding: 8px 14px;
    border: 1px solid var(--line-light);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--navy-deep);
    background: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .cal-tab.active {
    background: var(--navy-deep);
    color: var(--white);
    border-color: var(--navy-deep);
  }
  .cal-tab .count {
    background: var(--ivory);
    color: var(--navy-deep);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
  }
  .cal-tab.active .count { background: rgba(255,255,255,0.2); color: var(--white); }

  .ride-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 16px;
    padding: 14px 12px;
    border-radius: 4px;
    border: 1px solid var(--line-light);
    margin-bottom: 6px;
    align-items: center;
    transition: border-color 0.15s;
  }
  .ride-row:hover { border-color: var(--navy-deep); }
  .ride-row.ongoing {
    background: rgba(16,185,129,0.04);
    border-color: rgba(16,185,129,0.3);
  }
  .ride-date {
    text-align: center;
    padding: 8px 4px;
    background: var(--ivory);
    border-radius: 4px;
  }
  .ride-date .d {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy-deep);
    line-height: 1;
  }
  .ride-date .m {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 3px;
  }
  .ride-info { min-width: 0; }
  .ride-info .rt {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-deep);
    letter-spacing: 0.2px;
  }
  .ride-info .cl {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .ride-info .sv {
    margin-top: 5px;
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .ride-info .sv .tag {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--ivory);
    color: var(--navy-deep);
    text-transform: uppercase;
  }
  .ride-info .sv .tag.cls-luxury { background: var(--navy-deep); color: var(--white); }
  .ride-info .sv .tag.cls-premium { background: rgba(44,74,94,0.12); color: var(--cls-premium); }
  .ride-info .sv .tag.cls-economy { background: rgba(107,138,158,0.15); color: var(--cls-economy); }
  .ride-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-deep);
    text-align: right;
    letter-spacing: 0.3px;
  }
  .ride-status {
    font-size: 8.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .ride-status.pending { background: rgba(245,158,11,0.12); color: var(--warn); }
  .ride-status.ongoing { background: rgba(16,185,129,0.12); color: var(--good); }
  .ride-status.completed { background: rgba(107,114,128,0.1); color: var(--muted); }
  .ride-status.cancelled { background: rgba(239,68,68,0.12); color: var(--hot); }
  .ride-rating {
    margin-left: 5px;
    color: var(--warn);
    font-weight: 700;
  }

  /* PAYOUT */
  .payout {
    background: var(--navy-deep);
    color: var(--white);
    padding: 26px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
  }
  .payout::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  }
  .payout-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    position: relative; z-index: 2;
  }
  .payout-head h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--white);
  }
  .payout-head .link {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
    cursor: pointer;
  }
  .payout-period {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--navy-soft);
    position: relative; z-index: 2;
  }
  .payout-amount {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 8px 0 6px;
    position: relative; z-index: 2;
    line-height: 1.05;
  }
  .payout-date {
    font-size: 11px;
    color: var(--navy-soft);
    margin-bottom: 18px;
    position: relative; z-index: 2;
  }
  .payout-bd {
    background: rgba(255,255,255,0.06);
    padding: 14px 16px;
    border-radius: 4px;
    position: relative; z-index: 2;
  }
  .pb-row {
    display: flex; justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
  }
  .pb-row .l { color: var(--navy-soft); }
  .pb-row.sum {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 6px;
    padding-top: 12px;
    font-weight: 800;
    font-size: 14px;
  }
  .pb-row.sum .l { color: var(--white); }
  .payout-tip {
    margin-top: 14px;
    padding: 11px 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    font-size: 10.5px;
    color: var(--navy-soft);
    line-height: 1.55;
    position: relative; z-index: 2;
  }
  .payout-tip strong { color: var(--white); }

  /* VESSELS */
  .vessel-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ivory);
    border-radius: 4px;
    margin-bottom: 6px;
    align-items: center;
  }
  .vessel-item .icn {
    width: 44px; height: 44px;
    border-radius: 4px;
    background: var(--navy-deep);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .vessel-item .icn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .vessel-item .info { min-width: 0; }
  .vessel-item .nm {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy-deep);
    letter-spacing: 0.3px;
  }
  .vessel-item .mt {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px;
  }
  .vessel-item .meta {
    margin-top: 5px;
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .vessel-item .tag {
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .vessel-item .tag.ok { background: rgba(16,185,129,0.12); color: var(--good); }
  .vessel-item .tag.warn { background: rgba(245,158,11,0.12); color: var(--warn); }
  .vessel-item .tag.cls-premium { background: rgba(44,74,94,0.12); color: var(--cls-premium); }
  .vessel-item .tag.cls-economy { background: rgba(107,138,158,0.15); color: var(--cls-economy); }
  .vessel-item .arr {
    color: var(--muted);
  }
  .vessel-item .arr svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  .add-vessel {
    padding: 18px 14px;
    border: 2px dashed var(--line-light);
    border-radius: 4px;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s;
  }
  .add-vessel:hover {
    border-color: var(--navy-deep);
    color: var(--navy-deep);
    background: var(--ivory);
  }
  .add-vessel svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5;
    margin-bottom: 4px;
  }
  .add-vessel .t {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .add-vessel .s {
    font-size: 9.5px;
    margin-top: 3px;
    letter-spacing: 0.3px;
  }

  /* REVIEWS */
  .rev-item {
    border-left: 2px solid var(--navy-deep);
    padding: 6px 0 6px 14px;
    margin-bottom: 14px;
  }
  .rev-item.muted { border-color: var(--line-light); }
  .rev-hd {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy-deep);
    margin-bottom: 4px;
  }
  .rev-hd .stars { color: var(--warn); letter-spacing: 1px; }
  .rev-hd .stars .empty { color: rgba(11,31,51,0.15); }
  .rev-hd .nm {
    color: var(--navy-deep);
    font-weight: 700;
  }
  .rev-hd .when {
    color: var(--muted);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.3px;
  }
  .rev-txt {
    font-size: 12px;
    color: var(--navy-deep);
    line-height: 1.55;
  }

  /* QUICK STATS */
  .quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .quick-stat {
    padding: 12px 14px;
    background: var(--ivory);
    border-radius: 4px;
  }
  .quick-stat .l {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .quick-stat .v {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy-deep);
    margin-top: 4px;
    letter-spacing: 0.3px;
  }

  /* ============ MOBILE ============ */
  @media (max-width: 1100px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .inc-info-grid { grid-template-columns: repeat(2, 1fr); }
    .inc-info-cell:nth-child(2) { border-right: 0; }
    .inc-info-cell:nth-child(1), .inc-info-cell:nth-child(2) {
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
  }
  @media (max-width: 700px) {
    .topbar-inner { padding: 14px 18px; }
    .brand .logo { height: 38px; }
    .brand-text { display: none; }
    .tier-chip, .online-toggle, .icon-btn:nth-child(3) { display: none; }
    .main { padding: 24px 18px 60px; }
    .greet h1 { font-size: 26px; }
    .today-earnings { width: 100%; min-width: 0; padding: 18px 22px; }
    .today-earnings .v { font-size: 26px; }
    .kpi-row { grid-template-columns: 1fr 1fr; gap: 6px; }
    .kpi { padding: 16px 18px; }
    .kpi .v { font-size: 22px; }
    .tier-progress { padding: 22px 20px; }
    .tp-now-block .v { font-size: 18px; }
    .incoming { padding: 22px 20px; }
    .inc-route { font-size: 22px; }
    .inc-info-grid { grid-template-columns: 1fr 1fr; }
    .inc-info-cell .v { font-size: 18px; }
    .inc-bid-form { grid-template-columns: 1fr; }
    .ibf-submit { width: 100%; justify-content: center; }
  }

  /* ============================================================
   * MOBILE RESPONSIVENESS — COMPREHENSIVE PATCH
   * Covers shared shell (topbar, sidebar, layout, footer) AND
   * common page patterns (.pg-head, .pg-actions, alerts, stats).
   * ============================================================ */

  /* ---------- TABLET (≤ 1100px) ---------- */
  @media (max-width: 1100px) {
    /* Topbar: hide secondary chips, keep brand + burger + lang */
    .tier-chip { display: none; }
    .profile-chip { display: none; }
    .icon-btn { display: none; }
    .online-toggle { padding: 6px 12px; }
    .online-toggle .ot-label { display: none; } /* keep just the dot on tablet */
    .topbar-actions { gap: 10px; }

    /* Greet row stacks today-earnings under heading */
    .greet-row { flex-direction: column; align-items: stretch; }
    .today-earnings { width: 100%; }

    /* Generic page-head pattern used by sub-pages */
    .pg-head { flex-direction: column; align-items: stretch; }
    .pg-actions { width: 100%; }
    .pg-actions .pg-btn, .pg-actions .cal-btn { flex: 1; justify-content: center; }
  }

  /* ---------- MOBILE (≤ 700px) ---------- */
  @media (max-width: 700px) {
    /* Topbar: only logo + burger; hide everything else */
    .online-toggle { display: none; }
    .topbar .lang-switch { display: none; } /* moved into the drawer */
    .topbar-actions { gap: 8px; }

    /* Inc-bid-form already stacks (see above), reinforce */
    .inc-bid-form { grid-template-columns: 1fr !important; }
    .inc-meta { gap: 5px; }
    .inc-tag { font-size: 9.5px; padding: 3px 8px; }

    /* Ride row: stack price below info, more breathing room */
    .ride-row { padding: 14px 12px; gap: 10px; flex-wrap: wrap; }
    .ride-info .rt { font-size: 13px; }
    .ride-info .cl { font-size: 11px; }
    .ride-price { font-size: 16px; }
    .ride-status { font-size: 9px; padding: 3px 7px; letter-spacing: 0.8px; }

    /* Calendar tabs scroll horizontally if too wide */
    .cal-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .cal-tabs::-webkit-scrollbar { display: none; }
    .cal-tab { white-space: nowrap; flex-shrink: 0; font-size: 11px; padding: 8px 12px; }

    /* Partner card, tier progress */
    .partner-card { padding: 22px 20px; }
    .tp-now { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tp-now-block { padding: 10px 12px; }
    .tp-points { font-size: 9px; }

    /* Grid-3 → 1 column on mobile */
    .grid-3 { grid-template-columns: 1fr !important; }

    /* Stats section */
    .stats-grid { grid-template-columns: 1fr !important; }
    .stat-card { padding: 18px 20px; }
    .stat-card .v { font-size: 24px; }

    /* Vessels / Payout / Reviews cards (in info-grid-3) */
    .vessel-item { gap: 10px; padding: 12px 14px; }
    .vessel-item .info .nm { font-size: 13px; }
    .vessel-item .info .mt { font-size: 11px; }
    .vessel-item .meta { flex-wrap: wrap; }

    .rev-item { padding: 12px 14px; }

    .payout-amount { font-size: 36px !important; }

    /* Tier progress points become smaller */
    .tp-point { font-size: 9.5px; }
    .tp-point .pct { font-size: 8.5px; }

    /* Dash footer: stack cleanly */
    .dash-footer { padding: 36px 18px 22px; }
    .dash-footer-top { grid-template-columns: 1fr !important; gap: 26px; padding-bottom: 24px; }
    .dash-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dash-meta { flex-wrap: wrap; gap: 12px 18px; }
  }

  /* ---------- SMALL MOBILE (≤ 480px) ---------- */
  @media (max-width: 480px) {
    /* Topbar: tighten brand */
    .topbar-inner { padding: 10px 14px; gap: 8px; }
    .brand .logo { height: 32px; }
    .nav-burger { width: 38px; height: 38px; }

    /* Main padding */
    .main { padding: 18px 14px 50px; }

    /* Greeting */
    .greet-eyebrow { font-size: 9px; padding: 5px 11px; letter-spacing: 1.5px; }
    .greet h1 { font-size: 22px; }
    .greet p { font-size: 12px; }
    .today-earnings .v { font-size: 22px; }
    .today-earnings { padding: 16px 18px; }

    /* KPI ROW — two columns even on tiny screens (text shrinks) */
    .kpi-row { gap: 8px; }
    .kpi { padding: 14px 14px; }
    .kpi .l { font-size: 9.5px; letter-spacing: 1.5px; }
    .kpi .v { font-size: 20px; }
    .kpi .trend { font-size: 10.5px; }

    /* Tier */
    .tier-progress { padding: 18px 16px; }
    .tp-head h3 { font-size: 17px; }
    .tp-bar { height: 6px; }

    /* Incoming bid */
    .incoming { padding: 18px 16px; }
    .inc-route { font-size: 19px; }
    .inc-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .inc-info-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; padding: 10px; }
    .inc-info-cell .v { font-size: 16px; }
    .ibf-input { padding: 11px 14px 11px 28px; font-size: 13px; }
    .ibf-submit { padding: 13px 18px; font-size: 11px; letter-spacing: 0.5px; }
    .inc-comp-row { grid-template-columns: 24px 1fr auto; gap: 8px; font-size: 11px; }
    .inc-comp-row .inc-class-badge { display: none; }
    .inc-earn-bar { font-size: 10.5px; padding: 8px 12px; flex-direction: column; align-items: flex-start; gap: 4px; }

    /* Payout */
    .payout { padding: 22px 18px; }
    .payout-amount { font-size: 32px !important; letter-spacing: -0.03em; }
    .pb-row { font-size: 11.5px; }
    .pb-row.sum { font-size: 13px; }
    .pb-row.sum span:last-child { font-size: 18px !important; }

    /* Add-vessel */
    .add-vessel { padding: 22px 18px; }

    /* Vessel grid items: stack arrow */
    .vessel-item .arr { display: none; }

    /* Stats section heads */
    .stats-head h2 { font-size: 24px !important; }
    .stats-head .sub { font-size: 11.5px; }

    /* Dash footer text sizes */
    .dash-footer-brand h3, .dash-footer-brand .name { font-size: 22px; }
    .dash-footer-brand .tag { font-size: 9.5px; letter-spacing: 1.5px; }
    .dash-footer-col-title { font-size: 11px; letter-spacing: 1.8px; }
    .dash-footer-links a { font-size: 12px; }
    .dash-copy, .dash-meta a { font-size: 11px; }
  }

  /* ---------- TINY TOUCH-UPS ---------- */
  @media (hover: none) and (pointer: coarse) {
    /* Touch devices: bigger tap targets, no transform-hover (sluggish on mobile) */
    .clickable:hover { transform: none !important; box-shadow: none !important; }
    .kpi:hover, .stat-card:hover, .vessel-item:hover, .rev-item:hover,
    .ride-row:hover, .today-earnings:hover, .tier-progress:hover,
    .partner-card:hover, .payout:hover { transform: none !important; box-shadow: none !important; }
    /* Ensure min tap size 44px on key buttons */
    .ibf-submit, .cal-btn, .pg-btn, .vsl-act, .a-submit, .doc-act, .set-btn { min-height: 42px; }
    .nav-burger { min-width: 44px; min-height: 44px; }
  }

  /* ============================================================
   * MOBILE FIX — Auction card + Calendar panel + Ride rows
   * Prevent horizontal overflow on narrow viewports
   * ============================================================ */
  @media (max-width: 768px) {
    /* Active bid card — tighter padding + content fits */
    .incoming { padding: 20px 18px; }
    .incoming::before { display: none; } /* hide huge radial decoration */
    .inc-head { gap: 8px; }
    .inc-id { font-size: 9.5px; }
    .inc-status { font-size: 10px; }
    .inc-route { font-size: 20px; line-height: 1.15; }
    .inc-meta { gap: 5px; }
    .inc-tag { font-size: 9.5px; padding: 3px 8px; letter-spacing: 0.6px; }

    /* Info grid: 2 cols, equal width */
    .inc-info-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
    .inc-info-cell { padding: 12px 14px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .inc-info-cell:nth-child(2n) { border-right: 0; }
    .inc-info-cell .v { font-size: 17px; }
    .inc-info-cell .v.small { font-size: 12px; }

    /* Bid form stacks fully */
    .inc-bid-form { grid-template-columns: 1fr; gap: 10px; }
    .ibf-submit { width: 100%; justify-content: center; padding: 13px; }

    /* Earn bar stacks */
    .inc-earn-bar { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; padding: 9px 12px; }
    .inc-earn-bar strong { font-size: 13px; }

    /* Competition rows: simpler grid, wrap badge if needed */
    .inc-comp-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; font-size: 11.5px; }
    .inc-comp-row .inc-class-badge { display: none; }
    .inc-comp-row .vsl { font-size: 9.5px; }
    .inc-comp-row .pr { font-size: 13px; }
    .inc-comp-row .ava { width: 24px; height: 24px; font-size: 10px; }

    /* Calendar tabs — 2x2 grid on mobile (no horizontal scroll) */
    .cal-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      overflow: visible;
    }
    .cal-tab {
      display: flex;
      width: 100%;
      padding: 9px 10px;
      font-size: 10.5px;
      letter-spacing: 0.5px;
      justify-content: center;
      align-items: center;
      gap: 5px;
      text-align: center;
      white-space: nowrap;
      min-width: 0;
    }
    .cal-tab .count { font-size: 9px; padding: 1px 6px; }

    /* Ride rows — stack price + status on right column, info wraps */
    .ride-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
    .ride-row .ride-status { grid-column: 2 / span 2; justify-self: start; font-size: 9px; }
    .ride-row .ride-price { font-size: 15px; }
    .ride-date { padding: 6px 4px; }
    .ride-date .d { font-size: 16px; }
    .ride-date .m { font-size: 8px; }
    .ride-info .rt { font-size: 12.5px; line-height: 1.3; }
    .ride-info .cl { font-size: 10.5px; margin-top: 2px; }
    .ride-info .sv { gap: 4px; margin-top: 4px; flex-wrap: wrap; }
    .ride-info .sv .tag { font-size: 8.5px; padding: 2px 6px; letter-spacing: 0.6px; }

    /* Panel-head link — tighter on mobile */
    .panel-head .link { font-size: 10.5px; }

    /* Force any direct child grids in .incoming to allow shrinking */
    .incoming > *, .panel > * { min-width: 0; }
  }

  /* ============================================================
   * CRITICAL MOBILE FIX — Grid items must shrink below content
   * Without min-width:0 on grid items they refuse to shrink and
   * overflow the parent grid cell on mobile.
   * ============================================================ */
  .grid-2-equal > *,
  .grid-3 > *,
  .grid-2 > *,
  .layout > * {
    min-width: 0;
  }
  .incoming, .panel, .payout, .tier-progress, .partner-card {
    min-width: 0;
    max-width: 100%;
  }
  /* Inputs/selects must not push width */
  input, select, textarea, button {
    max-width: 100%;
  }
  .ibf-input, .ibf-select { min-width: 0; }
  /* Inc-meta tags wrap properly on narrow screens */
  .inc-meta { min-width: 0; }
  .inc-meta .inc-tag { max-width: 100%; }
  /* Ride row content can shrink */
  .ride-row { min-width: 0; }
  .ride-info { min-width: 0; }
  .ride-info .rt, .ride-info .cl { overflow-wrap: anywhere; word-wrap: break-word; }