@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --navy:#142b49;
    --navy-2:#203c60;
    --blue:#3468f5;
    --blue-dark:#2455db;
    --ink:#172b45;
    --muted:#718096;
    --line:#e7edf4;
    --surface:#fff;
    --canvas:#f6f8fb;
    --green:#1b9a72;
    --shadow:0 12px 40px rgba(28,50,79,.07);
    --radius:16px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:'DM Sans',Arial,sans-serif;
    color:var(--ink);
    background:var(--canvas);
    font-size:14px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
.icon {
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid transparent;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
    padding:11px 17px
}
.button:hover {
    transform:translateY(-1px)
}
.button-primary {
    background:var(--blue);
    color:#fff;
    box-shadow:0 5px 14px rgba(52,104,245,.18)
}
.button-primary:hover {
    background:var(--blue-dark)
}
.button-outline {
    border-color:#dce4ef;
    color:var(--ink);
    background:#fff
}
.button-light {
    background:#fff;
    color:var(--ink);
    border-color:#e5ebf3
}
.button-white {
    background:#fff;
    color:var(--navy)
}
.button-lg {
    padding:13px 19px;
    font-size:14px
}
.button-sm {
    padding:9px 13px;
    font-size:13px
}
.button-full {
    width:100%
}
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px
}
.eyebrow-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#42c7a0;
    box-shadow:0 0 0 4px #42c7a022
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:11px
}
.brand-mark {
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:var(--blue);
    color:#fff;
    box-shadow:0 6px 16px #3468f52b
}
.brand-copy {
    display:flex;
    flex-direction:column;
    line-height:1.15
}
.brand-copy strong {
    font:800 20px Manrope,sans-serif;
    letter-spacing:-.7px
}
.brand-copy small {
    margin-top:5px;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.3px;
    color:#8997aa
}
.public-body {
    background:#fff
}
.public-nav {
    height:88px;
    max-width:1220px;
    margin:auto;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.public-nav nav {
    display:flex;
    align-items:center;
    gap:29px;
    color:#5e6d82;
    font-size:13px;
    font-weight:600
}
.public-nav nav>a:not(.button):hover {
    color:var(--blue)
}
.public-main {
    max-width:1220px;
    margin:auto;
    padding:0 32px
}
.hero {
    min-height:490px;
    display:grid;
    grid-template-columns:1.04fr .96fr;
    align-items:center;
    gap:25px;
    padding:38px 0 48px
}
.hero-copy {
    padding:0 0 0 5px;
    position:relative;
    z-index:1
}
.hero h1 {
    font:800 clamp(42px,5.3vw,68px)/1.08 Manrope,sans-serif;
    letter-spacing:-3.4px;
    margin:23px 0 18px;
    color:var(--navy)
}
.hero h1 span {
    color:var(--blue)
}
.hero-description {
    max-width:480px;
    color:#6f7d90;
    font-size:16px;
    line-height:1.85;
    margin:0
}
.hero-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px
}
.hero-trust {
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:28px;
    color:#6f7d90;
    font-size:12px
}
.trust-check {
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    background:#e5f8f1;
    color:#178b66;
    border-radius:50%
}
.trust-divider {
    height:17px;
    width:1px;
    background:#dce4ed;
    margin:0 7px
}
.hero-art {
    height:405px;
    position:relative;
    display:grid;
    place-items:center;
    isolation:isolate
}
.art-glow {
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,#e5edff 0,#f2f6ff 48%,#fff 73%);
    z-index:-3
}
.orbit {
    position:absolute;
    border:1px solid #d7e3ff;
    border-radius:50%;
    transform:rotate(-24deg)
}
.orbit-one {
    width:410px;
    height:170px
}
.orbit-two {
    width:360px;
    height:300px;
    transform:rotate(35deg);
    border-color:#e1e9fa
}
.cargo-illustration {
    position:relative;
    width:205px;
    height:190px;
    filter:drop-shadow(0 24px 18px rgba(32,61,110,.15));
    transform:translateY(7px)
}
.cargo-front {
    position:absolute;
    left:22px;
    top:55px;
    width:130px;
    height:125px;
    background:linear-gradient(140deg,#4b7af9,#2c57d5);
    clip-path:polygon(0 0,100% 0,100% 100%,0 82%);
    border-radius:4px
}
.cargo-front span {
    position:relative;
    display:block;
    width:2px;
    height:100%;
    background:#ffffff32;
    margin-left:36px;
    float:left
}
.cargo-front span:nth-child(2) {
    margin-left:30px
}
.cargo-side {
    position:absolute;
    left:152px;
    top:55px;
    width:53px;
    height:125px;
    background:linear-gradient(145deg,#233f87,#152b59);
    clip-path:polygon(0 0,100% -10%,100% 80%,0 100%)
}
.cargo-side span {
    display:block;
    height:2px;
    width:100%;
    background:#ffffff22;
    margin-top:30px
}
.cargo-top {
    position:absolute;
    top:5px;
    left:22px;
    width:183px;
    height:70px;
    background:linear-gradient(135deg,#aec5ff,#668cf7);
    clip-path:polygon(29% 0,100% 34%,71% 100%,0 65%);
    border-radius:4px
}
.floating-tag {
    position:absolute;
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 15px;
    background:#fff;
    border:1px solid #edf1f7;
    border-radius:13px;
    box-shadow:0 12px 35px #223e6814;
    z-index:2
}
.floating-tag strong,.floating-tag small {
    display:block
}
.floating-tag strong {
    font-size:11px
}
.floating-tag small {
    font-size:10px;
    color:#8a97a8;
    margin-top:2px
}
.tag-top {
    top:58px;
    right:2px
}
.tag-bottom {
    bottom:48px;
    left:0
}
.tag-icon {
    width:31px;
    height:31px;
    border-radius:9px;
    background:#e7f9f1;
    color:#13996c;
    display:grid;
    place-items:center
}
.tag-route {
    width:31px;
    height:31px;
    border-radius:9px;
    background:#edf2ff;
    color:#3468f5;
    display:grid;
    place-items:center
}
.art-spark {
    position:absolute;
    color:#7d9cff;
    font-size:23px
}
.spark-one {
    top:74px;
    left:65px
}
.spark-two {
    right:55px;
    bottom:80px;
    font-size:15px
}
.stats-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border:1px solid #e9eef5;
    border-radius:15px;
    padding:23px 25px;
    margin:5px 0 86px;
    box-shadow:0 8px 28px #233f6806
}
.stats-strip>div {
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 24px;
    border-right:1px solid #e9eef5
}
.stats-strip>div:first-child {
    padding-left:5px
}
.stats-strip>div:last-child {
    border:0
}
.stat-symbol {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#edf2ff;
    color:var(--blue)
}
.stats-strip strong,.stats-strip small {
    display:block
}
.stats-strip strong {
    font-size:13px
}
.stats-strip small {
    color:#8793a4;
    font-size:11px;
    margin-top:3px
}
.services-section {
    padding-bottom:82px
}
.section-heading {
    text-align:center;
    margin-bottom:34px
}
.section-heading h2,.bottom-cta h2 {
    font:800 31px/1.25 Manrope,sans-serif;
    letter-spacing:-1.1px;
    margin:11px 0
}
.section-heading p,.bottom-cta p {
    color:#78869a;
    margin:0
}
.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.service-card {
    padding:27px 25px 29px;
    border:1px solid #e9eef5;
    border-radius:15px;
    transition:transform .2s ease,box-shadow .2s ease
}
.service-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow)
}
.service-icon {
    width:49px;
    height:49px;
    display:grid;
    place-items:center;
    border-radius:14px
}
.service-blue {
    background:#edf2ff;
    color:#3468f5
}
.service-violet {
    background:#f1edff;
    color:#7958dc
}
.service-green {
    background:#e6f8f0;
    color:#16956b
}
.service-rose {
    background:#fff0f2;
    color:#dc5268
}
.service-card h3 {
    font:700 16px Manrope,sans-serif;
    margin:19px 0 8px
}
.service-card p {
    color:#7b8899;
    font-size:13px;
    line-height:1.8;
    margin:0
}
.bottom-cta {
    background:var(--navy);
    color:#fff;
    border-radius:18px;
    padding:34px 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:60px;
    overflow:hidden;
    position:relative
}
.bottom-cta:after {
    content:"";
    position:absolute;
    right:210px;
    top:-110px;
    width:260px;
    height:260px;
    border:1px solid #ffffff12;
    border-radius:50%;
    box-shadow:0 0 0 32px #ffffff05,0 0 0 64px #ffffff04
}
.bottom-cta .eyebrow {
    color:#9bb5ff
}
.bottom-cta h2 {
    font-size:24px;
    margin:8px 0
}
.bottom-cta p {
    color:#c1ccdc;
    font-size:13px
}
.bottom-cta .button {
    position:relative;
    z-index:1;
    white-space:nowrap
}
.public-footer {
    border-top:1px solid #eef1f6;
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:23px max(32px,calc((100vw - 1156px)/2));
    color:#8995a5;
    font-size:11px
}
.app-body {
    background:var(--canvas)
}
.app-shell {
    min-height:100vh
}
.sidebar {
    position:fixed;
    z-index:20;
    left:0;
    top:0;
    bottom:0;
    width:252px;
    background:#fff;
    border-right:1px solid #e9eef4;
    padding:25px 17px 17px;
    display:flex;
    flex-direction:column
}
.sidebar .brand {
    padding:0 9px 31px
}
.sidebar .brand-mark {
    width:39px;
    height:39px;
    border-radius:11px
}
.sidebar .brand-copy strong {
    font-size:18px
}
.nav-label {
    padding:0 12px;
    margin:0 0 10px;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
    color:#9aa5b4
}
.side-nav {
    display:flex;
    flex-direction:column;
    gap:4px
}
.nav-link {
    min-height:44px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 12px;
    border-radius:9px;
    color:#68778b;
    font-size:12px;
    font-weight:600;
    transition:background .15s,color .15s
}
.nav-link:hover {
    background:#f5f7fc;
    color:var(--blue)
}
.nav-link.active {
    background:#edf2ff;
    color:var(--blue);
    font-weight:700
}
.nav-link .icon {
    width:19px;
    height:19px
}
.nav-soon {
    font-size:8px;
    font-weight:700;
    color:#99a5b5;
    background:#f1f4f8;
    padding:3px 5px;
    border-radius:5px;
    margin-left:auto
}
.sidebar-bottom {
    margin-top:auto
}
.help-card {
    background:#f5f7fc;
    border:1px solid #edf0f6;
    border-radius:12px;
    padding:15px;
    margin:15px 2px 12px
}
.help-icon {
    color:var(--blue)
}
.help-card strong {
    display:block;
    font-size:11px;
    margin-top:9px
}
.help-card p {
    font-size:10px;
    color:#7c899b;
    line-height:1.6;
    margin:4px 0 0
}
.logout-link {
    border-top:1px solid #edf0f5;
    border-radius:0;
    padding-top:13px
}
.main-area {
    margin-left:252px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}
.topbar {
    height:75px;
    background:#fff;
    border-bottom:1px solid #e9eef4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 36px;
    position:sticky;
    top:0;
    z-index:10
}
.breadcrumb {
    font-size:11px;
    color:#8a96a7
}
.breadcrumb span {
    padding:0 9px;
    color:#c1cad5
}
.breadcrumb strong {
    font-weight:700;
    color:#2b3f59
}
.topbar-user {
    display:flex;
    align-items:center;
    gap:10px
}
.avatar {
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e9efff;
    color:var(--blue);
    font-weight:800;
    font-size:13px
}
.topbar-user-copy strong,.topbar-user-copy small {
    display:block
}
.topbar-user-copy strong {
    font-size:11px
}
.topbar-user-copy small {
    font-size:10px;
    color:#8995a6;
    margin-top:2px
}
.menu-toggle {
    display:none
}
.page-content {
    padding:31px 36px 38px;
    flex:1;
    max-width:1450px;
    width:100%;
    margin:0 auto
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px
}
.page-heading h1 {
    font:800 26px/1.3 Manrope,sans-serif;
    letter-spacing:-.8px;
    margin:7px 0 5px;
    color:#172d49
}
.page-heading p {
    color:#7b899a;
    font-size:12px;
    margin:0
}
.heading-date {
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #e7edf4;
    padding:10px 13px;
    border-radius:9px;
    color:#65758b;
    font-size:11px;
    white-space:nowrap
}
.welcome-banner {
    min-height:205px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 33px;
    border-radius:16px;
    background:linear-gradient(110deg,#19375e 0%,#244b7d 65%,#315da0 100%);
    color:#fff;
    margin-bottom:30px
}
.welcome-copy {
    max-width:520px;
    position:relative;
    z-index:2
}
.welcome-label {
    font-size:9px;
    letter-spacing:1.5px;
    font-weight:800;
    color:#b8cbff
}
.welcome-copy h2 {
    font:800 24px/1.3 Manrope,sans-serif;
    letter-spacing:-.5px;
    margin:9px 0
}
.welcome-copy p {
    max-width:465px;
    font-size:12px;
    line-height:1.8;
    color:#cfdbed;
    margin:0 0 16px
}
.banner-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:11px;
    font-weight:700
}
.banner-link:hover {
    color:#c4d4ff
}
.welcome-art {
    position:absolute;
    right:48px;
    top:0;
    bottom:0;
    width:260px;
    display:grid;
    place-items:center;
    color:#cbd9ff
}
.banner-circle {
    position:absolute;
    border:1px solid #ffffff20;
    border-radius:50%
}
.circle-a {
    width:230px;
    height:230px
}
.circle-b {
    width:170px;
    height:170px;
    box-shadow:0 0 0 24px #ffffff06
}
.banner-box {
    width:105px;
    height:105px;
    border-radius:27px;
    background:linear-gradient(145deg,#779bff,#4774e9);
    box-shadow:0 17px 35px #10284e50;
    display:grid;
    place-items:center;
    transform:rotate(-8deg);
    color:#fff
}
.banner-route {
    position:absolute;
    right:34px;
    top:39px;
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    background:#ffffff1c;
    border:1px solid #ffffff25;
    border-radius:12px
}
.section-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px
}
.section-title-row h2 {
    font:800 16px Manrope,sans-serif;
    letter-spacing:-.3px;
    margin:0
}
.section-title-row p {
    font-size:11px;
    color:#8591a2;
    margin:5px 0 0
}
.module-count {
    font-size:9px;
    letter-spacing:1px;
    font-weight:800;
    color:#8a97a8
}
.module-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px
}
.module-card {
    padding:18px 17px 16px;
    background:#fff;
    border:1px solid #e8edf4;
    border-radius:13px;
    min-height:176px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transition:transform .18s,box-shadow .18s,border-color .18s
}
.module-card:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 28px #203b610b;
    border-color:#d9e3f4
}
.module-icon {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    margin-bottom:12px
}
.icon-blue {
    background:#edf2ff;
    color:#3468f5
}
.icon-violet {
    background:#f1edff;
    color:#7958dc
}
.icon-amber {
    background:#fff5df;
    color:#c58b1d
}
.icon-green {
    background:#e6f8f0;
    color:#16956b
}
.icon-rose {
    background:#fff0f2;
    color:#dc5268
}
.icon-slate {
    background:#edf1f5;
    color:#5d7086
}
.module-card h3 {
    font:700 12px Manrope,sans-serif;
    margin:0 0 5px
}
.module-card p {
    color:#8290a2;
    font-size:10px;
    line-height:1.7;
    margin:0 0 15px
}
.module-footer {
    display:flex;
    align-items:center;
    gap:6px;
    color:#8a96a6;
    font-size:9px;
    margin-top:auto
}
.status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#c4ccd7
}
.audit-note {
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-top:22px;
    padding:16px;
    background:#fff;
    border:1px solid #e8edf4;
    border-radius:12px
}
.audit-note-icon {
    color:var(--blue);
    background:#edf2ff;
    border-radius:9px;
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    flex-shrink:0
}
.audit-note strong {
    font-size:11px
}
.audit-note p {
    color:#7d8b9d;
    font-size:10px;
    line-height:1.7;
    margin:4px 0 0
}
.app-footer {
    padding:15px 36px;
    display:flex;
    justify-content:space-between;
    color:#96a1b0;
    font-size:10px;
    border-top:1px solid #e8edf4;
    background:#fff
}
.user-welcome {
    display:flex;
    align-items:center;
    gap:18px;
    padding:27px;
    background:linear-gradient(110deg,#eaf0ff,#f8faff);
    border:1px solid #e0e8ff;
    border-radius:15px;
    margin-bottom:30px
}
.user-welcome-icon {
    width:57px;
    height:57px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:#fff;
    color:var(--blue);
    box-shadow:0 6px 18px #3468f51a
}
.user-welcome h2 {
    font:800 19px Manrope,sans-serif;
    margin:0 0 6px
}
.user-welcome p {
    font-size:12px;
    line-height:1.8;
    color:#718096;
    margin:0;
    max-width:650px
}
.user-module-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.alert {
    padding:12px 15px;
    border-radius:10px;
    font-size:12px;
    margin:0 0 18px
}
.alert-error {
    background:#fff0f1;
    color:#a12e40;
    border:1px solid #ffd9df
}
.alert-success {
    background:#e9f9f2;
    color:#16734f;
    border:1px solid #c9f0df
}
.public-main>.alert {
    margin-top:15px
}
.auth-wrap {
    min-height:calc(100vh - 160px);
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:970px;
    margin:35px auto 55px;
    border:1px solid #e9eef5;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 65px #1b35550c;
    background:#fff
}
.auth-aside {
    background:linear-gradient(145deg,#142b49,#244d7e);
    color:#fff;
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:550px;
    position:relative;
    overflow:hidden
}
.auth-aside:after {
    content:"";
    position:absolute;
    right:-100px;
    bottom:35px;
    width:300px;
    height:300px;
    border:1px solid #ffffff1c;
    border-radius:50%;
    box-shadow:0 0 0 35px #ffffff06,0 0 0 70px #ffffff04
}
.brand-on-dark {
    position:relative;
    z-index:1;
    align-self:flex-start
}
.brand-on-dark .brand-copy strong {
    color:#fff
}
.brand-on-dark .brand-copy small {
    color:#bac8dc
}
.auth-aside>div:nth-child(2) {
    position:relative;
    z-index:1;
    margin:40px 0
}
.eyebrow-light {
    color:#b8ccff
}
.auth-aside h1 {
    font:800 34px/1.25 Manrope,sans-serif;
    letter-spacing:-1.2px;
    margin:17px 0
}
.auth-aside p {
    font-size:13px;
    line-height:1.9;
    color:#c5d3e6;
    max-width:310px
}
.auth-aside-foot {
    display:flex;
    align-items:center;
    gap:9px;
    color:#c5d3e6;
    font-size:11px;
    position:relative;
    z-index:1
}
.auth-panel {
    padding:52px 45px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.auth-form-head {
    margin-bottom:26px
}
.auth-form-head h2 {
    font:800 29px Manrope,sans-serif;
    letter-spacing:-.8px;
    margin:8px 0
}
.auth-form-head p {
    font-size:12px;
    color:#8290a2;
    margin:0
}
.form-stack {
    display:flex;
    flex-direction:column;
    gap:18px
}
.form-stack label,.installer-form label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:11px;
    font-weight:700;
    color:#40516a
}
.input-wrap {
    display:flex;
    align-items:center;
    gap:10px;
    height:47px;
    padding:0 13px;
    border:1px solid #dfe6ef;
    border-radius:9px;
    color:#93a0b1;
    transition:border .15s,box-shadow .15s
}
.input-wrap:focus-within {
    border-color:#8da9ff;
    box-shadow:0 0 0 3px #3468f511
}
.input-wrap input {
    border:0;
    outline:0;
    min-width:0;
    width:100%;
    background:transparent;
    color:var(--ink);
    font-size:12px
}
.input-wrap input::placeholder {
    color:#a7b0bd
}
.auth-switch {
    text-align:center;
    font-size:11px;
    color:#7d8a9b;
    margin:23px 0 17px
}
.auth-switch a {
    color:var(--blue);
    font-weight:700
}
.back-home {
    display:block;
    text-align:center;
    color:#7c899b;
    font-size:11px
}
.back-home:hover {
    color:var(--blue)
}
.auth-wrap-register {
    margin-top:25px
}
.auth-wrap-register .auth-aside {
    min-height:600px
}
.track-page {
    max-width:760px;
    margin:65px auto 100px;
    min-height:400px
}
.track-heading {
    text-align:center
}
.track-heading h1 {
    font:800 39px Manrope,sans-serif;
    letter-spacing:-1.5px;
    margin:12px 0
}
.track-heading p {
    font-size:13px;
    color:#7c899b
}
.track-form {
    padding:26px;
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:15px;
    box-shadow:var(--shadow);
    margin:30px 0
}
.track-form label {
    font-size:11px;
    font-weight:700;
    display:block;
    margin-bottom:9px
}
.track-input-row {
    display:flex;
    gap:10px
}
.track-input-row input {
    flex:1;
    min-width:0;
    border:1px solid #dfe6ef;
    border-radius:9px;
    padding:0 13px;
    outline:none
}
.track-input-row input:focus {
    border-color:#8da9ff
}
.track-result-placeholder {
    text-align:center;
    padding:25px;
    border:1px dashed #dce4ef;
    border-radius:14px;
    margin-bottom:22px
}
.track-result-placeholder .service-icon {
    margin:auto
}
.track-result-placeholder h2 {
    font:700 17px Manrope,sans-serif;
    margin:15px 0 7px
}
.track-result-placeholder p {
    max-width:450px;
    margin:auto;
    color:#7e8c9d;
    font-size:12px;
    line-height:1.8
}
.empty-state {
    text-align:center;
    max-width:520px;
    margin:80px auto
}
.empty-state .service-icon {
    margin:auto
}
.empty-state h1 {
    font:800 30px Manrope,sans-serif
}
.empty-state p {
    color:#7e8b9d;
    margin-bottom:24px
}
.installer-body {
    background:#f5f7fb;
    min-height:100vh;
    padding:35px 18px
}
.installer-shell {
    max-width:650px;
    margin:auto
}
.installer-shell>.brand {
    margin-bottom:24px
}
.installer-card {
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:18px;
    padding:35px;
    box-shadow:var(--shadow)
}
.installer-card-wide {
    padding:32px
}
.installer-card h1 {
    font:800 28px Manrope,sans-serif;
    letter-spacing:-.9px;
    margin:9px 0
}
.installer-card>p {
    font-size:12px;
    color:#7d8999;
    line-height:1.8;
    margin:0 0 23px
}
.installer-form h2 {
    font:800 13px Manrope,sans-serif;
    margin:25px 0 14px
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.installer-form input {
    height:43px;
    border:1px solid #dfe6ef;
    border-radius:8px;
    padding:0 11px;
    outline:none;
    background:#fff;
    width:100%;
    margin-top:3px
}
.installer-form input:focus {
    border-color:#8da9ff;
    box-shadow:0 0 0 3px #3468f511
}
.installer-form label small {
    font-weight:400;
    color:#8591a2
}
.form-span {
    grid-column:1/-1
}
.installer-form .button {
    margin-top:24px
}
.installer-footnote {
    font-size:10px;
    color:#8793a3;
    text-align:center;
    margin:12px 0 0
}
.installer-copyright {
    text-align:center;
    color:#9aa5b3;
    font-size:10px;
    margin:22px 0
}
.install-success {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:50%;
    background:#e4f8ef;
    color:#16875f;
    font-size:23px;
    margin-bottom:18px
}
.install-next {
    background:#f6f8fb;
    border:1px solid #e8edf4;
    border-radius:11px;
    padding:16px;
    margin:20px 0 22px;
    font-size:12px
}
.install-next ol {
    padding-left:20px;
    color:#6f7d90;
    line-height:2
}
.install-next code {
    background:#e8edf4;
    padding:2px 5px;
    border-radius:4px
}
.installer-warning {
    font-size:11px!important;
    color:#a05b13!important;
    margin:15px 0 0!important
}
.installer-card .alert ul {
    padding-left:20px;
    margin:8px 0 0
}
@media(min-width:1400px) {
    .module-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .page-content {
        padding-left:43px;
        padding-right:43px
    }
}
@media(max-width:1120px) {
    .sidebar {
        width:224px
    }
    .main-area {
        margin-left:224px
    }
    .page-content {
        padding:27px 25px
    }
    .topbar {
        padding:0 25px
    }
    .module-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .hero h1 {
        font-size:56px
    }
    .hero-art {
        transform:scale(.9)
    }
    .stats-strip>div {
        padding:0 12px
    }
}
@media(max-width:820px) {
    .public-nav {
        height:75px;
        padding:0 22px
    }
    .public-nav nav {
        gap:14px
    }
    .public-nav nav>a:not(.button) {
        display:none
    }
    .public-main {
        padding:0 22px
    }
    .hero {
        grid-template-columns:1fr;
        gap:0;
        padding-top:50px
    }
    .hero-copy {
        text-align:center
    }
    .hero-description {
        margin:auto
    }
    .hero-actions,.hero-trust {
        justify-content:center
    }
    .hero-art {
        height:330px;
        max-width:500px;
        width:100%;
        margin:auto;
        transform:scale(.86)
    }
    .stats-strip {
        margin-bottom:60px;
        padding:18px 12px
    }
    .stats-strip>div {
        padding:0 9px;
        gap:8px
    }
    .stat-symbol {
        width:34px;
        height:34px
    }
    .stats-strip small {
        font-size:10px
    }
    .service-grid {
        gap:12px
    }
    .service-card {
        padding:20px 16px
    }
    .bottom-cta {
        padding:28px;
        align-items:flex-start;
        flex-direction:column
    }
    .sidebar {
        transform:translateX(-100%);
        transition:transform .22s ease;
        box-shadow:none
    }
    .sidebar-open .sidebar {
        transform:translateX(0);
        box-shadow:15px 0 45px #12294a20
    }
    .sidebar-backdrop {
        display:none;
        position:fixed;
        inset:0;
        background:#0c1b2e55;
        z-index:15
    }
    .sidebar-open .sidebar-backdrop {
        display:block
    }
    .main-area {
        margin-left:0
    }
    .menu-toggle {
        display:grid
    }
    .topbar {
        justify-content:flex-start;
        gap:15px
    }
    .breadcrumb {
        flex:1
    }
    .module-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .welcome-art {
        right:5px;
        opacity:.7
    }
    .auth-wrap {
        max-width:650px;
        grid-template-columns:.8fr 1fr;
        margin:25px 18px 45px
    }
    .auth-aside {
        padding:27px;
        min-height:510px
    }
    .auth-aside h1 {
        font-size:28px
    }
    .auth-panel {
        padding:35px 27px
    }
    .auth-wrap-register .auth-aside {
        min-height:550px
    }
}
@media(max-width:560px) {
    .public-nav {
        padding:0 16px
    }
    .public-nav .brand-copy strong {
        font-size:17px
    }
    .public-nav .brand-mark {
        width:37px;
        height:37px
    }
    .public-nav nav {
        gap:8px
    }
    .public-nav nav .button {
        padding:8px 9px;
        font-size:11px
    }
    .public-nav nav .button-outline {
        display:none
    }
    .public-main {
        padding:0 16px
    }
    .hero {
        padding-top:35px
    }
    .hero h1 {
        font-size:43px;
        letter-spacing:-2px
    }
    .hero-description {
        font-size:14px
    }
    .hero-actions {
        gap:8px
    }
    .hero-actions .button {
        padding:11px 12px;
        font-size:12px
    }
    .hero-art {
        height:285px;
        transform:scale(.76);
        margin-top:-5px;
        margin-bottom:-5px
    }
    .stats-strip {
        grid-template-columns:1fr;
        gap:14px;
        padding:17px
    }
    .stats-strip>div,.stats-strip>div:first-child {
        padding:0;
        border:0
    }
    .services-section {
        padding-bottom:50px
    }
    .section-heading h2 {
        font-size:25px
    }
    .service-grid {
        grid-template-columns:1fr
    }
    .service-card {
        padding:20px
    }
    .service-card h3 {
        margin-top:12px
    }
    .bottom-cta {
        padding:24px 20px;
        margin-bottom:35px
    }
    .bottom-cta h2 {
        font-size:22px
    }
    .public-footer {
        padding:20px 16px;
        flex-direction:column;
        gap:5px
    }
    .topbar {
        height:65px;
        padding:0 16px
    }
    .topbar-user-copy {
        display:none
    }
    .page-content {
        padding:23px 16px
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:12px
    }
    .page-heading h1 {
        font-size:23px
    }
    .heading-date {
        font-size:10px;
        padding:8px 10px
    }
    .welcome-banner {
        padding:23px 20px;
        min-height:220px
    }
    .welcome-copy h2 {
        font-size:20px;
        max-width:240px
    }
    .welcome-copy p {
        max-width:270px;
        font-size:11px
    }
    .welcome-art {
        right:-105px;
        opacity:.35
    }
    .section-title-row {
        align-items:flex-start
    }
    .section-title-row p {
        max-width:270px;
        line-height:1.7
    }
    .module-grid,.user-module-grid {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .module-card {
        padding:14px 12px;
        min-height:170px
    }
    .module-card h3 {
        font-size:11px
    }
    .module-card p {
        font-size:10px
    }
    .module-footer {
        font-size:8px
    }
    .module-icon {
        width:36px;
        height:36px
    }
    .audit-note {
        padding:13px
    }
    .app-footer {
        padding:14px 16px;
        font-size:9px
    }
    .user-welcome {
        align-items:flex-start;
        padding:20px;
        gap:12px
    }
    .user-welcome-icon {
        width:43px;
        height:43px;
        flex-shrink:0
    }
    .user-welcome h2 {
        font-size:16px
    }
    .user-welcome p {
        font-size:11px
    }
    .auth-wrap {
        display:block;
        margin:15px 0 30px;
        border-radius:14px
    }
    .auth-aside,.auth-wrap-register .auth-aside {
        min-height:unset;
        padding:22px 23px 24px
    }
    .auth-aside>div:nth-child(2) {
        margin:32px 0 20px
    }
    .auth-aside h1 {
        font-size:26px;
        margin:10px 0
    }
    .auth-aside p {
        margin-bottom:0
    }
    .auth-aside-foot {
        display:none
    }
    .auth-panel {
        padding:30px 23px
    }
    .auth-form-head h2 {
        font-size:26px
    }
    .track-page {
        margin:40px auto 65px
    }
    .track-heading h1 {
        font-size:31px
    }
    .track-form {
        padding:17px
    }
    .track-input-row {
        flex-direction:column
    }
    .track-input-row input {
        height:45px
    }
    .installer-body {
        padding:22px 12px
    }
    .installer-card,.installer-card-wide {
        padding:24px 18px
    }
    .installer-card h1 {
        font-size:24px
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .form-span {
        grid-column:auto
    }
}
/* Phase 2 — package and pre-alert workspace */
.panel {
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:20px
}
.panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 22px;
    border-bottom:1px solid #edf1f6
}
.panel-head h2 {
    font:800 14px Manrope,sans-serif;
    margin:0
}
.panel-head p {
    font-size:11px;
    color:#8491a2;
    margin:4px 0 0
}
.form-panel {
    padding:25px
}
.cargo-form label,.search-filter label {
    display:flex;
    flex-direction:column;
    gap:7px;
    color:#40516a;
    font-size:11px;
    font-weight:700
}
.cargo-form input,.cargo-form select,.cargo-form textarea,.search-filter input,.search-filter select,.review-details textarea {
    width:100%;
    border:1px solid #dfe6ef;
    border-radius:9px;
    background:#fff;
    padding:11px 12px;
    color:var(--ink);
    font:500 12px 'DM Sans',Arial,sans-serif;
    outline:none;
    min-width:0
}
.cargo-form input,.cargo-form select,.search-filter input,.search-filter select {
    min-height:43px
}
.cargo-form textarea,.review-details textarea {
    resize:vertical;
    line-height:1.6
}
.cargo-form input:focus,.cargo-form select:focus,.cargo-form textarea:focus,.search-filter input:focus,.search-filter select:focus,.review-details textarea:focus {
    border-color:#8da9ff;
    box-shadow:0 0 0 3px #3468f511
}
.cargo-form .form-grid {
    gap:17px
}
.required {
    color:#d4495b
}
.form-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid #edf1f6
}
.table-scroll {
    width:100%;
    overflow-x:auto
}
.data-table {
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    white-space:nowrap
}
.data-table th {
    text-align:left;
    padding:12px 16px;
    background:#f8fafd;
    color:#8794a5;
    font-size:9px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    border-bottom:1px solid #e9eef5
}
.data-table td {
    padding:14px 16px;
    border-bottom:1px solid #eff2f7;
    color:#506078;
    vertical-align:middle
}
.data-table tr:last-child td {
    border-bottom:0
}
.data-table td strong {
    color:#273951;
    font-size:11px
}
.table-subtext {
    display:block;
    color:#96a1af;
    font-size:9px;
    margin-top:4px;
    max-width:210px;
    overflow:hidden;
    text-overflow:ellipsis
}
.status-pill {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:7px;
    font-size:9px;
    font-weight:800;
    white-space:nowrap
}
.status-good {
    color:#167653;
    background:#e6f8ef
}
.status-warn {
    color:#9c6312;
    background:#fff3dc
}
.status-info {
    color:#315bc4;
    background:#edf2ff
}
.status-neutral {
    color:#68788c;
    background:#f0f3f7
}
.empty-inline {
    text-align:center;
    padding:48px 22px
}
.empty-inline .module-icon {
    margin:0 auto 10px
}
.empty-inline h3 {
    font:800 14px Manrope,sans-serif;
    margin:6px 0
}
.empty-inline p {
    max-width:420px;
    margin:0 auto 16px;
    color:#8290a2;
    font-size:11px;
    line-height:1.8
}
.filter-tabs {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:0 0 17px
}
.filter-tab {
    padding:9px 13px;
    border:1px solid #e2e8f0;
    border-radius:9px;
    background:#fff;
    color:#758397;
    font-size:11px;
    font-weight:700
}
.filter-tab.active {
    background:#edf2ff;
    color:var(--blue);
    border-color:#dce5ff
}
.review-details {
    min-width:140px
}
.review-details summary {
    cursor:pointer;
    color:var(--blue);
    font-size:10px;
    font-weight:800
}
.review-details form {
    min-width:225px;
    max-width:290px;
    padding:12px;
    margin-top:8px;
    border:1px solid #e8edf4;
    border-radius:10px;
    background:#fff;
    white-space:normal;
    box-shadow:0 8px 24px #1b35550b
}
.review-details label {
    font-size:10px
}
.review-actions {
    display:flex;
    gap:7px;
    margin-top:9px
}
.button-danger {
    background:#fff0f1;
    color:#b73549;
    border-color:#ffd9df
}
.button-danger:hover {
    background:#ffe4e7
}
.muted-small {
    color:#8a96a6;
    font-size:10px
}
.table-action {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--blue);
    font-size:10px;
    font-weight:800
}
.search-filter {
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
    padding:18px 20px;
    border-bottom:1px solid #edf1f6
}
.search-filter .search-field {
    flex:1;
    min-width:220px
}
.search-filter label:not(.search-field) {
    width:175px
}
.search-filter .button {
    height:40px
}
.detail-grid {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
    gap:18px
}
.detail-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:0;
    padding:4px 22px 22px;
    gap:20px
}
.detail-list>div {
    min-width:0
}
.detail-list dt {
    color:#8a96a6;
    font-size:10px;
    margin-bottom:5px
}
.detail-list dd {
    margin:0;
    color:#33465f;
    font-size:12px;
    font-weight:700;
    overflow-wrap:anywhere
}
.detail-list dd small {
    display:block;
    font-size:10px;
    font-weight:400;
    color:#8491a2;
    margin-top:4px
}
.detail-list .detail-full {
    grid-column:1/-1
}
.detail-grid>.panel>.cargo-form {
    padding:20px
}
.history-panel {
    margin-top:18px
}
.timeline {
    padding:8px 22px 22px
}
.timeline-item {
    display:flex;
    gap:13px;
    position:relative;
    padding-bottom:21px
}
.timeline-item:not(:last-child):before {
    content:"";
    position:absolute;
    left:5px;
    top:13px;
    bottom:0;
    width:1px;
    background:#e3eaf4
}
.timeline-item:last-child {
    padding-bottom:0
}
.timeline-dot {
    position:relative;
    z-index:1;
    width:11px;
    height:11px;
    margin-top:4px;
    flex-shrink:0;
    border:3px solid #dbe5ff;
    background:var(--blue);
    border-radius:50%;
    box-shadow:0 0 0 3px #f1f5ff
}
.timeline-content {
    flex:1;
    min-width:0
}
.timeline-title {
    display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap
}
.timeline-title strong {
    font-size:11px;
    color:#2d405a
}
.timeline-title time,.timeline-content small {
    font-size:9px;
    color:#9aa5b3
}
.timeline-content p {
    font-size:11px;
    color:#6e7e92;
    margin:5px 0
}
.track-found {
    padding:22px
}
.track-found-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding-bottom:18px;
    border-bottom:1px solid #edf1f6
}
.track-found-head h2 {
    font:800 20px Manrope,sans-serif;
    margin:8px 0
}
.track-found-head p {
    font-size:12px;
    color:#7b899b;
    margin:0
}
.track-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid #edf1f6
}
.track-facts small,.track-facts strong {
    display:block
}
.track-facts small {
    font-size:9px;
    color:#8a96a6;
    margin-bottom:5px
}
.track-facts strong {
    font-size:11px;
    color:#344760;
    overflow-wrap:anywhere
}
.history-heading {
    font:800 13px Manrope,sans-serif;
    margin:20px 0 0
}
.quick-stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:0 0 27px
}
.quick-stat {
    background:#fff;
    border:1px solid #e8edf4;
    border-radius:13px;
    padding:17px 19px;
    display:flex;
    flex-direction:column;
    gap:4px;
    transition:transform .15s,box-shadow .15s
}
.quick-stat:hover {
    transform:translateY(-2px);
    box-shadow:var(--shadow)
}
.quick-stat span {
    font-size:10px;
    font-weight:700;
    color:#7d8b9e
}
.quick-stat strong {
    font:800 26px Manrope,sans-serif;
    color:#203b60
}
.quick-stat small {
    font-size:9px;
    color:#9aa5b3
}
.module-live {
    color:var(--blue)!important;
    font-weight:800;
    text-decoration:none
}
.module-live .icon {
    margin-left:auto
}
@media(max-width:800px) {
    .detail-grid {
        grid-template-columns:1fr
    }
    .quick-stats {
        grid-template-columns:1fr 1fr
    }
    .quick-stats .quick-stat:last-child:nth-child(odd) {
        grid-column:1/-1
    }
    .form-panel {
        padding:19px
    }
    .detail-list {
        padding:4px 17px 18px
    }
    .panel-head {
        padding:17px
    }
    .search-filter label:not(.search-field) {
        width:calc(50% - 8px)
    }
    .search-filter .search-field {
        flex-basis:100%
    }
}
@media(max-width:560px) {
    .quick-stats {
        gap:8px
    }
    .quick-stat {
        padding:13px
    }
    .quick-stat strong {
        font-size:22px
    }
    .quick-stat span {
        font-size:9px
    }
    .quick-stat small {
        font-size:8px
    }
    .form-actions {
        flex-direction:column-reverse
    }
    .form-actions .button {
        width:100%
    }
    .detail-list {
        grid-template-columns:1fr 1fr;
        gap:15px
    }
    .track-found {
        padding:17px
    }
    .track-found-head {
        flex-direction:column
    }
    .track-facts {
        grid-template-columns:1fr
    }
    .search-filter label:not(.search-field) {
        width:100%
    }
    .search-filter .button {
        flex:1
    }
    .data-table th,.data-table td {
        padding:12px
    }
    .review-details form {
        min-width:200px
    }
}
/* Phase 3: shipment booking and tracking components */
.shipment-create-layout {
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);
    gap:18px;
    align-items:start
}
.shipment-create-layout>.form-panel {
    margin-bottom:20px
}
.shipment-side-panel {
    position:sticky;
    top:95px
}
.side-panel-body {
    padding:18px 21px;
    color:#718097;
    font-size:11px;
    line-height:1.8
}
.side-panel-body p {
    margin:0 0 13px
}
.side-panel-body ul {
    padding-left:18px;
    margin:8px 0 0
}
.side-panel-body li {
    margin:7px 0
}
.reference-example {
    padding:12px 13px;
    border:1px dashed #cbd8f5;
    border-radius:9px;
    background:#f6f8ff;
    color:#294fba;
    font-weight:800;
    letter-spacing:.3px;
    overflow-wrap:anywhere
}
.form-section-title {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:4px 0 17px;
    margin:0 0 18px;
    border-bottom:1px solid #edf1f6
}
.form-section-title:not(:first-of-type) {
    margin-top:30px
}
.form-section-title>span {
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    flex-shrink:0;
    border-radius:9px;
    background:#edf2ff;
    color:#3468f5;
    font-size:10px;
    font-weight:900
}
.form-section-title h2 {
    margin:0;
    color:#263b57;
    font:800 13px Manrope,sans-serif
}
.form-section-title p {
    margin:4px 0 0;
    color:#8a96a7;
    font-size:10px
}
.package-picker {
    display:grid;
    gap:8px;
    margin-top:14px
}
.package-option {
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start;
    gap:11px!important;
    padding:13px;
    border:1px solid #e6ebf3;
    border-radius:10px;
    background:#fff;
    cursor:pointer
}
.package-option[hidden] {
    display:none!important
}
.package-option:has(input:checked) {
    border-color:#9ab1ff;
    background:#f7f9ff
}
.package-option input {
    width:16px!important;
    min-height:16px!important;
    margin-top:3px;
    accent-color:#3468f5;
    flex-shrink:0
}
.package-option span {
    min-width:0
}
.package-option strong,.package-option small {
    display:block
}
.package-option strong {
    font-size:11px;
    color:#2c405b;
    overflow-wrap:anywhere
}
.package-option small {
    margin-top:4px;
    color:#8b97a7;
    font-size:9px;
    line-height:1.6;
    overflow-wrap:anywhere
}
.picker-empty {
    padding:22px;
    text-align:center;
    border:1px dashed #dbe3ef;
    border-radius:10px;
    color:#8a96a7;
    font-size:11px
}
.picker-empty[hidden] {
    display:none
}
.shipment-metrics {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin-top:14px
}
.shipment-metrics>div {
    padding:12px 10px;
    background:#f7f9fc;
    border:1px solid #edf1f6;
    border-radius:9px;
    min-width:0
}
.shipment-metrics small,.shipment-metrics strong {
    display:block
}
.shipment-metrics small {
    font-size:9px;
    color:#8996a7
}
.shipment-metrics strong {
    margin-top:5px;
    font-size:11px;
    color:#2a4265;
    overflow-wrap:anywhere
}
.pricing-note {
    margin:-3px 0 17px;
    padding:12px 13px;
    background:#f4f7ff;
    border-radius:9px;
    color:#49628d;
    font-size:10px;
    line-height:1.7
}
.heading-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.shipment-hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:24px 26px;
    margin-bottom:19px;
    border-radius:14px;
    background:linear-gradient(115deg,#142b49,#203f69);
    color:#fff
}
.shipment-hero .eyebrow {
    color:#b9caff
}
.shipment-hero h2 {
    font:800 24px Manrope,sans-serif;
    margin:7px 0
}
.shipment-hero p {
    margin:0;
    color:#c7d3e4;
    font-size:12px
}
.shipment-hero p span {
    padding:0 8px;
    color:#91aaff
}
.shipment-ref-box {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
    min-width:190px
}
.shipment-ref-box small {
    font-size:9px;
    letter-spacing:1.1px;
    color:#b7c6dc;
    font-weight:800
}
.shipment-ref-box strong {
    font-size:15px;
    letter-spacing:.5px;
    overflow-wrap:anywhere
}
.shipment-ref-box .button {
    background:#fff
}
.total-line {
    padding-top:13px;
    border-top:1px solid #e8edf4
}
.total-line dd {
    font-size:16px!important;
    color:#1d3b64!important;
    font-weight:900!important
}
.total-line dt {
    font-weight:800;
    color:#465b77
}
.detail-list dd {
    overflow-wrap:anywhere
}
@media(max-width:1100px) {
    .shipment-create-layout {
        grid-template-columns:1fr
    }
    .shipment-side-panel {
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px
    }
    .shipment-side-panel .panel {
        margin-bottom:0
    }
}
@media(max-width:700px) {
    .shipment-side-panel {
        grid-template-columns:1fr
    }
    .shipment-hero {
        align-items:flex-start;
        flex-direction:column;
        padding:21px
    }
    .shipment-ref-box {
        align-items:flex-start;
        min-width:0
    }
    .shipment-metrics {
        grid-template-columns:1fr 1fr
    }
    .heading-actions {
        width:100%
    }
    .heading-actions .button {
        flex:1
    }
}
/* Phase 4: package imagery, consistent dialogs, tracking movement cues and refined form controls. */
.cargo-form label {
    line-height:1.45
}
.cargo-form input[type=file] {
    padding:10px;
    background:#f8faff;
    border-style:dashed
}
.cargo-form input:disabled,.cargo-form select:disabled {
    background:#f2f5f9;
    color:#8a96a6;
    cursor:not-allowed
}
.package-gallery-panel {
    margin-top:18px
}
.package-image-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
    gap:13px;
    padding:18px 22px 22px
}
.package-image-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:7px;
    border:1px solid #e7edf4;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    color:#52647d;
    font-size:10px;
    font-weight:700
}
.package-image-card img {
    width:100%;
    height:150px;
    object-fit:cover;
    background:#f3f6fb
}
.package-image-card>span {
    padding:0 10px 10px
}
.package-image-grid-manage .package-image-card {
    cursor:default
}
.image-management {
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid #edf1f6
}
.image-management h2 {
    font:800 14px Manrope,sans-serif;
    margin:0
}
.image-management>p {
    color:#8290a2;
    font-size:11px;
    margin:5px 0 0
}
.image-delete-choice {
    display:flex;
    align-items:center;
    gap:8px!important;
    padding:0 10px 12px!important
}
.image-delete-choice input {
    width:15px!important;
    min-height:15px!important;
    accent-color:#d4495b
}
.table-package-thumb {
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:8px;
    vertical-align:middle;
    margin-right:9px;
    border:1px solid #e8edf4
}
.timeline-icon {
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
    width:28px;
    height:28px;
    flex-shrink:0;
    border:1px solid #dbe5ff;
    background:#f4f7ff;
    color:#3468f5;
    border-radius:10px;
    box-shadow:0 0 0 4px #f8faff
}
.timeline-item:not(:last-child):before {
    left:13px;
    top:31px
}
.timeline-dot {
    display:none
}
.timeline-icon-delivered {
    color:#16875f;
    background:#e7f8ef;
    border-color:#bfead4
}
.track-found .timeline {
    padding-top:20px
}
.track-found .timeline-content {
    padding:4px 0
}
.alert[data-flash-message] {
    display:none!important
}
.app-modal-backdrop[hidden],.app-modal[hidden] {
    display:none!important
}
.app-modal-backdrop {
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(11,27,49,.54);
    backdrop-filter:blur(4px);
    animation:modalFade .16s ease
}
.app-modal {
    position:fixed;
    z-index:1001;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(460px,calc(100vw - 32px));
    padding:30px 30px 24px;
    border:1px solid #e7edf4;
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 90px rgba(11,27,49,.24);
    animation:modalIn .2s ease
}
.app-modal-icon {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin-bottom:18px;
    border-radius:15px;
    background:#e8f8f0;
    color:#16875f;
    font-size:24px;
    font-weight:900
}
.app-modal[data-modal-kind=error] .app-modal-icon {
    background:#fff0f1;
    color:#bd4052
}
.app-modal[data-modal-kind=confirm] .app-modal-icon {
    background:#edf2ff;
    color:#3468f5
}
.app-modal-close {
    position:absolute;
    right:15px;
    top:13px;
    border:0;
    background:transparent;
    color:#8491a2;
    font-size:26px;
    cursor:pointer
}
.app-modal .eyebrow {
    font-size:9px
}
.app-modal h2 {
    font:800 22px Manrope,sans-serif;
    letter-spacing:-.5px;
    margin:8px 0 9px;
    color:#203752
}
.app-modal p {
    font-size:13px;
    line-height:1.75;
    color:#748297;
    margin:0;
    overflow-wrap:anywhere
}
.app-modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:25px
}
.app-modal[data-modal-kind=notice] [data-modal-cancel] {
    display:none
}
.app-modal[data-modal-kind=notice] [data-modal-confirm] {
    min-width:100px
}
body.modal-open {
    overflow:hidden
}
@keyframes modalFade {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
@keyframes modalIn {
    from {
        opacity:0;
        top:52%
    }
    to {
        opacity:1;
        top:50%
    }
}
@media(max-width:560px) {
    .package-image-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:14px
    }
    .package-image-card img {
        height:125px
    }
    .app-modal {
        padding:25px 22px 20px
    }
    .app-modal-actions .button {
        flex:1
    }
    .timeline-icon {
        width:26px;
        height:26px
    }
    .timeline-item:not(:last-child):before {
        left:12px
    }
}
.tracking-progress {
    padding:20px 0 6px;
    border-bottom:1px solid #edf1f6
}
.tracking-progress-heading {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center
}
.tracking-progress-heading h3 {
    font:800 13px Manrope,sans-serif;
    margin:0
}
.tracking-progress-heading>span {
    color:#3468f5;
    background:#edf2ff;
    border-radius:7px;
    padding:5px 9px;
    font-size:10px;
    font-weight:800
}
.tracking-stepper {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px;
    margin:19px 0 8px;
    position:relative
}
.tracking-stepper:before {
    content:"";
    position:absolute;
    left:7%;
    right:7%;
    top:17px;
    height:2px;
    background:#e6ecf5
}
.tracking-step {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    position:relative;
    z-index:1;
    text-align:center;
    min-width:0
}
.tracking-step-icon {
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    border:2px solid #e2e8f1;
    border-radius:50%;
    background:#fff;
    color:#98a5b6
}
.tracking-step-label {
    font-size:9px;
    color:#8c98a8;
    font-weight:700;
    overflow-wrap:anywhere
}
.tracking-step.is-complete .tracking-step-icon {
    border-color:#a7e3c7;
    background:#e8f8f0;
    color:#18825f
}
.tracking-step.is-complete .tracking-step-label {
    color:#18825f
}
.tracking-step.is-current .tracking-step-icon {
    border-color:#3468f5;
    background:#edf2ff;
    color:#3468f5;
    box-shadow:0 0 0 4px #3468f512
}
.tracking-step.is-current .tracking-step-label {
    color:#294fba
}
.tracking-progress-note {
    font-size:11px;
    color:#718096;
    margin:12px 0 0
}
.tracking-exception {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:16px;
    padding:14px;
    border-radius:11px;
    background:#fff7e8;
    color:#a46914
}
.tracking-exception>span {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex-shrink:0;
    border-radius:10px;
    background:#ffedc9
}
.tracking-exception strong {
    font-size:12px
}
.tracking-exception p {
    font-size:11px;
    color:#8b7a5e;
    margin:4px 0 0;
    line-height:1.7
}
@media(max-width:560px) {
    .tracking-stepper {
        grid-template-columns:repeat(3,minmax(0,1fr));
        row-gap:14px
    }
    .tracking-stepper:before {
        display:none
    }
    .tracking-step-label {
        font-size:9px
    }
}
.review-image-field {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:10px;
    color:#40516a;
    font-size:10px;
    font-weight:700
}
.review-image-field input[type=file] {
    width:100%;
    font-size:10px;
    padding:8px;
    border:1px dashed #dce4ef;
    border-radius:8px;
    background:#f8faff
}
.review-image-field small {
    color:#8491a2;
    font-size:9px;
    font-weight:500
}
/* Phase 5: SaaS settings centre */
.brand-mark-image {
    width: min(100%, 224px);
    height: 76px;
    min-width: 0;
    background:#fff!important;
    box-shadow:none!important;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    padding:5px 8px
}
.brand-mark-image img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    border-radius:7px
}
@media (max-width: 760px) {
    .brand-mark-image { width: min(100%, 196px); height: 66px; }
}
.settings-page-heading {
    align-items:flex-end
}
.settings-live-pill {
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    padding:9px 12px;
    background:#e8f8f0;
    color:#18825f;
    border:1px solid #cceedd;
    border-radius:999px;
    font-size:10px;
    font-weight:800
}
.settings-live-pill>span,.settings-preview-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#1caa73;
    box-shadow:0 0 0 3px #1caa7319
}
.settings-intro {
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 22px;
    margin-bottom:20px;
    border:1px solid #dce6fb;
    border-radius:14px;
    background:linear-gradient(110deg,#f1f5ff,#fff);
}
.settings-intro-icon {
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:13px;
    background:#fff;
    color:var(--blue);
    box-shadow:0 5px 18px #294e9b12
}
.settings-intro strong {
    font:800 13px var(--ui-font, 'DM Sans',sans-serif);
    color:#203752
}
.settings-intro p {
    font-size:11px;
    line-height:1.7;
    color:#728197;
    margin:4px 0 0
}
.settings-form {
    display:flex;
    flex-direction:column;
    gap:18px
}
.settings-section {
    padding:25px 27px 27px;
    background:#fff;
    border:1px solid #e7edf4;
    border-radius:15px;
    box-shadow:0 6px 22px #1e355a04
}
.settings-section-heading {
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:20px;
    margin-bottom:21px;
    border-bottom:1px solid #edf1f6
}
.settings-section-icon {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:12px
}
.settings-icon-blue {
    background:#edf2ff;
    color:#3468f5
}
.settings-icon-violet {
    background:#f1edff;
    color:#7958dc
}
.settings-icon-green {
    background:#e5f8f0;
    color:#16875f
}
.settings-icon-amber {
    background:#fff4df;
    color:#b98216
}
.settings-section-heading h2 {
    font:800 14px var(--ui-font, 'DM Sans',sans-serif);
    margin:0;
    color:#233954
}
.settings-section-heading p {
    font-size:10px;
    color:#8793a4;
    margin:4px 0 0
}
.settings-section-index {
    margin-left:auto;
    align-self:flex-start;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    color:#b1bbc8
}
.settings-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:19px 22px
}
.settings-field {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    font-size:11px;
    font-weight:800;
    color:#42546d
}
.settings-field input:not([type=color]),.settings-field select,.settings-field textarea {
    width:100%;
    min-height:43px;
    border:1px solid #dfe6ef;
    border-radius:9px;
    padding:10px 12px;
    background:#fff;
    color:#243954;
    outline:none;
    font:500 12px var(--ui-font, 'DM Sans',sans-serif)
}
.settings-field textarea {
    resize:vertical;
    line-height:1.6
}
.settings-field input:focus,.settings-field select:focus,.settings-field textarea:focus {
    border-color:#8da9ff;
    box-shadow:0 0 0 3px #3468f511
}
.settings-field small {
    font-size:9px;
    font-weight:500;
    line-height:1.6;
    color:#8995a6
}
.required-mark {
    color:#d94f62
}
.settings-assets-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:22px
}
.settings-asset-card {
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
    padding:16px;
    border:1px solid #e7edf4;
    border-radius:12px;
    background:#fcfdff
}
.settings-asset-preview {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex-shrink:0;
    width:112px;
    height:92px;
    border:1px dashed #d6dfec;
    border-radius:11px;
    background:#fff;
    overflow:hidden
}
.settings-logo-preview img {
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    padding:8px
}
.settings-preview-mark {
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff
}
.settings-preview-name {
    font-size:11px;
    font-weight:800;
    overflow-wrap:anywhere
}
.settings-favicon-preview {
    width:92px;
    height:92px;
    background:repeating-conic-gradient(#f3f6fb 0% 25%,#fff 0% 50%) 50%/14px 14px
}
.settings-favicon-preview img {
    width:100%;
    height:100%;
    object-fit:contain;
    padding:17px
}
.settings-favicon-fallback {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:12px;
    color:white
}
.settings-asset-copy {
    min-width:0
}
.settings-asset-copy>strong {
    font-size:11px;
    color:#263b57
}
.settings-asset-copy>p {
    font-size:9px;
    line-height:1.6;
    color:#8995a6;
    margin:4px 0 10px
}
.settings-upload {
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    cursor:pointer
}
.settings-upload input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none
}
.settings-upload>span {
    display:block;
    width:100%;
    font-size:9px;
    font-weight:500;
    color:#9aa4b1
}
.settings-remove {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:9px;
    font-size:9px;
    font-weight:600;
    color:#bd4052
}
.settings-remove input {
    accent-color:#bd4052
}
.settings-color-field {
    display:flex;
    align-items:center;
    gap:9px
}
.settings-color-field input[type=color] {
    width:46px;
    height:43px;
    padding:4px;
    border:1px solid #dfe6ef;
    border-radius:9px;
    background:#fff;
    cursor:pointer
}
.settings-color-field input[type=text] {
    min-width:0;
    flex:1;
    width:100%;
    height:43px;
    border:1px solid #dfe6ef;
    border-radius:9px;
    padding:0 12px;
    color:#243954;
    font:700 12px ui-monospace,monospace;
    text-transform:uppercase
}
.settings-brand-preview {
    margin-top:23px;
    padding:17px 20px 20px;
    border:1px solid #e7edf4;
    border-radius:12px;
    background:linear-gradient(135deg,#f7f9fd,#fff);
    overflow:hidden
}
.settings-preview-top {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
    color:#6f7f95
}
.settings-preview-line {
    height:1px;
    flex:1;
    background:#e4eaf3
}
.settings-preview-top>span:last-child {
    font-size:9px;
    font-weight:500;
    letter-spacing:0
}
.settings-brand-preview .settings-preview-dot {
    background:var(--preview-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--preview-primary) 12%,transparent)
}
.settings-preview-content {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:23px
}
.settings-preview-content>div:first-child small {
    font-size:8px;
    font-weight:900;
    letter-spacing:1.5px;
    color:var(--preview-primary)
}
.settings-preview-content h3 {
    font-size:22px;
    letter-spacing:-.8px;
    color:var(--preview-navy);
    margin:6px 0
}
.settings-preview-content h3 span {
    color:var(--preview-primary)
}
.settings-preview-content p {
    font-size:10px;
    color:#7c899b;
    margin:0
}
.settings-preview-actions {
    display:flex;
    align-items:center;
    gap:15px;
    flex-shrink:0
}
.settings-preview-button {
    display:inline-flex;
    align-items:center;
    padding:10px 13px;
    border-radius:8px;
    background:var(--preview-primary);
    color:white;
    font-size:9px;
    font-weight:800
}
.settings-preview-link {
    font-size:10px;
    font-weight:800;
    color:var(--preview-primary)
}
.settings-field-full {
    grid-column:1/-1
}
.settings-toggle-list {
    display:flex;
    flex-direction:column;
    margin-top:23px;
    border:1px solid #e7edf4;
    border-radius:12px;
    overflow:hidden
}
.settings-toggle {
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px 17px;
    cursor:pointer;
    border-bottom:1px solid #edf1f6
}
.settings-toggle:last-child {
    border-bottom:0
}
.settings-toggle-symbol {
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    flex-shrink:0;
    border-radius:11px;
    background:#f0f4fa;
    color:#60748f
}
.settings-toggle-copy {
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
    min-width:0
}
.settings-toggle-copy strong {
    font-size:11px;
    color:#30445f
}
.settings-toggle-copy small {
    font-size:9px;
    line-height:1.6;
    color:#8793a4
}
.settings-toggle input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px
}
.settings-toggle-switch {
    width:39px;
    height:23px;
    flex-shrink:0;
    border-radius:999px;
    background:#dce3ed;
    padding:3px;
    transition:background .15s
}
.settings-toggle-switch:after {
    content:"";
    display:block;
    width:17px;
    height:17px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px #1b355526;
    transition:transform .15s
}
.settings-toggle input:checked+.settings-toggle-switch {
    background:#168b64
}
.settings-toggle input:checked+.settings-toggle-switch:after {
    transform:translateX(16px)
}
.settings-toggle input:focus-visible+.settings-toggle-switch {
    outline:3px solid #3468f533;
    outline-offset:3px
}
.settings-toggle-warning .settings-toggle-symbol {
    background:#fff3df;
    color:#b98216
}
.settings-toggle-warning:has(input:checked) {
    background:#fffaf1
}
.settings-savebar {
    position:sticky;
    bottom:12px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:17px 20px;
    background:#fff;
    border:1px solid #dfe7f2;
    border-radius:13px;
    box-shadow:0 12px 35px #142b4914
}
.settings-savebar strong {
    font-size:11px;
    color:#263b57
}
.settings-savebar p {
    font-size:9px;
    color:#8793a4;
    margin:4px 0 0
}
.settings-savebar .button {
    white-space:nowrap
}
@media(max-width:900px) {
    .settings-assets-grid {
        grid-template-columns:1fr
    }
    .settings-asset-card {
        align-items:flex-start
    }
    .settings-section {
        padding:21px
    }
    .settings-preview-content {
        align-items:flex-start;
        flex-direction:column
    }
    .settings-preview-actions {
        flex-wrap:wrap
    }
}
@media(max-width:600px) {
    .settings-page-heading {
        align-items:flex-start;
        flex-direction:column
    }
    .settings-live-pill {
        align-self:flex-start
    }
    .settings-intro {
        align-items:flex-start;
        padding:16px
    }
    .settings-grid {
        grid-template-columns:1fr
    }
    .settings-field-full {
        grid-column:auto
    }
    .settings-section {
        padding:18px 15px
    }
    .settings-section-heading {
        gap:9px
    }
    .settings-section-icon {
        width:34px;
        height:34px
    }
    .settings-section-heading p {
        line-height:1.6
    }
    .settings-section-index {
        font-size:9px
    }
    .settings-asset-card {
        flex-direction:column
    }
    .settings-asset-preview {
        width:100%;
        height:100px
    }
    .settings-preview-content h3 {
        font-size:19px
    }
    .settings-preview-top>span:last-child {
        display:none
    }
    .settings-savebar {
        align-items:stretch;
        flex-direction:column;
        bottom:6px;
        padding:14px
    }
    .settings-savebar .button {
        width:100%
    }
    .settings-toggle {
        padding:13px 11px;
        gap:10px
    }
    .settings-toggle-symbol {
        width:32px;
        height:32px
    }
    .settings-toggle-copy small {
        max-width:235px
    }
}
.settings-seo-preview {
    margin-top:22px;
    max-width:640px;
    padding:18px 20px;
    border:1px solid #e7edf4;
    border-radius:12px;
    background:#fbfcff;
    display:flex;
    flex-direction:column;
    gap:5px
}
.settings-seo-label {
    font-size:8px;
    letter-spacing:1.2px;
    font-weight:900;
    color:#8b98aa
}
.settings-seo-preview strong {
    font-size:16px;
    line-height:1.4;
    color:#1a0dab;
    font-weight:600
}
.settings-seo-url {
    font-size:10px;
    color:#188038
}
.settings-seo-preview p {
    font-size:11px;
    line-height:1.7;
    color:#68778b;
    margin:0
}
.public-footer-contact {
    display:flex;
    gap:14px;
    flex-wrap:wrap
}
.public-footer-contact a:hover {
    color:var(--blue)
}
@media(max-width:900px) {
    .public-footer {
        flex-wrap:wrap
    }
    .public-footer-contact {
        width:100%
    }
}
/* Brand intro: brief, accessible, and only shown once per full page load. */
.brand-splash {
    position:fixed;
    inset:0;
    z-index:5000;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#102544,#183c68);
    color:#fff;
    opacity:1;
    visibility:visible;
    transition:opacity .24s ease,visibility .24s ease
}
.brand-splash.is-leaving {
    opacity:0;
    visibility:hidden;
    pointer-events:none
}
.brand-splash-inner {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:14px;
    animation:brandRise .42s ease both
}
.brand-splash-inner img {
    width:72px;
    height:72px;
    object-fit:contain;
    border-radius:18px
}
.brand-splash-mark {
    width:68px;
    height:68px;
    border-radius:20px;
    background:#ffffff18;
    border:1px solid #ffffff30;
    display:grid;
    place-items:center
}
.brand-splash-inner strong {
    font:800 25px Manrope,Arial,sans-serif;
    letter-spacing:-.7px
}
.brand-splash-line {
    height:3px;
    width:46px;
    border-radius:5px;
    background:#7fa4ff;
    animation:brandLine .75s ease both
}
@keyframes brandRise {
    from {
        opacity:0;
        transform:translateY(8px) scale(.97)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}
@keyframes brandLine {
    from {
        width:0
    }
    to {
        width:46px
    }
}
.track-page {
    max-width:980px;
    margin:0 auto;
    padding-bottom:70px
}
.track-heading {
    text-align:center;
    padding:48px 0 28px
}
.track-heading h1 {
    font:800 clamp(32px,4vw,48px)/1.1 Manrope,sans-serif;
    letter-spacing:-1.8px;
    color:#162f50;
    margin:13px 0
}
.track-heading p {
    max-width:620px;
    margin:0 auto;
    color:#7b899c;
    line-height:1.8
}
.track-form {
    padding:20px;
    background:#fff;
    border:1px solid #e8eef7;
    border-radius:17px;
    box-shadow:0 16px 44px #1b3b650a;
    margin-bottom:25px
}
.track-input-row input {
    border:1px solid #dfe7f2;
    border-radius:10px;
    padding:13px 14px;
    min-height:48px
}
.track-found {
    border-radius:18px;
    box-shadow:0 18px 50px #1c3c660a;
    border:1px solid #e7edf5
}
.tracking-progress {
    margin:24px 0 15px;
    padding:20px;
    background:linear-gradient(135deg,#f7f9ff,#fff);
    border:1px solid #e8eef8;
    border-radius:15px
}
.tracking-progress-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.tracking-progress-heading h3 {
    margin:0;
    font:800 14px Manrope,sans-serif;
    color:#243b59
}
.tracking-progress-heading span {
    color:#3468f5;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px
}
.tracking-stepper {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
    margin-top:20px
}
.tracking-step {
    position:relative;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:9px;
    text-align:center;
    color:#98a5b6;
    font-size:10px;
    font-weight:700
}
.tracking-step:not(:last-child):after {
    content:"";
    height:2px;
    position:absolute;
    top:16px;
    left:calc(50% + 19px);
    right:calc(-50% + 19px);
    background:#dfe6f2
}
.tracking-step-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid #dfe6f2;
    border-radius:50%;
    background:#fff;
    color:#98a5b6;
    z-index:1
}
.tracking-step.is-complete {
    color:#21835f
}
.tracking-step.is-complete .tracking-step-icon {
    background:#e7f8f0;
    border-color:#bcebd5;
    color:#21835f
}
.tracking-step.is-complete:after {
    background:#83d8b5
}
.tracking-step.is-current {
    color:#2858d7
}
.tracking-step.is-current .tracking-step-icon {
    background:#3468f5;
    border-color:#3468f5;
    color:#fff;
    box-shadow:0 0 0 5px #3468f51b
}
.tracking-progress-note {
    font-size:11px;
    color:#7c899b;
    margin:15px 0 0
}
.tracking-exception {
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px;
    margin-top:15px;
    background:#fff5e5;
    border:1px solid #ffe3b2;
    border-radius:12px;
    color:#9b6516
}
.tracking-exception p {
    margin:4px 0 0;
    font-size:11px;
    line-height:1.7
}
.tracking-exception strong {
    font-size:12px
}
@media(max-width:650px) {
    .tracking-stepper {
        grid-template-columns:repeat(3,minmax(0,1fr));
        row-gap:18px
    }
    .tracking-step:after {
        display:none
    }
    .brand-splash-inner strong {
        font-size:22px
    }
}
.customer-stats {
    margin-top:0
}
.customer-detail-grid {
    align-items:start
}
.customer-controls {
    display:grid;
    gap:10px;
    padding:18px 20px 22px
}
.customer-controls form {
    margin:0
}
.admin-note {
    margin:0 20px 14px;
    padding:13px 14px;
    border:1px solid #e7edf5;
    border-radius:10px;
    background:#f8faff
}
.admin-note p {
    font-size:11px;
    line-height:1.7;
    color:#4b5d75;
    margin:0 0 7px
}
.admin-note small {
    font-size:9px;
    color:#8794a5
}


/* Management-only public utility pages: login, registration and tracking. */
.management-public-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e7ebf2;min-height:76px;padding:12px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 5px 22px rgba(20,43,73,.06)}
.management-public-brand a{display:flex;align-items:center;gap:12px;text-decoration:none;color:#142b49}.management-brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#142b49;color:#fff;font-weight:900;letter-spacing:-.04em}.management-public-brand strong,.management-public-brand small{display:block}.management-public-brand strong{font-size:16px;line-height:1.25}.management-public-brand small{font-size:10px;letter-spacing:.14em;color:#718096;margin-top:3px}.management-public-header nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap}.management-public-header nav a{color:#334155;text-decoration:none;font-size:14px;font-weight:650}.management-public-header nav a[aria-current=page]{color:#f4512a}.management-public-header nav .management-public-register{background:#f4512a;color:#fff;padding:11px 16px;border-radius:10px}.management-public-main{min-height:calc(100vh - 140px);padding:clamp(20px,4vw,44px) 16px}.management-public-main>.auth-wrap{margin:0 auto;max-width:1120px}.management-public-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px clamp(16px,4vw,48px);border-top:1px solid #e7ebf2;color:#718096;font-size:12px;background:#fff}.public-body{background:#f5f7fb}.management-public-main .track-page{max-width:1050px;margin:0 auto}.management-public-main .track-heading{text-align:center;margin:8px auto 30px;max-width:720px}.management-public-main .track-heading h1{color:#142b49}.management-public-main .track-heading p{color:#64748b}.management-public-main .track-form,.management-public-main .track-found,.management-public-main .track-result-placeholder{background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 12px 34px rgba(20,43,73,.06)}
@media(max-width:640px){.management-public-header{align-items:flex-start;flex-direction:column;gap:12px;padding:14px 16px}.management-public-header nav{width:100%;gap:10px 16px}.management-public-header nav a{font-size:13px}.management-public-header nav .management-public-register{padding:8px 11px}.management-public-main{padding:20px 12px}.management-public-footer{flex-direction:column}}

/* V24 — polished mobile navigation and responsive shipment tracking */
.management-public-header{min-height:78px;padding:14px clamp(16px,4vw,48px);gap:20px}
.management-public-brand{min-width:0;flex:1}
.management-public-brand a{min-width:0;gap:12px}
.management-public-brand strong{font-size:clamp(14px,1.3vw,17px);letter-spacing:-.025em}
.management-brand-mark{flex:0 0 44px;width:44px;height:44px;border-radius:14px;box-shadow:0 6px 16px rgba(20,43,73,.13)}
.management-public-header nav{justify-content:flex-end;gap:clamp(10px,1.8vw,24px)}
.management-public-header nav a{white-space:nowrap}
.management-public-main{position:relative;isolation:isolate;overflow:hidden;padding:clamp(24px,4vw,52px) clamp(14px,3vw,28px);background:radial-gradient(ellipse at 12% 4%,rgba(52,104,245,.11),transparent 38%),radial-gradient(ellipse at 92% 15%,rgba(20,43,73,.10),transparent 34%),linear-gradient(180deg,#f4f7fc 0%,#f8faff 48%,#f3f6fb 100%)}
.management-public-main:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.28;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.management-public-main .track-page{width:100%;max-width:1000px;margin:0 auto;min-height:0}
.management-public-main .track-heading{margin:0 auto 26px;padding:clamp(8px,2vw,22px) 12px 0;max-width:740px}
.management-public-main .track-heading .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(52,104,245,.15);border-radius:999px;background:rgba(255,255,255,.76);color:#3468f5;font-size:10px;font-weight:800;letter-spacing:.13em}
.management-public-main .track-heading h1{font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-.045em;margin:18px 0 12px}
.management-public-main .track-heading p{max-width:600px;margin:0 auto;font-size:clamp(13px,1.6vw,15px);line-height:1.8;color:#64748b}
.management-public-main .track-form{position:relative;margin:28px auto 22px;max-width:850px;padding:clamp(18px,3vw,28px);border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 20px 55px rgba(20,43,73,.09);border:1px solid rgba(220,228,240,.95)}
.management-public-main .track-form label{font-size:12px;color:#34445c;margin-bottom:10px}
.management-public-main .track-input-row{align-items:stretch;gap:12px}
.management-public-main .track-input-row input{height:52px;padding:0 16px;border-radius:12px;background:#fbfcff;border-color:#dce4f0;font:500 14px var(--ui-font);color:#142b49}
.management-public-main .track-input-row input::placeholder{color:#9aa7b8}
.management-public-main .track-input-row input:focus{background:#fff;border-color:#7394ff;box-shadow:0 0 0 4px rgba(52,104,245,.10)}
.management-public-main .track-input-row .button{min-height:52px;padding:0 20px;border-radius:12px;white-space:nowrap;box-shadow:0 8px 18px rgba(52,104,245,.18)}
.management-public-main .track-found{overflow:hidden;margin:22px auto 0;border-radius:22px;box-shadow:0 22px 60px rgba(20,43,73,.09);border-color:#e0e7f1}
.management-public-main .track-found-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:clamp(20px,3vw,32px);background:linear-gradient(120deg,#fff 0%,#f6f9ff 100%);border-bottom:1px solid #e8edf5}
.management-public-main .track-found-head>div{min-width:0}
.management-public-main .track-found-head h2{font-size:clamp(20px,3vw,29px);line-height:1.25;letter-spacing:-.035em;overflow-wrap:anywhere;margin:10px 0}
.management-public-main .track-found-head p{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.7;color:#718096;font-size:13px}
.management-public-main .track-facts{padding:20px clamp(20px,3vw,32px);gap:18px;background:#fff}
.management-public-main .track-facts>div{min-width:0;padding:4px 0}
.management-public-main .track-facts strong{line-height:1.55;overflow-wrap:anywhere}
.management-public-main .track-parties-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 clamp(20px,3vw,32px) 26px}
.management-public-main .track-party-card{min-width:0;padding:20px;border:1px solid #e7edf5;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfcff);box-shadow:0 5px 16px rgba(20,43,73,.035)}
.management-public-main .track-party-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#61738d;font-size:10px;font-weight:800;letter-spacing:.1em}
.management-public-main .track-party-title .icon{flex:0 0 auto;color:#3468f5}
.management-public-main .track-party-card>strong{display:block;color:#142b49;font-size:15px;line-height:1.45;overflow-wrap:anywhere;margin-bottom:10px}
.management-public-main .track-party-card p{margin:8px 0 0;color:#64748b;font-size:13px;line-height:1.65;overflow-wrap:anywhere;word-break:normal}
.management-public-main .track-party-card .track-mode-label{display:flex;align-items:center;gap:8px;font-size:13px}
.management-public-main .tracking-progress{margin:0 clamp(20px,3vw,32px) 28px;padding:clamp(18px,3vw,26px);border:1px solid #e5ebf5;border-radius:18px;background:linear-gradient(135deg,#f8faff,#fff)}
.management-public-main .tracking-progress-heading{gap:12px;flex-wrap:wrap}
.management-public-main .tracking-progress-heading h3{font-size:17px;letter-spacing:-.025em}
.management-public-main .tracking-stepper{gap:4px}
.management-public-main .tracking-step-label{overflow-wrap:anywhere;text-align:center}
.management-public-main .history-heading{margin:0 clamp(20px,3vw,32px) 18px;font-size:17px;letter-spacing:-.02em}
.management-public-main .track-found>.timeline,.management-public-main .track-found>.muted-small{margin:0 clamp(20px,3vw,32px) 28px}
.management-public-main .track-result-placeholder{max-width:850px;margin:20px auto 0;padding:clamp(26px,4vw,42px);border-style:solid;box-shadow:0 18px 44px rgba(20,43,73,.06)}
.management-public-main .track-result-placeholder h2{font-size:20px;letter-spacing:-.025em}
.management-public-footer{gap:10px}
@media(max-width:760px){
 .management-public-header{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px}
 .management-public-brand a{gap:10px}
 .management-brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:12px}
 .management-public-brand strong{font-size:14px}
 .management-public-brand small{font-size:9px;letter-spacing:.11em}
 .management-public-header nav{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
 .management-public-header nav::-webkit-scrollbar{display:none}
 .management-public-header nav a{flex:0 0 auto;padding:8px 10px;border-radius:9px;font-size:12px;background:#f4f6fa}
 .management-public-header nav a[aria-current=page]{background:#eef3ff;color:#315ee8}
 .management-public-header nav .management-public-register{padding:9px 12px}
 .management-public-main{padding:24px 12px 32px}
 .management-public-main .track-heading{padding:4px 4px 0;margin-bottom:22px}
 .management-public-main .track-heading h1{font-size:clamp(31px,8vw,42px)}
 .management-public-main .track-form{margin:22px auto 16px;padding:18px;border-radius:16px}
 .management-public-main .track-input-row{display:flex;flex-direction:column;gap:10px}
 .management-public-main .track-input-row input{width:100%;min-height:50px}
 .management-public-main .track-input-row .button{width:100%;justify-content:center}
 .management-public-main .track-found{border-radius:17px}
 .management-public-main .track-found-head{padding:20px;flex-direction:column;gap:12px}
 .management-public-main .track-found-head h2{font-size:21px}
 .management-public-main .track-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px 20px}
 .management-public-main .track-parties-grid{grid-template-columns:minmax(0,1fr);gap:10px;padding:0 16px 20px}
 .management-public-main .track-party-card{padding:17px;border-radius:13px}
 .management-public-main .track-party-title{margin-bottom:10px}
 .management-public-main .tracking-progress{margin:0 16px 22px;padding:17px 14px;border-radius:14px}
 .management-public-main .tracking-progress-heading h3{font-size:15px}
 .management-public-main .tracking-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px;padding-top:14px}
 .management-public-main .tracking-stepper:before{display:none}
 .management-public-main .tracking-step{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center}
 .management-public-main .tracking-step-icon{width:36px;height:36px}
 .management-public-main .tracking-step-label{font-size:10px;line-height:1.35;white-space:normal}
 .management-public-main .history-heading{margin:0 20px 14px;font-size:16px}
 .management-public-main .track-found>.timeline,.management-public-main .track-found>.muted-small{margin:0 20px 24px}
 .management-public-main .timeline-title{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
 .management-public-main .timeline-title time{font-size:11px}
 .management-public-main .track-result-placeholder{padding:28px 20px;border-radius:16px}
 .management-public-footer{padding:18px 16px;font-size:11px}
}
@media(max-width:380px){
 .management-public-main .track-facts{grid-template-columns:minmax(0,1fr)}
 .management-public-main .tracking-stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
 .management-public-brand small{letter-spacing:.07em}
}

/* V24 — final small-screen polish across authenticated workspace pages */
@media(max-width:560px){
 .topbar{min-height:64px;height:auto;gap:10px;padding:10px 14px}
 .breadcrumb{min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .topbar-user{flex:0 0 auto}
 .page-content{min-width:0;padding:20px 14px}
 .page-content>*{min-width:0;max-width:100%}
 .page-heading{align-items:stretch;gap:10px}
 .page-heading h1{overflow-wrap:anywhere;line-height:1.2}
 .module-grid,.stats-grid,.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .panel,.card,.table-card{min-width:0;max-width:100%}
 .table-responsive,.table-wrap,.data-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 table{max-width:100%}
 .form-grid{grid-template-columns:minmax(0,1fr)}
 input,select,textarea{max-width:100%}
 .button-row,.form-actions{flex-wrap:wrap}
 .button-row .button,.form-actions .button{max-width:100%}
}
@media(max-width:360px){
 .module-grid,.stats-grid,.dashboard-stats{grid-template-columns:minmax(0,1fr)}
 .page-content{padding:17px 11px}
}