/* ========================================
   Register Page — 闪托品牌风格
   st.gold Luxury Dark · Apple-layout
   ======================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --navy:#0A1628;--navy-card:#111D33;--steel:#1B263B;
    --gold:#C9A96E;--gold-light:#D4B87A;--gold-dark:#A08050;
    --gold-glow:rgba(201,169,110,.22);--gold-subtle:rgba(201,169,110,.06);--gold-bg:rgba(201,169,110,.08);
    --text:#F5F5F0;--text-65:rgba(245,245,240,.65);--text-40:rgba(245,245,240,.4);--text-25:rgba(245,245,240,.25);
    --border:rgba(201,169,110,.12);--border-hover:rgba(201,169,110,.25);--border-div:rgba(201,169,110,.08);
    --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;
}

html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
    font-family:var(--font);background:#000;color:var(--text);
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    overflow-x:hidden;line-height:1.5;letter-spacing:.01em;
}

a{color:var(--gold);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--gold-light)}

/* ===== Layout ===== */
.page{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

/* ===== Background Video ===== */
.bg-video{
    position:fixed;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:-2;pointer-events:none
}
.bg-video-overlay{
    position:fixed;inset:0;
    background:rgba(10,22,40,.75);
    z-index:-1;pointer-events:none
}

/* ===== Background ===== */
.bg-gradient{
    position:fixed;inset:0;
    background:
        radial-gradient(ellipse 55% 45% at 25% 15%,rgba(201,169,110,.05) 0%,transparent 60%),
        radial-gradient(ellipse 45% 55% at 75% 85%,rgba(201,169,110,.04) 0%,transparent 60%);
    z-index:0
}
.bg-orb{position:fixed;border-radius:50%;filter:blur(140px);opacity:.35;z-index:0;pointer-events:none;animation:orbFloat 20s ease-in-out infinite}
.bg-orb--1{width:600px;height:600px;background:radial-gradient(circle,rgba(201,169,110,.07) 0%,transparent 70%);top:-20%;right:-12%}
.bg-orb--2{width:450px;height:450px;background:radial-gradient(circle,rgba(201,169,110,.04) 0%,transparent 70%);bottom:-15%;left:-10%;animation-delay:-10s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.06)}66%{transform:translate(-20px,15px) scale(.94)}}

/* ===== Card ===== */
.register-card{
    position:relative;z-index:1;width:100%;max-width:540px;
    background:var(--navy-card);border-radius:var(--r-xl);
    border:1px solid var(--border);
    box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(201,169,110,.06);
    overflow:visible;animation:cardIn .7s cubic-bezier(.16,1,.3,1);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transition:box-shadow .4s ease;
}
.register-card:hover{box-shadow:0 12px 48px rgba(0,0,0,.55),0 0 0 1px rgba(201,169,110,.1),0 0 30px rgba(201,169,110,.06)}
.register-card::before{
    content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,rgba(201,169,110,.35) 0%,transparent 40%,transparent 60%,rgba(201,169,110,.08) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.card-inner{padding:44px 44px 32px}

/* ===== Brand ===== */
.brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px}
.brand-mark{line-height:0}
.brand-mark svg{filter:drop-shadow(0 2px 12px rgba(201,169,110,.3))}
.brand-name{font-size:24px;font-weight:600;letter-spacing:.06em;color:var(--gold)}

/* ===== Heading ===== */
.heading{font-size:26px;font-weight:700;letter-spacing:.02em;text-align:center;color:var(--text);margin-bottom:6px}
.subtitle{font-size:14px;color:var(--text-65);text-align:center;margin-bottom:24px}

/* ===== Form ===== */
.form{display:flex;flex-direction:column;gap:12px}

.input-wrapper{
    display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    border-radius:var(--r-md);transition:all .3s cubic-bezier(.16,1,.3,1)
}
.input-wrapper:hover{background:rgba(255,255,255,.05);border-color:var(--border-hover)}
.input-wrapper--focused,.input-wrapper:focus-within{
    background:var(--gold-bg);border-color:var(--gold);
    box-shadow:0 0 0 4px var(--gold-subtle),0 0 16px rgba(201,169,110,.06)
}

.input-icon{flex-shrink:0;color:var(--text-40);transition:color .3s ease}
.input-wrapper--focused .input-icon,.input-wrapper:focus-within .input-icon{color:var(--gold)}

.input{
    flex:1;width:100%;height:100%;border:none;outline:none;background:transparent;
    font-family:var(--font);font-size:14px;color:var(--text);letter-spacing:.01em
}
.input::placeholder{color:var(--text-25)}
.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 30px var(--navy-card) inset!important;
    -webkit-text-fill-color:var(--text)!important
}

/* Select */
.select-input{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 0 center;padding-right:8px;
    cursor:pointer;color:var(--gold);font-weight:600
}
.select-input option{background:var(--navy);color:var(--text)}

/* ===== Captcha Row ===== */
.captcha-row{display:flex;gap:10px;align-items:stretch}
.input-wrapper--captcha{flex:1}
.captcha-img{
    width:100px;height:30px;border-radius:var(--r-md);
    overflow:hidden;flex-shrink:0
}
.btn-refresh{
    width:40px;height:48px;border-radius:var(--r-md);
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    color:var(--text-40);cursor:pointer;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:all .25s ease
}
.btn-refresh:hover{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}

.btn-sms{
    width:100px;height:48px;border-radius:var(--r-md);
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    color:var(--text-65);cursor:pointer;flex-shrink:0;
    font-family:var(--font);font-size:12px;font-weight:500;
    white-space:nowrap;transition:all .25s ease
}
.btn-sms:hover{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
.btn-sms[disabled]{opacity:.4;pointer-events:none}

/* ===== Upload ===== */
.upload-row{margin-top:4px}
.upload-label{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;background:rgba(255,255,255,.03);
    border:1px dashed var(--border);border-radius:var(--r-md);
    color:var(--text-65);cursor:pointer;font-size:13px;
    transition:all .25s ease
}
.upload-label:hover{background:var(--gold-bg);border-color:var(--gold);color:var(--gold)}
.upload-input{display:none}
.upload-preview{display:none;max-width:100%;border-radius:var(--r-md);margin-top:8px;border:1px solid var(--border)}
.upload-preview[src]:not([src=""]){display:block}

/* ===== Agreement ===== */
.agreement-row{
    display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
    padding:10px 0 2px;font-size:13px;color:var(--text-65)
}
.checkbox{position:absolute;opacity:0;width:0;height:0}
.checkbox-custom{
    width:18px;height:18px;border:1.5px solid var(--text-40);border-radius:4px;
    transition:all .25s ease;position:relative;flex-shrink:0
}
.checkbox:hover+.checkbox-custom{border-color:var(--gold)}
.checkbox:checked+.checkbox-custom{background:var(--gold);border-color:var(--gold)}
.checkbox:checked+.checkbox-custom::after{
    content:'';position:absolute;left:5px;top:2px;width:6px;height:10px;
    border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg)
}
.agreement-text .link{text-decoration:underline}

/* ===== Data notice ===== */
.data-notice{
    font-size:11px;color:var(--text-40);text-align:center;
    padding:6px 0 0;letter-spacing:.02em
}

/* ===== Register Button ===== */
.btn-login{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:50px;margin-top:2px;padding:0 24px;
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
    color:#0A1628;font-family:var(--font);font-size:16px;font-weight:700;letter-spacing:.07em;
    border:none;border-radius:var(--r-md);cursor:pointer;position:relative;overflow:hidden;
    transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 16px rgba(201,169,110,.2)
}
.btn-login::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 50%);pointer-events:none
}
.btn-login::before{
    content:'';position:absolute;width:0;height:0;border-radius:50%;
    background:rgba(255,255,255,.3);top:50%;left:50%;transform:translate(-50%,-50%);
    transition:width .6s ease,height .6s ease,opacity .6s ease
}
.btn-login:active::before{width:600px;height:600px;opacity:0;transition:0s}
.btn-login:hover:not(.btn-login--disabled){
    background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);
    transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,169,110,.4),0 0 0 1px rgba(201,169,110,.1)
}
.btn-login:active:not(.btn-login--disabled){transform:translateY(0) scale(.97);box-shadow:0 2px 8px rgba(201,169,110,.2)}

.btn-login--disabled{
    background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 100%);
    color:var(--text-40);box-shadow:none;cursor:not-allowed
}

.btn-arrow{transition:transform .3s ease}
.btn-login:hover:not(.btn-login--disabled) .btn-arrow{transform:translateX(4px)}

/* ===== Divider ===== */
.divider{display:flex;align-items:center;gap:14px;margin:22px 0 16px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border-div)}
.divider-text{font-size:12px;color:var(--text-40);white-space:nowrap}

/* ===== Back to Login ===== */
.btn-register{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:46px;background:rgba(255,255,255,.02);
    color:var(--text-65);font-size:14px;font-weight:500;
    border:1px solid var(--border);border-radius:var(--r-md);transition:all .25s ease
}
.btn-register:hover{background:rgba(255,255,255,.05);border-color:var(--gold);color:var(--gold);text-decoration:none}

/* ==========================================
   Card Footer
   ========================================== */
.card-footer{
    background:rgba(0,0,0,.2);border-top:1px solid var(--border-div);
    padding:28px 32px 24px;display:flex;flex-direction:column;gap:20px
}

.training-card{
    display:block;background:rgba(201,169,110,.05);
    border:1px solid rgba(201,169,110,.12);border-radius:var(--r-md);
    overflow:hidden;transition:all .3s ease
}
.training-card:hover{
    background:rgba(201,169,110,.1);border-color:var(--gold);
    box-shadow:0 4px 16px rgba(201,169,110,.12)
}
.training-card-inner{
    display:flex;align-items:center;gap:12px;padding:16px 18px;color:var(--gold)
}
.training-card-inner>svg:first-child{flex-shrink:0;opacity:.85}
.training-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.training-title{font-size:13px;font-weight:600;color:var(--gold);line-height:1.3}
.training-desc{font-size:11px;color:var(--text-40);line-height:1.3}
.training-arrow{flex-shrink:0;opacity:.6;transition:all .3s ease;margin-left:auto}
.training-card:hover .training-arrow{opacity:1;transform:translateX(3px)}

.footer-row{display:flex;flex-direction:column;gap:12px}
.footer-row-head{
    display:flex;align-items:center;gap:6px;
    font-size:11px;font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;color:var(--text-40)
}
.footer-row-head svg{color:var(--gold)}

.app-versions{display:flex;gap:8px}
.app-ver{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:10px 0 9px;font-size:14px;font-weight:700;color:var(--text-65);
    background:rgba(255,255,255,.03);border:1px solid var(--border);
    border-radius:var(--r-sm);transition:all .25s ease;letter-spacing:.02em
}
.app-ver:hover{
    background:rgba(201,169,110,.08);border-color:var(--gold);color:var(--gold);
    transform:translateY(-2px);box-shadow:0 4px 12px rgba(201,169,110,.12)
}
.app-ver--latest{border-color:rgba(201,169,110,.3)}
.app-ver-badge{
    font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;
    background:var(--gold);color:var(--navy);letter-spacing:.04em;
    animation:badgePulse 2s ease-in-out infinite
}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ===== Toast ===== */
.toast{
    position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120px);
    padding:12px 24px;background:rgba(10,22,40,.95);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border);color:var(--text);
    font-family:var(--font);font-size:13px;font-weight:500;border-radius:var(--r-lg);
    z-index:9999;opacity:0;transition:all .35s cubic-bezier(.16,1,.3,1);
    pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.5)
}
.toast--show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast--success{background:rgba(10,40,20,.95);border-color:rgba(82,196,26,.3)}
.toast--error{background:rgba(40,10,10,.95);border-color:rgba(255,77,79,.3)}

/* ===== Responsive ===== */
@media(max-width:580px){
    .card-inner{padding:36px 28px 24px}
    .card-footer{padding:24px 24px 20px}
}
@media(max-width:480px){
    .card-inner{padding:32px 20px 22px}
    .heading{font-size:22px}
    .footer-row{flex-direction:column;gap:18px}
    .captcha-row{flex-wrap:wrap}
    .captcha-img{width:160px;height:30px}
    .btn-sms{width:100%;flex-basis:100%}
    .input-wrapper--captcha{flex:1}
}
@media(max-width:380px){
    .card-inner{padding:26px 16px 18px}
    .heading{font-size:20px}
    .app-versions{flex-direction:column}
}