:root {
    --border-line: #d9cbb8;
    --light-gold: #c8a878;
    --dark-red: #8c2323;
    --brown: #5a4430;
    --success: #2a6330;
    --danger: #9c2c2c;
    --gray: #999;
    --gold-wait: #e67700;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body.front-body {
    background-color: <?php echo htmlspecialchars($bgColor); ?>;
    <?php if (!empty($bgImg)): ?>
    background-image: url("<?php echo htmlspecialchars($bgImg); ?>");
    <?php
    if ($bgMode === 'repeat') {
        echo 'background-repeat: repeat;';
    } elseif ($bgMode === 'center') {
        echo 'background-repeat: no-repeat; background-position: center center;';
    } elseif ($bgMode === 'cover') {
        echo 'background-repeat: no-repeat; background-position: center center; background-size: cover;';
    }
    ?>
    <?php endif; ?>
    min-height: 100vh;
}
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.front-header {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-line);
}
.front-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-box img {
    height: 50px;
}
.logo-text {
    margin:0; font-size:24px; color:var(--dark-red);
}
.front-nav {
    display: flex;
    gap:24px;
    align-items:center;
}
.front-nav a {
    color:var(--brown);
    text-decoration:none;
    font-size:16px;
}
.admin-entry {
    padding:6px 14px;
    border:1px solid var(--dark-red);
    border-radius:4px;
}
.main-content {
    padding:40px 0;
}
.page-title {
    text-align:center;
    margin-bottom:30px;
    color:var(--dark-red);
}
/* 一行4列网格，横向卡片宽度充足 */
.card-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
/* 横向长方形名片，禁止正方形比例 */
.cert-card {
    background:#fff;
    border:1px solid var(--border-line);
    border-radius:6px;
    /* 右侧加大内边距，给外飘印章留出空间 */
    padding: 18px 28px 18px 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    overflow: visible;
    min-height: 170px;
    height: auto;
}
.cert-card:hover {
    box-shadow:0 2px 12px rgba(140,35,35,0.1);
}
/* 右上角印章：放大尺寸、向外飘出卡片拐角、悬盖层级最高 */
.card-stamp {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 66px;
    height: 66px;
    z-index: 10;
    /* 印章不拦截卡片点击事件 */
    pointer-events: none;
}
.card-stamp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 左侧LOGO固定尺寸，垂直居中 */
.card-logo {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border:1px solid var(--border-line);
    padding:4px;
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-logo img {
    width:100%;
    height:100%;
    object-fit:contain;
}
/* 右侧文字区域，单行不换行，超长省略号 */
.card-info {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--brown);
}
.card-info p {
    margin: 7px 0;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.label {
    font-weight:bold;
    color:var(--dark-red);
    white-space: nowrap;
}
.tag-pass {
    color:var(--success);
}
.tag-wait {
    color:var(--gold-wait);
}
.tag-reject {
    color:var(--danger);
}
.pagination {
    display:flex;
    justify-content:center;
    gap:8px;
    margin:30px 0;
}
.pagination a, .pagination span {
    display:block;
    padding:6px 14px;
    border:1px solid var(--border-line);
    text-decoration:none;
    color:var(--brown);
    border-radius:4px;
}
.pagination .current {
    background:var(--dark-red);
    color:#fff;
    border-color:var(--dark-red);
}
.qr-wrap {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;
}
.qr-item {
    text-align: center;
}
.qr-item img {
    width: 100px;
    height: 100px;
    border: 1px solid var(--border-line);
    padding: 4px;
    background: #fff;
    object-fit: contain;
}
.qr-item p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--brown);
}
.beian-box {
    margin-top: 16px;
    font-size: 14px;
    text-align:center;
}
.beian-box a {
    color: var(--dark-red);
    text-decoration: none;
}
.beian-box a:hover {
    text-decoration: underline;
}
.front-footer {
    padding:30px 0;
    border-top:1px solid var(--border-line);
    text-align:center;
    color:var(--gray);
    font-size:14px;
}
/* 平板1200px适配：3列横向卡片 */
@media(max-width:1200px){
    .container { width:96%; }
    .card-wrap { grid-template-columns: repeat(3,1fr); gap:20px; }
    .card-stamp {
        width: 60px;
        height: 60px;
        top: -10px;
        right: -10px;
    }
}
/* 手机端单列横向卡片 */
@media(max-width:768px){
    .card-wrap { grid-template-columns: repeat(1,1fr); gap:18px; }
    .qr-wrap { gap:16px; }
    .qr-item img { width:80px; height:80px; }
    .front-header .container { flex-direction:column; gap:16px; }
    .front-nav { flex-wrap:wrap; justify-content:center; }
    .cert-card {
        padding-right: 24px;
    }
    .card-stamp {
        width: 54px;
        height: 54px;
        top: -8px;
        right: -8px;
    }
}