/* ============================
   FaceCapture H5 - 腾讯风格
   ============================ */

/* ----- Reset & Base ----- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.panel {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ==================
   登录页
   ================== */
.login-panel {
    background: radial-gradient(circle at 50% -16%, rgba(83, 220, 135, .22), transparent 36%), linear-gradient(180deg, #F8FCFA 0%, #EFF5F2 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 32px) 18px 24px;
    z-index: 10;
    overflow-y: auto;
}

.login-container {
    width: 100%;
    max-width: 390px;
    padding: 26px 24px 24px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 26px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 20px 46px rgba(22, 55, 39, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
}

.login-logo {
    text-align: center;
    margin-bottom: 26px;
}

.logo-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, rgba(31,191,70,0.1) 0%, rgba(31,191,70,0.22) 100%);
    box-shadow: 0 8px 20px rgba(31, 191, 70, .16), inset 0 1px 0 rgba(255, 255, 255, .75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-title {
    font-size: 23px;
    font-weight: 700;
    color: #173226;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: 10px;
    color: #89A194;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    font-size: 13px;
    color: #60786B;
    margin-bottom: 7px;
    padding-left: 2px;
}

.form-input {
    width: 100%;
    height: 52px;
    background: rgba(249, 252, 250, .92);
    border: 1.5px solid #DFEAE3;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 15px;
    color: #1D2129;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
    -webkit-appearance: none;
}

.form-input:focus {
    border-color: #1FBF46;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(31, 191, 70, .12), 0 6px 16px rgba(31, 191, 70, .07);
}

.form-input::placeholder {
    color: #C9CDD4;
}

.btn-primary {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #29C960 0%, #16994A 100%);
    border: none;
    border-radius: 15px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 9px;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-appearance: none;
    box-shadow: 0 12px 22px rgba(22, 153, 74, .25), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 5px 12px rgba(22, 153, 74, .2);
}

.btn-secondary {
    width: 200px;
    height: 44px;
    background: transparent;
    border: 1.5px solid #1FBF46;
    border-radius: 22px;
    color: #1FBF46;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 32px;
    transition: all 0.2s ease;
    -webkit-appearance: none;
}

.btn-secondary:active {
    background: rgba(31, 191, 70, 0.05);
    transform: scale(0.97);
}

/* ==================
   准备页
   ================== */
.preparing-panel {
    background: #FFFFFF;
    z-index: 9;
}

.preparing-cancel {
    position: absolute;
    top: env(safe-area-inset-top, 12px);
    left: 16px;
    padding: 12px 8px;
    font-size: 16px;
    color: #4E5969;
    cursor: pointer;
}

.preparing-tip {
    text-align: center;
    margin-top: calc(env(safe-area-inset-top, 0px) + 80px);
    font-size: 20px;
    font-weight: 600;
    color: #1D2129;
}

.loading-circle-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.loading-circle {
    position: relative;
    width: 52vw;
    height: 52vw;
    max-width: 280px;
    max-height: 280px;
}

.loading-svg {
    width: 100%;
    height: 100%;
}

.loading-arc {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================
   相机页
   ================== */
.camera-panel {
    background: #000;
    z-index: 8;
}

.camera-cancel {
    position: absolute;
    top: env(safe-area-inset-top, 12px);
    left: 16px;
    padding: 8px 13px;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
    border: 1px solid rgba(132, 255, 191, .26);
    border-radius: 18px;
    background: rgba(4, 19, 33, .58);
    backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 30;
}

.camera-tip {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 48px);
    left: 50%;
    width: max-content;
    max-width: calc(100% - 48px);
    transform: translateX(-50%);
    text-align: center;
    font-size: 18px;
    color: #E9FFF2;
    z-index: 50;
    transition: color 0.3s ease;
    font-weight: 600;
    pointer-events: none;
    text-shadow: 0 0 12px rgba(39, 225, 118, .42);
    padding: 9px 18px;
    border: 1px solid rgba(117, 239, 153, .28);
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(5, 23, 38, .78), rgba(10, 46, 41, .7));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.camera-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 50%;
    z-index: 5;
}

.camera-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* 前置摄像头镜像 */
}

/* 遮罩层 */
.face-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.overlay-svg {
    width: 100%;
    height: 100%;
}

.face-border-aura { stroke-width: 1; stroke-dasharray: 2 11; opacity: .9; animation: faceOrbit 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.face-border-scanner { stroke-width: 2; stroke-dasharray: 34 148; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(93, 239, 167, .85)); animation: faceOrbit 3.6s linear infinite; transform-box: fill-box; transform-origin: center; }
.face-border-main { stroke-width: 3; stroke-dasharray: 82 14 10 14; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(31, 191, 70, .75)); animation: faceDash 2.4s linear infinite; }

/* 进度条 */
.progress-bar {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    z-index: 30;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #22C55E, #1FBF46);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.camera-status {
    display: none;
}

/* ==================
   验证页
   ================== */
.verify-panel {
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9;
}

.verify-tip {
    margin-top: calc(env(safe-area-inset-top, 0px) + 80px);
    font-size: 20px;
    font-weight: 600;
    color: #1D2129;
    margin-bottom: 24px;
    transition: color 0.3s ease;
}

.scan-container {
    display: flex;
    justify-content: center;
}

.scan-canvas {
    width: 280px;
    height: 280px;
}

.verify-status {
    margin-top: 24px;
    font-size: 13px;
    color: #86909C;
    text-align: center;
    padding: 0 20px;
    max-width: 320px;
}

/* ==================
   结果页
   ================== */
.result-panel {
    background: radial-gradient(circle at 50% -10%, #29355f 0%, #171c36 42%, #0d1025 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 22px 28px;
    z-index: 11;
}

.result-panel h2 {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.verify-outcome {
    width: 88px;
    height: 88px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: outcomePop .28s ease-out;
}

.verify-outcome.success { background: rgba(31, 191, 70, .18); box-shadow: 0 0 0 12px rgba(31, 191, 70, .08), 0 10px 32px rgba(31, 191, 70, .2); }
.verify-outcome.failed { background: rgba(230, 53, 135, .18); box-shadow: 0 0 0 12px rgba(230, 53, 135, .08), 0 10px 32px rgba(230, 53, 135, .2); }
.verify-outcome-icon { width: 42px; height: 42px; position: relative; }
.verify-outcome.success .verify-outcome-icon::after { content: '✓'; color: #75ef99; font-size: 46px; font-weight: 700; line-height: 42px; }
.verify-outcome.failed .verify-outcome-icon::after { content: '×'; color: #ff91b6; font-size: 54px; font-weight: 300; line-height: 38px; }
.result-panel h2.verify-success { color: #75ef99; font-size: 27px; }
.result-panel h2.verify-failed { color: #ff91b6; font-size: 27px; }

.processing-visual {
    width: 106px;
    height: 106px;
    margin-bottom: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 191, 70, .22), rgba(12, 39, 50, .12) 58%, transparent 60%);
    box-shadow: 0 0 0 10px rgba(31, 191, 70, .05), 0 18px 40px rgba(0, 0, 0, .24);
}

.processing-orbit { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.processing-orbit-outer { border-top-color: #74ef9a; border-right-color: rgba(116, 239, 154, .34); animation: processingSpin 1.8s linear infinite; }
.processing-orbit-inner { inset: 13px; border-bottom-color: #75d5ff; border-left-color: rgba(117, 213, 255, .34); animation: processingSpin 1.2s linear infinite reverse; }
.processing-core { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: #d8ffea; background: linear-gradient(135deg, rgba(38, 183, 93, .7), rgba(40, 112, 151, .72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 22px rgba(31, 191, 70, .32); }
.processing-core svg { width: 27px; height: 31px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }

.res-info {
    color: rgba(255, 255, 255, .56);
    font-size: 12px;
    margin-bottom: 18px;
}

.result-panel video {
    width: 90%;
    max-height: 38vh;
    border-radius: 14px;
    background: #111;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.verify-steps {
    width: 100%;
    max-width: 340px;
    margin: 12px 0 4px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
}

.verify-step {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: rgba(255, 255, 255, .42);
    font-size: 14px;
    transition: all .25s ease;
}

.verify-step + .verify-step { border-top: 1px solid rgba(255, 255, 255, .08); }
.step-dot { width: 21px; height: 21px; margin-right: 12px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.verify-step.active { color: #FFFFFF; }
.verify-step.active .step-dot { border-color: #58db7d; background: #1fbf46; box-shadow: 0 0 0 4px rgba(31, 191, 70, .16); animation: stepPulse 1.4s ease-in-out infinite; }
.verify-step.done { color: rgba(255, 255, 255, .78); }
.verify-step.done .step-dot { border-color: #1fbf46; background: #1fbf46; color: #FFFFFF; }
.verify-step.done .step-dot::after { content: '✓'; }
.verify-step.failed { color: #ff9fbb; }
.verify-step.failed .step-dot { border-color: #e63587; background: rgba(230, 53, 135, .18); color: #ff9fbb; }
.verify-step.failed .step-dot::after { content: '!'; }

.result-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.6;
    margin-top: 16px;
    text-align: center;
    max-width: 320px;
}

.upload-progress { display: none; width: 100%; height: 6px; margin: 0 0 12px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.upload-progress > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1fbf46, #74ef9a, #1fbf46); background-size: 200% 100%; transition: width .28s ease; animation: uploadFlow 1.4s linear infinite; }
.btn-row { margin-top: 24px; display: flex; gap: 14px; }
.btn-row button { padding: 12px 30px; border: none; border-radius: 24px; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.btn-row button:active { transform: scale(.97); }
.btn-row button:disabled { opacity: .5; }
#btnSubmit { background: #1FBF46; color: #FFFFFF; }
#btnRetry { background: rgba(255, 255, 255, .12); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .2) !important; }

/* ==================
   动画工具
   ================== */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes uploadFlow {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}

@keyframes faceOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes faceDash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -120; }
}

@keyframes outcomePop {
    from { opacity: 0; transform: scale(.72); }
    to { opacity: 1; transform: scale(1); }
}

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

@keyframes stepPulse {
    50% { box-shadow: 0 0 0 9px rgba(31, 191, 70, 0); }
}

/* 安全区域适配 */
@supports (padding-top: env(safe-area-inset-top)) {
    .camera-cancel,
    .preparing-cancel {
        top: calc(env(safe-area-inset-top) + 8px);
    }
}

/* 横屏禁止提示 (仅竖屏使用) */
@media screen and (orientation: landscape) {
    body::after {
        content: "请将手机竖屏使用";
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.9);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        z-index: 9999;
    }
}