.flow-shell{
    width:min(500px,92%);
    margin:65px auto 100px;
}

.flow-card{
    position:relative;
    overflow:hidden;
    padding:38px 36px;
    border:1px solid rgba(209,173,104,.17);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(14,21,32,.97),rgba(8,13,20,.97));
    box-shadow:0 30px 90px rgba(0,0,0,.28);
}

.flow-card::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:110px;
    height:2px;
    transform:translateX(-50%);
    background:#d1ad68;
    box-shadow:0 0 25px rgba(209,173,104,.35);
}

.flow-eyebrow{
    color:#d1ad68;
    font-size:9px;
    font-weight:650;
    letter-spacing:1.8px;
}

html[dir="rtl"] .flow-eyebrow{
    letter-spacing:0;
}

.flow-card h1{
    margin:10px 0 9px;
    font-size:25px;
    line-height:1.4;
}

.flow-description{
    margin:0 0 26px;
    color:#7b8898;
    font-size:11px;
    line-height:1.8;
}

.flow-field{
    margin-bottom:18px;
}

.flow-field label{
    display:block;
    margin-bottom:7px;
    color:#adb7c3;
    font-size:11px;
    font-weight:500;
}

.flow-field input,
.flow-card form p input{
    width:100%;
    min-height:46px;
    padding:0 13px;
    border:1px solid rgba(209,173,104,.16);
    border-radius:7px;
    outline:none;
    background:#080d14;
    color:#f1f4f7;
    box-sizing:border-box;
}

.flow-field input:focus,
.flow-card form p input:focus{
    border-color:rgba(209,173,104,.56);
    box-shadow:0 0 0 3px rgba(209,173,104,.055);
}

.flow-card form p label{
    display:block;
    margin-bottom:7px;
    color:#adb7c3;
    font-size:11px;
}

.flow-card form p{
    color:#7c8998;
    font-size:10px;
    line-height:1.7;
}

.flow-error{
    margin:8px 0 16px;
    padding:10px 12px;
    border:1px solid rgba(220,83,83,.18);
    border-radius:7px;
    background:rgba(220,83,83,.055);
    color:#dca1a1;
    font-size:10px;
}

.flow-error ul{
    margin:0;
    padding-inline-start:16px;
}

.flow-info{
    margin:18px 0;
    padding:13px;
    border:1px solid rgba(209,173,104,.11);
    border-radius:8px;
    background:rgba(209,173,104,.025);
    color:#788596;
    font-size:10px;
    line-height:1.75;
}

.flow-account{
    margin:20px 0;
    padding:14px;
    border:1px solid rgba(209,173,104,.12);
    border-radius:8px;
    background:rgba(255,255,255,.014);
}

.flow-account span{
    display:block;
    color:#667487;
    font-size:9px;
}

.flow-account strong{
    display:block;
    margin-top:5px;
    color:#e7ebef;
    font-size:12px;
}

.flow-actions{
    display:grid;
    gap:9px;
    margin-top:20px;
}

.flow-button,
.flow-actions a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:1px solid rgba(209,173,104,.16);
    border-radius:7px;
    background:transparent;
    color:#cbd2da;
    text-decoration:none;
    cursor:pointer;
    transition:.2s ease;
}

.flow-button.primary{
    color:#d8b86f;
    background:rgba(209,173,104,.08);
    border-color:rgba(209,173,104,.30);
}

.flow-button.danger{
    color:#d79797;
    border-color:rgba(218,88,88,.20);
    background:rgba(218,88,88,.035);
}

.flow-button:hover,
.flow-actions a:hover{
    transform:translateY(-1px);
    border-color:rgba(209,173,104,.42);
}

.flow-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    color:#82cfa5;
    font-size:9px;
}

.flow-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#45d887;
    box-shadow:0 0 9px rgba(69,216,135,.5);
}

.flow-pending{
    color:#d1ad68 !important;
}

html[dir="rtl"] .flow-card{
    text-align:right;
}

@media(max-width:600px){
    .flow-shell{
        width:91%;
        margin-top:35px;
    }

    .flow-card{
        padding:29px 21px;
    }
}