*{box-sizing:border-box}
html{background:#f5f5f5 !important}
body{font-family:"Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;background:#f5f5f5 !important;min-height:100vh;overflow-x:hidden;color:#333}
.bg-animated{background:#f5f5f5 !important}
.bg-animated::before{display:none !important}
.bg-animated::after{display:none !important}

/* ==================== 登录/注册卡片 ==================== */
.glass-card{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.glass-card-light{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}

/* ==================== 输入框 ==================== */
.input-field{width:100%;padding:12px 16px 12px 44px;background:#f8f9fa;border:1.5px solid #e9ecef;border-radius:8px;color:#333;font-size:15px;transition:all 0.2s ease;outline:none}
.input-field::placeholder{color:#999}
.input-field:focus{border-color:#0d6efd;background:#fff;box-shadow:0 0 0 3px rgba(13,110,253,0.1)}
.input-field-light{width:100%;padding:11px 16px 11px 16px;background:#f8f9fa;border:1.5px solid #e9ecef;border-radius:8px;color:#333;font-size:14px;transition:all 0.2s ease;outline:none}
.input-field-light::placeholder{color:#999}
.input-field-light:focus{border-color:#0d6efd;background:#fff;box-shadow:0 0 0 3px rgba(13,110,253,0.1)}
.select-field{width:100%;padding:11px 16px;background:#f8f9fa;border:1.5px solid #e9ecef;border-radius:8px;color:#333;font-size:14px;transition:all 0.2s ease;outline:none;cursor:pointer}
.select-field:focus{border-color:#0d6efd;background:#fff}

/* ==================== 按钮 ==================== */
.btn-primary{background:#0d6efd;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all 0.2s ease;padding:12px 24px}
.btn-primary:hover{background:#0b5ed7;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:#6c757d;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all 0.2s ease;padding:12px 24px}
.btn-secondary:hover{background:#5c636a}

/* ==================== 标签页 ==================== */
.tab-btn{padding:12px 20px;background:transparent;border:none;border-bottom:2px solid transparent;color:#666;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s}
.tab-btn:hover{color:#333;background:#f8f9fa}
.tab-btn.active{color:#0d6efd;border-bottom-color:#0d6efd}

/* ==================== 表单标签 ==================== */
.form-label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:6px;letter-spacing:0.02em}
.required{color:#ef4444;margin-left:2px}

/* ==================== 文件上传 ==================== */
.file-upload-area{border:2px dashed #ddd;border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:all 0.2s;background:#fafafa}
.file-upload-area:hover{border-color:#0d6efd;background:#f0f7ff}

/* ==================== 工牌预览（原样保留） ==================== */
.cardinfo { display: flex; justify-content: center; margin: 0; font-size: 14px; }
.cardinfo .card {
    width: 350px; height: 220px; position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    border-radius: 10px; overflow: hidden;
}
.card .card-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 10px; z-index: 0;
}
.card .info {
    width: 260px; padding: 0 10px;
    position: absolute; z-index: 10;
    top: 0; left: 0; height: 100%;
}
.card .info * {
    font-weight: 500; font-size: 13px;
    font-family: "Noto Sans SC", "黑体", "Microsoft YaHei", sans-serif;
    line-height: 1.4; letter-spacing: 0.02em;
}
.num-text {
    font-family: "Times New Roman", "Georgia", serif !important;
    font-weight: 500 !important; font-size: 13px !important;
}
.card .headimg {
    position: absolute; right: 12px; top: 38px;
    width: 90px; height: 110px; z-index: 10;
    border-radius: 0;
    object-fit: cover; object-position: center 20%;
    border: 2.5px solid #fff;
    filter: none;
}
.cardinfo .ygqimg {
    width: 115px; position: absolute;
    right: 95px; top: calc(40% - 10px); z-index: 11;
    opacity: 0.45; filter: blur(0.35px);
    mix-blend-mode: multiply; transform: rotate(-2deg);
}
#qrcode {
    width: 55px; height: 55px; z-index: 10;
    border-radius: 5px;
    background-color: rgba(250,250,250,0.08);
    display: flex; align-items: center; justify-content: center;
}
#qrcode canvas, #qrcode img {
    width: 100% !important; height: 100% !important;
    border-radius: 4px; opacity: 0.96;
}
.qr-container {
    display: flex; align-items: center;
    position: absolute; gap: 4px;
    right: 12px; top: 156px; width: fit-content; z-index: 10;
}
.vertical-text {
    writing-mode: vertical-rl; text-orientation: upright;
    font-size: 10px; z-index: 10;
    font-family: "Noto Sans SC", "黑体", SimHei, sans-serif;
    font-weight: 500; letter-spacing: 1px; opacity: 0.8;
}
.card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(145deg, rgba(255,253,248,0.08) 0%, transparent 40%, rgba(0,0,0,0.015) 100%);
    pointer-events: none; z-index: 12;
    border-radius: 10px;
}
img.card-bg, img.ygqimg, img.headimg {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==================== 预览容器（原样保留） ==================== */
.preview-container {
    background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}
.preview-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2394a3b8' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* ==================== 水印 ==================== */
.card-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}
.card-watermark span {
    font-size: 42px;
    font-weight: 900;
    color: rgba(180, 180, 180, 0.35);
    transform: rotate(-25deg);
    letter-spacing: 12px;
    white-space: nowrap;
    user-select: none;
}

/* ==================== 预览遮罩 ==================== */
.preview-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    border-radius: 16px;
    z-index: 55;
    transition: opacity 0.3s ease;
}
.preview-blur-overlay i {
    font-size: 32px;
    color: #6c757d;
    margin-bottom: 12px;
}
.preview-blur-overlay p {
    color: #475569;
    font-size: 14px;
    font-weight: 500;
}
.preview-blur-overlay .blur-btn {
    margin-top: 12px;
    background: #0d6efd;
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

/* ==================== Toast通知 ==================== */
#toast-container{position:fixed;top:24px;right:24px;z-index:9999}
.toast{padding:14px 24px;border-radius:8px;font-size:14px;margin-bottom:8px;animation:slideIn 0.3s ease-out}
.toast-success{background:#d1e7dd;color:#0f5132;border:1px solid #badbcc}
.toast-error{background:#f8d7da;color:#842029;border:1px solid #f5c2c7}
.toast-info{background:#cff4fc;color:#055160;border:1px solid #b6effb}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ==================== 动画 ==================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-in{animation:fadeInUp 0.5s ease-out}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .tab-btn { padding: 12px 16px; font-size: 14px; }
    .glass-card { margin: 0 -4px; }
}