/* 测试模块占位样式（UI 定稿后可重构到独立 card 文件） */
.flow-steps {list-style: none; padding: 0; margin: 0; flex-wrap: wrap;}
.flow-steps li {padding: .45rem .9rem; border-radius: 999px; background: #f5f5f5; color: #888; font-size: .85rem;}
.flow-steps li.active {background: #e6f4ff; color: #0958d9; font-weight: 600;}
.test-grid {list-style: none; padding: 0; margin: 0;}
.test-card {overflow: hidden; transition: box-shadow .25s ease, transform .25s ease;}
.test-card:hover {box-shadow: 0 .8rem 2.4rem rgba(14, 18, 29, .08); transform: translateY(-.2rem);}
.test-card a {text-decoration: none; color: inherit;}
.test-card-image {height: 16rem; overflow: hidden;}
.test-card-image img {width: 100%; height: 100%; object-fit: cover; display: block;}
.test-detail-panel {min-height: auto;}
.order-form {max-width: 40rem;}
.area-row select {width: 100%;}
.person-fields {border: 0; padding: 0; margin: 0;}
.person-fields legend {margin-bottom: .5rem;}
.order-form label span {font-size: .9rem; color: #666;}
.order-alert {padding: 1rem 1.2rem; border-radius: .5rem; line-height: 1.5;}
.order-alert-error {background: #fff2f0; color: #cf1322; border: 1px solid #ffccc7;}
.order-alert-info {background: #e6f4ff; color: #0958d9; border: 1px solid #91caff;}
.order-status.state-completed {border-color: #b7eb8f; background: #f6ffed;}
.order-status.state-failed {border-color: #ffccc7; background: #fff2f0;}
.order-status.state-processing,
.order-status.state-submitted,
.order-status.state-paid {border-color: #91caff; background: #e6f4ff;}
.order-submit-progress {
    margin-top: 1.25rem;
    padding: 1.25rem 1.4rem;
    border-radius: .75rem;
    border: 1px solid #d6e4ff;
    background: linear-gradient(145deg, #f8fbff 0%, #eef4ff 100%);
}
.order-submit-progress-head {display: flex; align-items: center; gap: 1rem;}
.order-submit-steps {margin-top: 1rem;}
.order-wait-panel {
    margin-top: 1.5rem;
    padding: 1.5rem 1.6rem;
    border-radius: .75rem;
    border: 1px solid #d6e4ff;
    background: linear-gradient(145deg, #f8fbff 0%, #eef4ff 100%);
}
.order-wait-header {display: flex; align-items: center; gap: 1rem;}
.order-wait-orbit {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 2px solid rgba(9, 88, 217, .15);
    position: relative;
    animation: order-orbit-spin 4s linear infinite;
}
.order-wait-core {
    position: absolute;
    inset: .55rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #69b1ff, #0958d9);
    box-shadow: 0 0 .8rem rgba(9, 88, 217, .35);
    animation: order-core-pulse 2.4s ease-in-out infinite;
}
.order-wait-steps {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.order-wait-steps li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .88rem;
    color: #8c8c8c;
    transition: color .35s ease, opacity .35s ease;
}
.order-wait-steps li .step-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #d9d9d9;
    flex-shrink: 0;
    transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.order-wait-steps li.is-active {color: #0958d9; font-weight: 600;}
.order-wait-steps li.is-active .step-dot {
    background: #1677ff;
    box-shadow: 0 0 0 .25rem rgba(22, 119, 255, .18);
    animation: order-dot-pulse 1.6s ease-in-out infinite;
}
.order-wait-steps li.is-done {color: #389e0d;}
.order-wait-steps li.is-done .step-dot {background: #52c41a;}
.order-wait-progress {
    margin-top: 1.1rem;
    height: .35rem;
    border-radius: 999px;
    background: rgba(9, 88, 217, .1);
    overflow: hidden;
}
.order-wait-progress-bar {
    height: 100%;
    width: 4%;
    border-radius: inherit;
    background: linear-gradient(90deg, #69b1ff, #0958d9);
    transition: width .35s ease;
}
.order-wait-quote {
    margin: 1rem 0 0;
    font-size: .86rem;
    color: #597ef7;
    font-style: italic;
    line-height: 1.55;
    min-height: 2.6em;
}
.order-wait-timer {
    margin: .65rem 0 0;
    font-size: .82rem;
    color: #8c8c8c;
}
.order-wait-leave {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .75);
    border: 1px dashed #91caff;
    font-size: .86rem;
    color: #0958d9;
    line-height: 1.5;
}
.order-wait-leave-title {font-weight: 600; color: #0958d9;}
.order-wait-leave a {margin-top: .5rem;}
.order-wait-hard {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: .5rem;
    background: #fff;
    border: 1px solid #91caff;
    text-align: center;
}
@keyframes order-orbit-spin {
    to {transform: rotate(360deg);}
}
@keyframes order-core-pulse {
    0%, 100% {transform: scale(1); opacity: 1;}
    50% {transform: scale(.92); opacity: .88;}
}
@keyframes order-dot-pulse {
    0%, 100% {transform: scale(1);}
    50% {transform: scale(1.25);}
}
.report-box {background: #fafafa;}
.report-content h3 {margin: 1.2rem 0 .6rem; font-size: 1.05rem;}
.report-content p {margin-bottom: .8rem; color: #333;}
.person-fields {border: 0; padding: 0; margin: 0;}
.person-fields legend {margin-bottom: .5rem;}

/* H5 表单：始终纵向排列，避免宽屏下 label 横排挤压下拉框 */
.h5-app .order-form .layui-form-item {margin-bottom: 1.6rem;}
.h5-app .order-form .layui-form-label {
    float: none;
    width: 100%;
    text-align: left;
    padding: 0 0 .6rem;
    line-height: 1.4;
    font-size: 1.4rem;
    color: #43465a;
}
.h5-app .order-form .layui-input-block {
    margin-left: 0;
    min-height: 0;
}
.h5-app .order-form .layui-input,
.h5-app .order-form .layui-form-select .layui-input {
    height: 4.4rem;
    line-height: 4.4rem;
    font-size: 1.4rem;
    border-radius: .8rem;
}
.h5-app .order-form .area-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.h5-app .order-form .area-row .layui-form-select {
    width: 100%;
}
.h5-app .order-form .layui-form-selected {
    z-index: 12;
}
.h5-app .order-form .layui-form-select dl {
    z-index: 900;
    max-height: 24rem;
    border-radius: .8rem;
}

/* Vue 表单：文本/时间用 vue-field；select 交给 Layui form.render */
.h5-app .vue-order-form input.vue-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 4.4rem;
    min-height: 4.4rem;
    padding: 0 1.2rem;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #1f2233;
    border: .1rem solid #dcdfe6;
    border-radius: .8rem;
    background-color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.h5-app .vue-order-form input.vue-field:focus {
    outline: none;
    border-color: rgba(99, 91, 255, .45);
    box-shadow: 0 0 0 .2rem rgba(99, 91, 255, .12);
}
.h5-app .vue-order-form input[type="datetime-local"].vue-field {
    min-height: 4.4rem;
}
.h5-app .vue-order-form input.vue-field::placeholder {
    color: #b0b4c3;
}
/* Layui 下拉（展开面板）在 Vue 表单内的尺寸 */
.h5-app .vue-order-form .layui-form-select {
    width: 100%;
}
.h5-app .vue-order-form .layui-form-select .layui-input {
    height: 4.4rem;
    line-height: 4.4rem;
    font-size: 1.4rem;
    border-radius: .8rem;
}
.h5-app .vue-order-form .area-row .layui-form-select {
    margin-bottom: 0;
}
.h5-app .vue-order-form .layui-form-selected dl {
    z-index: 900;
    max-height: 24rem;
    border-radius: .8rem;
}
/* 渲染失败时兜底：没有 Layui 面板则显示原生 select */
.h5-app .vue-order-form .layui-input-block > select:last-child,
.h5-app .vue-order-form .area-row > select:last-child {
    display: block !important;
    width: 100%;
    height: 4.4rem;
    padding: 0 1.2rem;
    font-size: 1.4rem;
    border: .1rem solid #dcdfe6;
    border-radius: .8rem;
    background: #fff;
}
.h5-app .vue-form-toast {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: .6rem;
    background: #fff2f0;
    color: #cf1322;
    font-size: 1.3rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .test-card-image {height: 18rem;}
}

@media (min-width: 1280px) {
    .test-card-image {height: 20rem;}
}