* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100vh; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; background: #f5f5f5; font-size: 14px; color: #333; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, a:visited { text-decoration: none; }
span { display: inline-block; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

/* Login */
.login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-container { background: #fff; border-radius: 8px; padding: 40px; width: 380px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.login-header { text-align: center; margin-bottom: 30px; }
.login-header h2 { color: #333; font-size: 24px; }
.login-header p { color: #999; margin-top: 5px; }
.layui-logo { font-size: 18px; color: #fff; line-height: 60px; padding-left: 20px; font-weight: bold; }

/* Scan page */
#scanApp { position: relative; width: 100%; min-height: 100vh; background: #f5f5f5; overflow-x: hidden; }

.bgImg { position: relative; width: 100%; height: 50vw; min-height: 140px; max-height: 280px; background: linear-gradient(135deg, #d4a76a 0%, #8b5e3c 50%, #6b4226 100%); display: block; object-fit: cover; }

.productBox { position: relative; margin: 0 16px; top: -21px; background-color: #fff; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; overflow: hidden; padding: 18px 12px; font-size: 12px; border-radius: 6px; color: #333; }

.productBox .title { position: relative; font-weight: bolder; font-size: 14px; margin-bottom: 12px; }

.productInfoBox { position: relative; width: 100%; display: flex; flex-direction: row; align-items: center; font-size: 14px; min-height: 132.5px; }

.productqrcode { flex: none; text-align: left; }
.productqrcode img { width: 120px; height: 120px; display: block; }

.productInfo { flex: 1; min-width: 0; }

.containerText { font-family: "宋体", "Times New Roman", serif; color: #333; padding: 4px 0; font-size: 13px; }
.containerText p { display: inline-block; }
.containerTextName { color: #333; }
.containerTextV { color: #777; word-break: break-all; }

/* Footer inside card */
.productFooter { font-size: 12px; font-family: "楷体", "KaiTi", serif; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.productFooter h6 { margin-bottom: 6px; font-weight: 400; color: #8f8f94; font-size: 13px; line-height: 1.5; }

/* Error page */
.error-page { text-align: center; padding: 40px 20px; }
.error-page .error-icon { font-size: 60px; color: #FF5722; margin-bottom: 15px; }
.error-page.warning .error-icon { color: #FFB800; }
.error-page h2 { color: #333; margin-bottom: 10px; font-size: 16px; }
.error-page p { color: #999; font-size: 13px; }

/* Mobile: very small phones (<=360px) */
@media (max-width: 360px) {
    .bgImg { height: 40vw; min-height: 110px; }
    .productBox { margin: 0 8px; padding: 12px 8px; top: -16px; }
    .productBox .title { font-size: 13px; margin-bottom: 8px; }
    .productqrcode img { width: 90px; height: 90px; }
    .containerText { font-size: 12px; padding: 3px 0; }
    .productFooter { margin-top: 18px; padding-top: 12px; }
    .productFooter h6 { font-size: 11px; }
}

/* Mobile: medium phones (361-480px) */
@media (min-width: 361px) and (max-width: 480px) {
    .bgImg { height: 45vw; min-height: 120px; }
    .productBox { margin: 0 10px; padding: 14px 10px; }
    .productqrcode img { width: 100px; height: 100px; }
}

/* Mobile: large phones / small tablets (481-768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .productBox { margin: 0 20px; padding: 20px 16px; }
    .productqrcode img { width: 120px; height: 120px; }
}

/* Landscape on small phones */
@media (max-height: 420px) and (orientation: landscape) {
    .bgImg { height: 30vw; min-height: 80px; max-height: 140px; }
    .productBox { top: -12px; padding: 12px 10px; }
    .productqrcode img { width: 80px; height: 80px; }
    .productFooter { margin-top: 14px; padding-top: 10px; }
}