:root{
    --sr-navy:#071d36;
    --sr-navy-2:#0b3155;
    --sr-blue:#0f4c77;
    --sr-teal:#079b82;
    --sr-green:#20c997;
    --sr-mint:#72efd0;
    --sr-ink:#14243a;
    --sr-muted:#718096;
    --sr-line:#dfe7ef;
    --sr-bg:#f3f7fb;
    --sr-white:#ffffff;
    --sr-danger:#a93e49;
}

*{box-sizing:border-box}

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

body.sr-auth-body{
    min-height:100vh;
    font-family:Inter,Arial,sans-serif;
    color:var(--sr-ink);
    background:
        radial-gradient(circle at 5% 10%,rgba(32,201,151,.13),transparent 26%),
        radial-gradient(circle at 96% 90%,rgba(15,76,119,.14),transparent 28%),
        #eef4f9;
}

.sr-auth-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px;
}

.sr-auth-stage{
    position:relative;
    width:min(1220px,100%);
    min-height:720px;
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);
    overflow:hidden;
    border-radius:30px;
    border:1px solid rgba(11,49,85,.08);
    background:#fff;
    box-shadow:
        0 34px 90px rgba(10,38,67,.16),
        0 2px 7px rgba(10,38,67,.04);
}

.sr-auth-stage.sr-register-stage{
    width:min(1280px,100%);
    grid-template-columns:minmax(360px,.82fr) minmax(610px,1.18fr);
}

.sr-auth-visual{
    position:relative;
    overflow:hidden;
    padding:43px 46px;
    color:#fff;
    isolation:isolate;
    background:
        linear-gradient(145deg,#061a32 0%,#09375a 48%,#077768 100%);
}

.sr-auth-visual:before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-220px;
    top:-190px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:
        0 0 0 65px rgba(255,255,255,.022),
        0 0 0 130px rgba(255,255,255,.018);
    animation:srOrbit 16s linear infinite;
    z-index:-1;
}

.sr-auth-visual:after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    left:-160px;
    bottom:-120px;
    border-radius:50%;
    background:rgba(71,226,185,.08);
    filter:blur(2px);
    animation:srFloat 10s ease-in-out infinite;
    z-index:-1;
}

.sr-noise{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.13;
    background-image:
        radial-gradient(rgba(255,255,255,.55) .55px, transparent .55px);
    background-size:22px 22px;
    mask-image:linear-gradient(to bottom,black,transparent 88%);
}

.sr-glow{
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(30,219,173,.16);
    filter:blur(70px);
    right:6%;
    bottom:8%;
    animation:srGlow 7s ease-in-out infinite alternate;
}

.sr-brand{
    position:relative;
    z-index:4;
    display:flex;
    align-items:center;
    gap:12px;
}

.sr-brand-mark{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.17);
}

.sr-brand-mark img{
    width:43px;
    height:43px;
    object-fit:contain;
}

.sr-brand-word{
    font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:800;
    font-size:20px;
    letter-spacing:.85px;
    color:#fff;
}

.sr-brand-word span{color:#62e9c6}

.sr-hero{
    position:relative;
    z-index:4;
    margin-top:65px;
    max-width:520px;
}

.sr-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.075);
    backdrop-filter:blur(12px);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.25px;
    text-transform:uppercase;
    color:rgba(255,255,255,.88);
}

.sr-kicker-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#59e7c1;
    box-shadow:0 0 0 6px rgba(89,231,193,.12);
    animation:srPulse 2.2s ease-out infinite;
}

.sr-hero h1{
    margin:21px 0 15px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:clamp(40px,4.1vw,59px);
    line-height:1.01;
    letter-spacing:-2.4px;
    color:#fff;
}

.sr-hero h1 span{
    color:#61e7c4;
}

.sr-hero p{
    max-width:470px;
    margin:0;
    color:rgba(255,255,255,.70);
    font-size:14px;
    line-height:1.78;
}

.sr-motion-scene{
    position:relative;
    z-index:4;
    height:235px;
    margin-top:30px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
    backdrop-filter:blur(14px);
    box-shadow:inset 0 1px rgba(255,255,255,.05);
}

.sr-motion-scene:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
}

.sr-route-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sr-route-path{
    fill:none;
    stroke:url(#srRouteGradient);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-dasharray:6 8;
    opacity:.76;
    animation:srRouteDash 14s linear infinite;
}

.sr-route-glow{
    fill:none;
    stroke:#5ee7c3;
    stroke-width:9;
    opacity:.08;
    filter:blur(4px);
}

.sr-route-node{
    fill:#0d4667;
    stroke:#8cf4d7;
    stroke-width:2;
}

.sr-node-ring{
    fill:none;
    stroke:#7ff0d1;
    opacity:.26;
    animation:srNodeRing 2.8s ease-out infinite;
    transform-box:fill-box;
    transform-origin:center;
}

.sr-map-label{
    position:absolute;
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:rgba(4,28,50,.72);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.3px;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.sr-map-label:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#55e2be;
}

.sr-map-miami{left:8%;bottom:29%}
.sr-map-china{left:41%;top:18%}
.sr-map-jamaica{right:7%;bottom:23%}

.sr-float-card{
    position:absolute;
    z-index:5;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 28px rgba(0,0,0,.15);
    animation:srFloat 5.7s ease-in-out infinite;
}

.sr-float-card strong{
    display:block;
    margin-bottom:2px;
    font-size:9px;
    color:#fff;
}

.sr-float-card span{
    display:block;
    font-size:8px;
    color:rgba(255,255,255,.58);
}

.sr-float-1{left:5%;top:11%;animation-delay:-1.4s}
.sr-float-2{right:5%;top:14%;animation-delay:-3.2s}

.sr-trust-grid{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:16px;
}

.sr-trust-card{
    min-height:70px;
    padding:12px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
    transition:.25s ease;
}

.sr-trust-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.085);
}

.sr-trust-icon{
    margin-bottom:7px;
    color:#68eac8;
    font-size:14px;
}

.sr-trust-card strong{
    display:block;
    font-size:10px;
    color:#fff;
}

.sr-trust-card span{
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.50);
    font-size:8.5px;
    line-height:1.4;
}

.sr-auth-panel{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 58px;
    background:
        radial-gradient(circle at 100% 0,rgba(31,201,152,.055),transparent 24%),
        linear-gradient(180deg,#fff,#fbfcfe);
}

.sr-register-stage .sr-auth-panel{
    align-items:flex-start;
    padding:38px 48px 42px;
}

.sr-form-wrap{
    width:100%;
    max-width:445px;
}

.sr-register-stage .sr-form-wrap{
    max-width:650px;
}

.sr-mobile-brand{display:none}

.sr-form-eyebrow{
    margin-bottom:7px;
    color:#078f73;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.35px;
    text-transform:uppercase;
}

.sr-form-title{
    margin:0;
    color:#0e2845;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:31px;
    line-height:1.12;
    letter-spacing:-1px;
}

.sr-form-subtitle{
    margin:8px 0 26px;
    color:#7a8798;
    font-size:12.5px;
    line-height:1.65;
}

.sr-alert{
    margin-bottom:16px;
    padding:12px 14px;
    border-radius:12px;
    font-size:12px;
    line-height:1.5;
    animation:srEnter .35s ease both;
}

.sr-alert-success{
    border:1px solid #c9edde;
    background:#effbf7;
    color:#10715c;
}

.sr-alert-error{
    border:1px solid #f3cdd1;
    background:#fff5f6;
    color:#963b45;
}

.sr-alert-error ul{
    margin:0;
    padding-left:17px;
}

.sr-field{
    margin-bottom:14px;
}

.sr-field label{
    display:block;
    margin:0 0 6px;
    color:#42536a;
    font-size:10.5px;
    font-weight:700;
}

.sr-field .input{
    width:100%;
    min-height:48px;
    padding:0 13px;
    border:1px solid #dce4ec;
    border-radius:12px;
    outline:0;
    background:#fff;
    color:#15283f;
    font:500 12.5px Inter,sans-serif;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.sr-field .input:hover{
    border-color:#c9d7e3;
}

.sr-field .input:focus{
    border-color:#17a484;
    box-shadow:
        0 0 0 4px rgba(23,164,132,.09),
        0 8px 20px rgba(14,60,89,.045);
    transform:translateY(-1px);
}

.sr-field .input::placeholder{
    color:#a5aeb9;
}

.sr-password-wrap{
    position:relative;
}

.sr-password-wrap .input{
    padding-right:70px;
}

.sr-password-wrap .password-toggle{
    position:absolute;
    top:50%;
    right:9px;
    transform:translateY(-50%);
    border:0;
    border-radius:8px;
    padding:6px 9px;
    cursor:pointer;
    background:#edf8f5;
    color:#087a63;
    font-size:9px;
    font-weight:800;
}

.sr-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:3px 0 20px;
}

.sr-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    color:#647286;
    font-size:10.5px;
    font-weight:600;
}

.sr-checkbox input,
.sr-terms input{
    width:16px;
    height:16px;
    accent-color:#0e9b7b;
}

.sr-link{
    color:#087d65;
    font-size:10.5px;
    font-weight:800;
    text-decoration:none;
}

.sr-link:hover{text-decoration:underline}

.sr-primary-btn{
    position:relative;
    overflow:hidden;
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:13px;
    cursor:pointer;
    background:linear-gradient(135deg,#078a6e,#1ab88f);
    color:#fff;
    font:800 12px "Plus Jakarta Sans",sans-serif;
    box-shadow:0 13px 27px rgba(14,158,124,.23);
    transition:.22s ease;
}

.sr-primary-btn:before{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:80%;
    height:100%;
    transform:skewX(-20deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );
    animation:srShimmer 5s ease-in-out infinite;
}

.sr-primary-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 17px 32px rgba(14,158,124,.30);
}

.sr-primary-btn span{
    position:relative;
    z-index:1;
}

.sr-arrow{
    transition:transform .2s ease;
}

.sr-primary-btn:hover .sr-arrow{
    transform:translateX(4px);
}

.sr-auth-switch{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #edf1f5;
    text-align:center;
    color:#788598;
    font-size:11px;
}

.sr-auth-switch a{
    color:#087d65;
    font-weight:800;
    text-decoration:none;
}

.sr-security{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:19px;
    color:#9aa4b0;
    font-size:9px;
}

.sr-security-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#24b88f;
    box-shadow:0 0 0 4px rgba(36,184,143,.10);
}

.sr-form-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.sr-top-login{
    padding-top:5px;
    color:#8490a0;
    font-size:10px;
    white-space:nowrap;
}

.sr-top-login a{
    color:#078268;
    font-weight:800;
    text-decoration:none;
}

.sr-form-section{
    margin-top:17px;
    padding-top:17px;
    border-top:1px solid #edf1f5;
}

.sr-form-section:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:0;
}

.sr-section-head{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
}

.sr-step{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#eaf8f4;
    color:#07876c;
    font-size:9px;
    font-weight:900;
}

.sr-section-head strong{
    color:#344a64;
    font-size:10.5px;
}

.sr-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.sr-help{
    margin-top:4px;
    color:#99a3af;
    font-size:8.5px;
}

.sr-terms{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:17px 0;
    padding:12px 13px;
    border:1px solid #edf1f5;
    border-radius:12px;
    background:#f8fafc;
    color:#657387;
    font-size:9.5px;
    line-height:1.5;
}

.sr-register-badges{
    display:grid;
    gap:11px;
    margin-top:30px;
}

.sr-register-badge{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:15px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(10px);
    animation:srEnter .6s ease both;
}

.sr-register-badge:nth-child(2){animation-delay:.08s}
.sr-register-badge:nth-child(3){animation-delay:.16s}

.sr-register-check{
    flex:none;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(95,232,197,.14);
    color:#70edcd;
    font-size:12px;
    font-weight:900;
}

.sr-register-badge strong{
    display:block;
    margin-bottom:3px;
    color:#fff;
    font-size:10.5px;
}

.sr-register-badge span{
    display:block;
    color:rgba(255,255,255,.53);
    font-size:8.5px;
    line-height:1.45;
}

.sr-network{
    margin-top:27px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
}

.sr-network-label{
    margin-bottom:12px;
    color:rgba(255,255,255,.42);
    font-size:8px;
    font-weight:800;
    letter-spacing:1.15px;
    text-transform:uppercase;
}

.sr-network-row{
    display:flex;
    align-items:center;
    gap:9px;
}

.sr-network-stop{
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:9px;
    background:rgba(255,255,255,.055);
    color:#fff;
    font-size:8.5px;
    font-weight:800;
}

.sr-network-line{
    position:relative;
    flex:1;
    height:1px;
    background:linear-gradient(90deg,#5de6c2,rgba(255,255,255,.35));
}

.sr-network-line:after{
    content:"";
    position:absolute;
    top:-3px;
    left:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#65eac6;
    animation:srTravel 3.6s ease-in-out infinite;
}

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

@keyframes srFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}

@keyframes srGlow{
    from{transform:scale(.85);opacity:.55}
    to{transform:scale(1.15);opacity:1}
}

@keyframes srPulse{
    0%{box-shadow:0 0 0 0 rgba(89,231,193,.28)}
    70%{box-shadow:0 0 0 9px rgba(89,231,193,0)}
    100%{box-shadow:0 0 0 0 rgba(89,231,193,0)}
}

@keyframes srRouteDash{
    to{stroke-dashoffset:-180}
}

@keyframes srNodeRing{
    0%{transform:scale(.55);opacity:.45}
    100%{transform:scale(1.8);opacity:0}
}

@keyframes srShimmer{
    0%,72%{left:-130%}
    100%{left:150%}
}

@keyframes srTravel{
    0%{left:0}
    50%,100%{left:calc(100% - 7px)}
}

@keyframes srEnter{
    from{
        opacity:0;
        transform:translateY(7px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}

@media(max-width:1000px){
    .sr-auth-stage{
        grid-template-columns:minmax(0,.9fr) minmax(410px,1fr);
    }

    .sr-auth-visual{
        padding:36px;
    }

    .sr-auth-panel{
        padding:42px 38px;
    }

    .sr-hero{
        margin-top:55px;
    }

    .sr-trust-grid{
        grid-template-columns:1fr;
    }

    .sr-trust-card{
        min-height:auto;
    }
}

@media(max-width:850px){
    .sr-auth-shell{padding:0}

    .sr-auth-stage,
    .sr-auth-stage.sr-register-stage{
        min-height:100vh;
        display:block;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .sr-auth-visual{display:none}

    .sr-auth-panel,
    .sr-register-stage .sr-auth-panel{
        min-height:100vh;
        align-items:flex-start;
        padding:30px 23px 40px;
    }

    .sr-form-wrap,
    .sr-register-stage .sr-form-wrap{
        max-width:570px;
        margin:0 auto;
    }

    .sr-mobile-brand{
        display:flex;
        align-items:center;
        gap:9px;
        margin-bottom:31px;
    }

    .sr-mobile-brand img{
        width:45px;
        height:45px;
        object-fit:contain;
    }

    .sr-mobile-brand strong{
        font:800 17px "Plus Jakarta Sans",sans-serif;
        letter-spacing:.4px;
        color:#0d2846;
    }

    .sr-mobile-brand strong span{
        color:#078d70;
    }
}

@media(max-width:590px){
    .sr-grid-2{
        grid-template-columns:1fr;
        gap:0;
    }

    .sr-form-header{
        display:block;
    }

    .sr-top-login{
        margin-top:9px;
    }

    .sr-form-title{
        font-size:27px;
    }

    .sr-options{
        align-items:flex-start;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *:before,
    *:after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
    }

    .sr-route-runner{
        display:none;
    }

    .sr-primary-btn:hover,
    .sr-trust-card:hover{
        transform:none;
    }
}

/* =========================================================
   CUSTOMER DASHBOARD — MOTION EXPERIENCE
   ========================================================= */

.sr-dashboard{
    display:grid;
    gap:18px;
}

.sr-dashboard-hero{
    position:relative;
    min-height:220px;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:24px;
    padding:28px 30px;
    border-radius:24px;
    color:#fff;
    background:
        radial-gradient(circle at 82% 18%,rgba(79,231,191,.20),transparent 27%),
        linear-gradient(135deg,#071d36 0%,#0b3d62 54%,#087b6e 100%);
    box-shadow:0 24px 55px rgba(9,45,77,.16);
    isolation:isolate;
}

.sr-dashboard-hero:before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    right:-130px;
    top:-185px;
    box-shadow:
        0 0 0 45px rgba(255,255,255,.025),
        0 0 0 90px rgba(255,255,255,.018);
    animation:srOrbit 20s linear infinite;
    z-index:-1;
}

.sr-dashboard-hero:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.11;
    background-image:
        radial-gradient(rgba(255,255,255,.60) .55px,transparent .55px);
    background-size:22px 22px;
    mask-image:linear-gradient(90deg,black,transparent 88%);
    z-index:-1;
}

.sr-dash-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.sr-dash-kicker{
    display:inline-flex;
    align-items:center;
    width:max-content;
    gap:8px;
    margin-bottom:12px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.84);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.15px;
    text-transform:uppercase;
}

.sr-dash-kicker-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#62ebc6;
    animation:srPulse 2.1s ease-out infinite;
}

.sr-dash-copy h2{
    max-width:550px;
    margin:0;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:clamp(26px,3vw,39px);
    line-height:1.08;
    letter-spacing:-1.4px;
    color:#fff;
}

.sr-dash-copy h2 span{
    color:#69eac8;
}

.sr-dash-copy p{
    max-width:520px;
    margin:11px 0 0;
    color:rgba(255,255,255,.68);
    font-size:12px;
    line-height:1.65;
}

.sr-dash-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:20px;
}

.sr-dash-action{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    transition:.2s ease;
    backdrop-filter:blur(10px);
}

.sr-dash-action:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.13);
}

.sr-dash-action-primary{
    border-color:transparent;
    background:#21b98e;
    box-shadow:0 10px 22px rgba(13,132,105,.27);
}

.sr-dash-action-primary:hover{
    background:#29c49a;
}

.sr-dash-route{
    position:relative;
    min-height:165px;
    align-self:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:19px;
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(10px);
}

.sr-dash-route:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:28px 28px;
}

.sr-dash-route svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.sr-dash-route-path{
    fill:none;
    stroke:#6aebca;
    stroke-width:2;
    stroke-dasharray:5 7;
    opacity:.72;
    animation:srRouteDash 12s linear infinite;
}

.sr-dash-node{
    fill:#0a4162;
    stroke:#8af4d8;
    stroke-width:2;
}

.sr-dash-route-label{
    position:absolute;
    padding:6px 8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    background:rgba(4,27,49,.76);
    color:#fff;
    font-size:8px;
    font-weight:800;
    letter-spacing:.35px;
}

.sr-dash-route-label.miami{
    left:7%;
    bottom:18%;
}

.sr-dash-route-label.china{
    left:39%;
    top:11%;
}

.sr-dash-route-label.jamaica{
    right:5%;
    bottom:19%;
}

.sr-metric-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
}

.sr-metric-card{
    position:relative;
    overflow:hidden;
    min-height:142px;
    padding:18px;
    border:1px solid var(--line,#e2e8ef);
    border-radius:17px;
    background:var(--card,#fff);
    box-shadow:0 7px 22px rgba(20,52,81,.055);
    transition:.22s ease;
    animation:srEnter .45s ease both;
}

.sr-metric-card:nth-child(2){animation-delay:.05s}
.sr-metric-card:nth-child(3){animation-delay:.10s}
.sr-metric-card:nth-child(4){animation-delay:.15s}

.sr-metric-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(20,52,81,.10);
}

.sr-metric-card:after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50%;
    top:-48px;
    right:-42px;
    background:rgba(26,184,143,.06);
}

.sr-metric-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.sr-metric-label{
    color:var(--muted,#748195);
    font-size:9px;
    font-weight:800;
    letter-spacing:.85px;
    text-transform:uppercase;
}

.sr-metric-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#edf8f5;
    color:#0b8a6d;
    font-size:13px;
}

.sr-metric-value{
    margin:14px 0 5px;
    font-family:"Plus Jakarta Sans",sans-serif;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.8px;
    color:var(--ink,#14243a);
}

.sr-metric-value.sr-money{
    font-size:22px;
}

.sr-metric-sub{
    color:var(--muted,#8290a0);
    font-size:9.5px;
}

.sr-metric-sub a{
    color:var(--green-dark,#087e65);
    font-weight:800;
    text-decoration:none;
}

.sr-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    gap:16px;
    align-items:start;
}

.sr-dash-card{
    overflow:hidden;
    border:1px solid var(--line,#e2e8ef);
    border-radius:18px;
    background:var(--card,#fff);
    box-shadow:0 7px 22px rgba(20,52,81,.045);
}

.sr-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 18px 13px;
}

.sr-card-title-wrap{
    display:flex;
    align-items:center;
    gap:10px;
}

.sr-card-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#edf8f5;
    color:#0b8b6e;
    font-size:14px;
}

.sr-card-title{
    margin:0;
    font-family:"Plus Jakarta Sans",sans-serif;
    color:var(--ink,#172c45);
    font-size:13px;
    font-weight:800;
}

.sr-card-note{
    margin-top:2px;
    color:var(--muted,#8290a0);
    font-size:8.5px;
}

.sr-ready-list{
    display:grid;
    gap:0;
    border-top:1px solid var(--line,#e7ecf1);
}

.sr-ready-item{
    display:grid;
    grid-template-columns:minmax(130px,.8fr) minmax(150px,1.2fr) minmax(95px,.7fr) minmax(95px,.75fr);
    gap:12px;
    align-items:center;
    padding:13px 18px;
    border-bottom:1px solid var(--line,#edf1f4);
    transition:.18s ease;
}

.sr-ready-item:last-child{
    border-bottom:0;
}

.sr-ready-item:hover{
    background:rgba(31,184,143,.035);
}

.sr-ready-main a{
    color:var(--ink,#18304c);
    font:800 10.5px "Plus Jakarta Sans",sans-serif;
    text-decoration:none;
}

.sr-ready-main a:hover{
    color:var(--green-dark,#078166);
}

.sr-ready-main span,
.sr-ready-meta span{
    display:block;
    margin-top:3px;
    color:var(--muted,#8692a1);
    font-size:8.5px;
}

.sr-ready-balance{
    text-align:right;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10.5px;
    font-weight:800;
}

.sr-awaiting{
    color:var(--muted,#8893a0);
    font-family:Inter,sans-serif;
    font-size:8.5px;
    font-weight:600;
}

.sr-empty{
    padding:32px 18px;
    text-align:center;
    color:var(--muted,#8290a0);
    font-size:10.5px;
}

.sr-breakdown{
    padding:14px 18px 17px;
    border-top:1px solid var(--line,#e7ecf1);
    background:rgba(12,72,98,.018);
}

.sr-break-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:4px 0;
    color:var(--muted,#748195);
    font-size:9.5px;
}

.sr-break-row.credit{
    color:var(--green-dark,#087d65);
}

.sr-break-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid var(--line,#dde4ea);
}

.sr-break-total strong:first-child{
    color:var(--ink,#172c45);
    font:800 10.5px "Plus Jakarta Sans",sans-serif;
}

.sr-break-total strong:last-child{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:15px;
}

.sr-dashboard-side{
    display:grid;
    gap:16px;
}

.sr-mailbox-hero{
    position:relative;
    overflow:hidden;
    padding:18px;
    border-radius:18px;
    color:#fff;
    background:
        radial-gradient(circle at 100% 0,rgba(91,234,197,.22),transparent 28%),
        linear-gradient(145deg,#08223e,#0b4964);
    box-shadow:0 13px 32px rgba(13,55,84,.13);
}

.sr-mailbox-hero:after{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    right:-52px;
    bottom:-57px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    box-shadow:0 0 0 25px rgba(255,255,255,.025);
}

.sr-mailbox-label{
    color:rgba(255,255,255,.55);
    font-size:8px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.sr-mailbox-number{
    margin-top:6px;
    font:800 21px "Plus Jakarta Sans",sans-serif;
    letter-spacing:.6px;
}

.sr-mailbox-note{
    max-width:280px;
    margin-top:5px;
    color:rgba(255,255,255,.58);
    font-size:8.5px;
    line-height:1.5;
}

.sr-address-block{
    padding:14px 18px 16px;
}

.sr-address-entry{
    padding:12px;
    border:1px solid var(--line,#e6ebf0);
    border-radius:12px;
    background:rgba(15,75,105,.018);
}

.sr-address-entry + .sr-address-entry{
    margin-top:10px;
}

.sr-address-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.sr-address-country{
    color:var(--ink,#18304c);
    font-size:9px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.sr-address-lines{
    color:var(--muted,#68788b);
    font-size:9px;
    line-height:1.65;
}

.sr-address-lines strong{
    color:var(--ink,#283e58);
}

.sr-copy-btn{
    border:1px solid #d6e7e2;
    border-radius:8px;
    padding:6px 8px;
    cursor:pointer;
    background:#edf8f5;
    color:#087b63;
    font-size:8px;
    font-weight:800;
    transition:.18s ease;
}

.sr-copy-btn:hover{
    transform:translateY(-1px);
    background:#def4ed;
}

.sr-china-card{
    padding:17px 18px;
}

.sr-china-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
}

.sr-china-title{
    margin:0;
    color:var(--ink,#172c45);
    font:800 12px "Plus Jakarta Sans",sans-serif;
}

.sr-china-note{
    margin:4px 0 0;
    color:var(--muted,#748195);
    font-size:8.5px;
    line-height:1.5;
}

.sr-entrance{
    color:var(--red,#c74a58);
    font-weight:900;
}

.sr-label-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
}

.sr-mini-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 9px;
    border-radius:8px;
    text-decoration:none;
    font-size:8px;
    font-weight:800;
}

.sr-mini-btn.primary{
    background:#0d9475;
    color:#fff;
}

.sr-mini-btn.secondary{
    border:1px solid var(--line,#dfe6ec);
    background:var(--card,#fff);
    color:var(--ink,#263d56);
}

.sr-china-address{
    margin-top:13px;
    padding:12px;
    border:1px solid var(--line,#e4eaf0);
    border-radius:11px;
    background:rgba(12,71,100,.018);
    color:var(--muted,#65768a);
    font-size:8.5px;
    line-height:1.65;
}

.sr-copy-toast{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:9999;
    padding:10px 13px;
    border-radius:11px;
    background:#072b45;
    color:#fff;
    font-size:9.5px;
    font-weight:700;
    box-shadow:0 14px 35px rgba(5,31,50,.25);
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:.22s ease;
}

.sr-copy-toast.show{
    opacity:1;
    transform:translateY(0);
}

@media(max-width:1100px){
    .sr-metric-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .sr-dashboard-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){
    .sr-dashboard-hero{
        grid-template-columns:1fr;
    }

    .sr-dash-route{
        min-height:180px;
    }
}

@media(max-width:680px){
    .sr-dashboard-hero{
        min-height:auto;
        padding:22px 20px;
        border-radius:18px;
    }

    .sr-metric-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .sr-metric-card{
        min-height:125px;
        padding:15px;
    }

    .sr-metric-value{
        font-size:23px;
    }

    .sr-metric-value.sr-money{
        font-size:17px;
    }

    .sr-ready-item{
        grid-template-columns:1fr 1fr;
    }

    .sr-ready-balance{
        text-align:left;
    }

    .sr-china-head{
        display:block;
    }

    .sr-label-actions{
        justify-content:flex-start;
        margin-top:10px;
    }
}

@media(max-width:430px){
    .sr-metric-grid{
        grid-template-columns:1fr;
    }

    .sr-ready-item{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    .sr-dashboard-hero:before,
    .sr-dashboard *,
    .sr-dashboard *:before,
    .sr-dashboard *:after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

    .sr-metric-card:hover,
    .sr-dash-action:hover,
    .sr-copy-btn:hover{
        transform:none;
    }
}

/* =========================================================
   SHIPRIGHT CLEAN PREMIUM DESIGN
   FINAL SIMPLIFIED DIRECTION
   ========================================================= */

:root{
    --sr-brand-navy:#09043d;
    --sr-brand-navy-2:#0d3154;
    --sr-brand-teal:#00c98b;
    --sr-brand-teal-2:#18d6a0;
    --sr-brand-mint:#78efd0;
    --sr-soft:#f4f7fb;
}

/* ---------------------------------------------------------
   AUTH — REMOVE PHOTOGRAPHIC BACKGROUNDS
   --------------------------------------------------------- */

.sr-auth-visual{
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(40,221,174,.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(0,201,139,.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #071a32 0%,
            #092e4c 54%,
            #075f57 100%
        ) !important;
}

.sr-auth-visual:before{
    opacity:.8;
}

.sr-auth-visual:after{
    width:420px;
    height:420px;
    left:auto;
    right:-210px;
    bottom:-210px;
    background:transparent;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 0 0 55px rgba(255,255,255,.018),
        0 0 0 110px rgba(255,255,255,.014);
    filter:none;
}

.sr-noise{
    opacity:.08;
}

.sr-glow{
    width:280px;
    height:280px;
    background:rgba(34,219,170,.13);
    filter:blur(90px);
}

.sr-hero{
    margin-top:58px;
}

.sr-hero h1{
    font-size:clamp(48px,4.4vw,67px);
    line-height:.98;
    letter-spacing:-2.8px;
}

.sr-hero p{
    max-width:500px;
    font-size:15px;
    line-height:1.7;
    color:rgba(255,255,255,.74);
}

/* Keep the abstract shipping route — no photographic image */

.sr-motion-scene{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        ) !important;
    border-color:rgba(255,255,255,.14);
    box-shadow:
        inset 0 1px rgba(255,255,255,.07),
        0 18px 40px rgba(0,0,0,.12);
}

/* ---------------------------------------------------------
   AUTH FORM — LARGER / CLEANER
   --------------------------------------------------------- */

.sr-form-eyebrow{
    font-size:12px;
    letter-spacing:1.4px;
}

.sr-form-title{
    font-size:42px;
    letter-spacing:-1.5px;
}

.sr-form-subtitle{
    font-size:15px;
}

.sr-field label{
    margin-bottom:8px;
    font-size:13px;
}

.sr-field .input{
    min-height:57px;
    padding:0 16px;
    border-radius:13px;
    font-size:15px;
}

.sr-field .input:focus{
    border-color:#00a97b;
    box-shadow:
        0 0 0 4px rgba(0,201,139,.10),
        0 9px 24px rgba(7,45,69,.07);
}

.sr-password-wrap .input{
    padding-right:84px;
}

.sr-password-wrap .password-toggle{
    min-width:58px;
    min-height:36px;
    padding:0 12px;
    border-radius:9px;
    font-size:10px;
}

.sr-options{
    margin-top:5px;
}

.sr-checkbox,
.sr-link{
    font-size:12px;
}

/* ---------------------------------------------------------
   GLOSSY SHIPRIGHT BUTTONS
   --------------------------------------------------------- */

.sr-primary-btn,
.sr-dash-action-primary,
.sr-mini-btn.primary{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,0) 44%
        ),
        linear-gradient(
            135deg,
            #079c79 0%,
            #00c98b 55%,
            #20d5a1 100%
        ) !important;
    color:#fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.08),
        0 10px 24px rgba(0,171,121,.24);
}

.sr-primary-btn:after,
.sr-dash-action-primary:after{
    content:"";
    position:absolute;
    top:-60%;
    left:-45%;
    width:35%;
    height:220%;
    transform:rotate(20deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );
    transition:left .55s ease;
    pointer-events:none;
}

.sr-primary-btn:hover:after,
.sr-dash-action-primary:hover:after{
    left:115%;
}

.sr-primary-btn:hover,
.sr-dash-action-primary:hover,
.sr-mini-btn.primary:hover{
    transform:translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.40),
        0 14px 30px rgba(0,171,121,.31);
}

.sr-primary-btn:active,
.sr-dash-action-primary:active{
    transform:translateY(0) scale(.99);
}

/* ---------------------------------------------------------
   DASHBOARD HERO — CLEAN / SIMPLE / PREMIUM
   --------------------------------------------------------- */

.sr-dashboard-hero{
    min-height:285px;
    grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
    padding:34px 38px;
    background:
        radial-gradient(
            circle at 92% 0,
            rgba(49,229,184,.18),
            transparent 31%
        ),
        radial-gradient(
            circle at 65% 130%,
            rgba(0,201,139,.12),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #071d36 0%,
            #083554 57%,
            #087063 100%
        ) !important;
    box-shadow:
        0 20px 50px rgba(13,47,74,.15);
}

.sr-dashboard-hero:before{
    width:390px;
    height:390px;
    right:-145px;
    top:-205px;
    border-color:rgba(255,255,255,.08);
    box-shadow:
        0 0 0 50px rgba(255,255,255,.018),
        0 0 0 100px rgba(255,255,255,.012);
}

.sr-dash-kicker{
    padding:8px 12px;
    margin-bottom:16px;
    font-size:10px;
}

.sr-dash-copy h2{
    max-width:650px;
    font-size:clamp(43px,3.7vw,58px);
    line-height:1;
    letter-spacing:-2px;
}

.sr-dash-copy p{
    max-width:590px;
    margin-top:15px;
    font-size:14px;
    line-height:1.7;
    color:rgba(255,255,255,.73);
}

.sr-dash-actions{
    margin-top:23px;
}

.sr-dash-action{
    min-height:43px;
    padding:0 16px;
    border-radius:11px;
    font-size:11px;
}

/* ---------------------------------------------------------
   DASHBOARD ROUTE — RESTORE ABSTRACT ROUTE
   --------------------------------------------------------- */

.sr-dash-route{
    min-height:210px;
    border:1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 16px 36px rgba(0,0,0,.12);
}

.sr-dash-route:after{
    display:none;
}

.sr-dash-route svg{
    display:block !important;
}

.sr-dash-route-label{
    display:block !important;
    font-size:9px;
    padding:7px 9px;
}

.sr-dash-route-path{
    stroke-width:2.4;
    stroke:#69ebc9;
    opacity:.86;
}

/* ---------------------------------------------------------
   DASHBOARD METRIC CARDS
   --------------------------------------------------------- */

.sr-metric-grid{
    gap:15px;
}

.sr-metric-card{
    min-height:160px;
    padding:21px;
    border-radius:18px;
    border-color:rgba(19,50,78,.10);
    box-shadow:
        0 9px 24px rgba(18,52,79,.065);
}

.sr-metric-card:hover{
    transform:translateY(-3px);
    box-shadow:
        0 14px 32px rgba(18,52,79,.10);
}

.sr-metric-label{
    font-size:11px;
    letter-spacing:.8px;
}

.sr-metric-icon{
    width:39px;
    height:39px;
    border-radius:11px;
}

.sr-metric-value{
    font-size:35px;
}

.sr-metric-value.sr-money{
    font-size:28px;
}

.sr-metric-sub{
    font-size:11px;
}

/* ---------------------------------------------------------
   GENERAL CARD READABILITY
   --------------------------------------------------------- */

.sr-card-title{
    font-size:16px;
}

.sr-card-note{
    font-size:10.5px;
}

.sr-mailbox-number{
    font-size:29px;
}

.sr-mailbox-note{
    font-size:10.5px;
}

.sr-address-lines{
    font-size:11px;
}

.sr-china-title{
    font-size:15px;
}

.sr-china-note,
.sr-china-address{
    font-size:10.5px;
}

/* ---------------------------------------------------------
   REGISTRATION
   --------------------------------------------------------- */

.sr-section-head strong{
    font-size:12px;
}

.sr-step{
    width:29px;
    height:29px;
    font-size:10px;
}

.sr-register-badge strong{
    font-size:12px;
}

.sr-register-badge span{
    font-size:10px;
}

.sr-terms{
    font-size:11px;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:900px){

    .sr-dashboard-hero{
        grid-template-columns:1fr;
    }

    .sr-dash-route{
        min-height:190px;
    }
}

@media(max-width:680px){

    .sr-dashboard-hero{
        padding:25px 21px;
        min-height:auto;
    }

    .sr-dash-copy h2{
        font-size:38px;
        line-height:1.03;
    }

    .sr-dash-copy p{
        font-size:13px;
    }

    .sr-form-title{
        font-size:34px;
    }

    .sr-field .input{
        min-height:53px;
    }
}