*{box-sizing:border-box;margin:0;padding:0}
body{
    min-height:100vh;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:#eef0ff;
    background:
        radial-gradient(circle at 70% 5%,rgba(93,72,255,.35),transparent 28%),
        radial-gradient(circle at 20% 45%,rgba(132,92,255,.18),transparent 32%),
        linear-gradient(180deg,#151844,#0b102b 100%);
}
.page{max-width:820px;margin:0 auto;padding:60px 22px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.brand{display:flex;align-items:center;gap:18px}
.logo{
    width:64px;height:64px;border-radius:20px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#5f6cff,#8c52ff);
    font-size:28px;box-shadow:0 18px 45px rgba(108,92,255,.45)
}
h1{font-size:30px;letter-spacing:-.5px}
.brand p{color:#aeb4e9;margin-top:4px}
.lang{
    width:auto;padding:12px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.08);color:#e8e9ff;font-weight:700
}
.notice{
    position:relative;margin-bottom:24px;padding:20px 28px;border-radius:22px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
    color:#d6d8f8;line-height:1.8;font-size:17px
}
.notice a{color:#fff}
.close{
    position:absolute;right:18px;top:14px;width:30px;height:30px;border:0;border-radius:50%;
    background:transparent;color:#d7d9ff;font-size:26px;cursor:pointer
}
.panel{
    padding:34px;border-radius:34px;
    background:linear-gradient(180deg,rgba(49,45,129,.88),rgba(35,38,99,.92));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 32px 90px rgba(0,0,0,.45)
}
.form-row{display:flex;gap:12px;margin-bottom:16px}
input{
    flex:1;border:1px solid rgba(255,255,255,.12);outline:none;
    padding:17px 18px;border-radius:18px;background:rgba(255,255,255,.08);
    color:#fff;font-size:16px
}
input::placeholder{color:#aeb2df}
button{
    border:none;border-radius:18px;padding:15px 20px;
    background:linear-gradient(135deg,#6e65ff,#9a4dff);
    color:#fff;font-weight:800;font-size:15px;cursor:pointer;
    transition:.2s
}
button:hover{transform:translateY(-1px);filter:brightness(1.05)}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.quick-actions button,.ghost{
    background:rgba(255,255,255,.10);color:#cfd4ff;border:1px solid rgba(255,255,255,.08)
}
.loading,.error{
    margin:16px 0;padding:15px;border-radius:16px;background:rgba(255,255,255,.08)
}
.error{background:rgba(255,68,92,.15);border:1px solid rgba(255,68,92,.35);color:#ffb6c0}
.hidden{display:none!important}
.time-line{display:flex;justify-content:space-between;align-items:center;color:#aeb4e9;margin:8px 0 24px}
.ghost{width:auto;padding:13px 18px}
.card-visual{
    position:relative;max-width:560px;margin:0 auto 26px;padding:34px;border-radius:24px;
    min-height:255px;overflow:hidden;
    background:
        radial-gradient(circle at 10% 0%,rgba(255,255,255,.28),transparent 24%),
        linear-gradient(135deg,#764cf6 0%,#923fff 48%,#cf5df2 100%);
    box-shadow:0 22px 55px rgba(0,0,0,.33)
}
.card-visual:before{
    content:"";position:absolute;right:-65px;bottom:-70px;width:230px;height:230px;
    border-radius:50%;background:rgba(255,255,255,.08)
}
.chip{
    width:58px;height:42px;border-radius:9px;
    background:linear-gradient(135deg,#ffe77a,#d39b16);
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)
}
.visa{position:absolute;right:34px;top:34px;font-size:30px;font-weight:900;font-style:italic}
.card-number{margin-top:46px;font-size:25px;letter-spacing:5px;font-weight:800;display:flex;gap:12px;align-items:center}
.copy-small{
    width:28px;height:28px;padding:0;border-radius:8px;background:rgba(255,255,255,.12)
}
.card-meta{display:flex;justify-content:space-between;margin-top:30px;gap:16px}
.card-meta small{display:block;color:#dfd7ff;font-size:12px;margin-bottom:4px}
.card-meta b{font-size:17px}
.info-table{
    border-radius:22px;overflow:hidden;background:rgba(255,255,255,.06);
    margin-bottom:24px;border:1px solid rgba(255,255,255,.06)
}
.info-table div{
    display:flex;justify-content:space-between;gap:18px;padding:18px 24px;
    border-bottom:1px solid rgba(255,255,255,.06)
}
.info-table div:last-child{border-bottom:0}
.info-table span{color:#aeb4e9}
.info-table b{text-align:right}
.ok{color:#31f09e}
.address{
    margin-bottom:24px;padding:22px;border-radius:22px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)
}
.address-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#d9dcff;font-weight:800}
.address-title button{width:auto;padding:10px 14px;border-radius:12px;background:rgba(116,108,255,.35)}
.address p{color:#c9cdfb;line-height:1.7}
.btn-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px}
.blue{background:#24458e}
.red{background:#5b2448;color:#ff7d8f;border:1px solid rgba(255,111,136,.35)}
.raw{margin-top:22px}
.raw h3{font-size:15px;color:#aeb4e9;margin-bottom:8px}
pre{
    white-space:pre-wrap;word-break:break-word;
    background:rgba(0,0,0,.28);padding:18px;border-radius:18px;color:#cfe4ff;
    max-height:280px;overflow:auto;font-size:13px
}
@media(max-width:640px){
    .page{padding:28px 14px}
    .top{gap:14px}
    .logo{width:54px;height:54px}
    h1{font-size:25px}
    .panel{padding:20px;border-radius:26px}
    .form-row{flex-direction:column}
    .quick-actions,.btn-grid{grid-template-columns:1fr}
    .card-number{font-size:18px;letter-spacing:3px}
    .card-meta{flex-direction:column}
    .notice{font-size:14px}
}