/* 简易发卡网 样式 */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:#f5f7fa;color:#2c3e50;line-height:1.6;font-size:14px}
a{color:#3498db;text-decoration:none}
a:hover{color:#2980b9}
code{background:#f0f0f0;padding:1px 6px;border-radius:3px;font-family:Consolas,Monaco,monospace;font-size:13px}
.container{max-width:1080px;margin:0 auto;padding:0 16px}

/* 顶部 */
.site-header{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05);position:sticky;top:0;z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:56px}
.brand{font-weight:bold;font-size:18px;color:#2c3e50}
.nav a{margin-left:16px;color:#555;font-size:14px}
.nav a:hover{color:#3498db}

.main{padding:24px 16px;min-height:60vh}
.site-footer{text-align:center;padding:20px 16px;color:#888;font-size:13px;border-top:1px solid #eee;background:#fff}

/* 通用元素 */
.page-title{margin-bottom:20px}
.page-title h2{font-size:22px;color:#2c3e50}
.page-title p{color:#888;margin-top:4px}
.empty{padding:40px 20px;text-align:center;color:#999;background:#fff;border-radius:8px}
.tip{color:#999;font-size:12px;margin-top:6px}
.small{font-size:12px;color:#999}

/* 按钮 */
.btn{display:inline-block;padding:9px 18px;background:#3498db;color:#fff !important;border-radius:6px;border:0;cursor:pointer;font-size:14px;text-align:center;transition:background .15s}
.btn:hover{background:#2980b9}
.btn-block{display:block;width:100%}
.btn-outline{background:#fff;color:#3498db !important;border:1px solid #3498db}
.btn-outline:hover{background:#3498db;color:#fff !important}
.btn-sm{padding:5px 12px;font-size:13px}
.btn-active{background:#3498db;color:#fff !important}
.btn.disabled,.btn[disabled]{background:#bdc3c7;cursor:not-allowed}

/* alert */
.alert{padding:10px 14px;border-radius:6px;background:#eaf6ff;border:1px solid #b8dcf2;color:#1c6ea4;margin-bottom:16px}
.alert-error{background:#fdf3f2;border-color:#f8d7da;color:#a94442}
.alert-success{background:#eafaf1;border-color:#b8e6cc;color:#1e7e34}

/* 首页商品卡片 */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.product-card{background:#fff;border-radius:10px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column}
.product-name{font-size:16px;font-weight:bold;margin-bottom:8px}
.product-desc{color:#888;font-size:13px;min-height:36px;margin-bottom:12px;flex:1}
.product-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.price{font-size:20px;color:#e74c3c;font-weight:bold}
.stock{font-size:13px;color:#27ae60}
.stock.out{color:#e74c3c}
.product-card .btn{margin-top:auto}

/* 购买页 */
.buy-wrap{max-width:560px;margin:0 auto}
.buy-card{background:#fff;border-radius:10px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.buy-title{font-size:20px;margin-bottom:8px}
.buy-desc{color:#666;margin-bottom:14px;word-break:break-word}
.buy-desc img{max-width:100%;height:auto;border-radius:6px;margin:6px 0}
.buy-desc a{color:#1677ff;text-decoration:underline;word-break:break-word}
.buy-desc a:hover{color:#0958d9}
.buy-desc p,.buy-desc div,.buy-desc br{line-height:1.7}
.buy-price{margin-bottom:6px;color:#555}
.buy-price strong{color:#e74c3c;font-size:18px}
.buy-stock{margin-bottom:18px;font-size:13px;color:#888}
.buy-stock .out{color:#e74c3c}
.buy-card label{display:block;margin:12px 0 4px;font-size:13px;color:#555}
.buy-card input[type=text],.buy-card input[type=email],.buy-card input[type=number]{width:100%;padding:9px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.buy-card input:focus{outline:none;border-color:#3498db}
.pay-types{display:flex;gap:14px;margin-top:6px}
.pay-opt{display:flex;align-items:center;gap:5px;font-size:14px;color:#555}
.buy-total{text-align:right;margin:16px 0;font-size:16px}
.buy-total strong{color:#e74c3c;font-size:20px}

/* 结果页 */
.result-wrap{max-width:640px;margin:0 auto;text-align:center;background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.result-icon{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff}
.result-icon.ok{background:#27ae60}
.result-icon.warn{background:#f39c12}
.result-icon.wait{background:#95a5a6}
.result-title{font-size:22px;margin-bottom:6px}
.result-sub{color:#888;margin-bottom:18px;font-size:13px}
.cards-box{margin:18px 0;text-align:left}
.cards-box-title{font-weight:bold;margin-bottom:8px;color:#555}
.cards-box textarea{width:100%;min-height:120px;padding:12px;border:1px solid #ddd;border-radius:6px;font-family:Consolas,monospace;font-size:13px;resize:vertical;background:#fafafa}
.cards-actions{margin-top:10px;display:flex;gap:10px;justify-content:center}
.order-info{background:#fafafa;border-radius:8px;padding:14px 18px;margin:18px 0;text-align:left}
.order-info div{padding:3px 0;font-size:13px}
.order-info span{color:#888;display:inline-block;width:120px}

/* 查询页 */
.query-box{max-width:560px;margin:0 auto 24px}
.query-input{display:flex;gap:10px}
.query-input input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.query-input input:focus{outline:none;border-color:#3498db}

/* 登录页 */
.login-wrap{max-width:380px;margin:40px auto}
.login-card{background:#fff;padding:28px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.login-card h2{text-align:center;margin-bottom:18px}
.login-card label{display:block;margin:10px 0 4px;font-size:13px;color:#555}
.login-card input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.back-link{display:block;text-align:center;margin-top:14px;color:#888;font-size:13px}

/* 后台 */
.admin-page h2{font-size:22px;margin-bottom:16px}
.admin-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 14px;flex-wrap:wrap;gap:10px}
.admin-head h3{font-size:16px}
.form-card{background:#fff;border-radius:8px;padding:20px;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.form-card h3{margin-bottom:14px;font-size:16px}
.form-card label{display:block;margin:10px 0 4px;font-size:13px;color:#555}
.form-card input[type=text],.form-card input[type=password],.form-card input[type=number],.form-card select,.form-card textarea{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}
.form-card textarea{resize:vertical}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:#3498db}
.form-card .btn{margin-top:14px}

/* 表格 */
.table-wrap{overflow-x:auto;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th,.data-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #f0f0f0;white-space:nowrap}
.data-table th{background:#fafafa;color:#666;font-weight:600}
.data-table tr:hover{background:#fafafa}
.data-table td.empty{text-align:center;color:#999;padding:30px}
.data-table .del{color:#e74c3c;margin-left:8px}
.data-table .card-content code{word-break:break-all}

/* 统计 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.stat-card{background:#fff;border-radius:8px;padding:18px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.stat-num{font-size:24px;font-weight:bold;color:#3498db}
.stat-label{font-size:13px;color:#888;margin-top:4px}

/* 徽标 */
.badge{padding:2px 8px;border-radius:10px;font-size:12px;color:#fff}
.badge-0{background:#95a5a6}
.badge-1{background:#27ae60}
.badge-2{background:#f39c12}

.filter{display:flex;gap:6px;flex-wrap:wrap}

@media (max-width:600px){
  .header-inner{flex-direction:column;height:auto;padding:8px 0}
  .nav a{margin:0 8px}
  .nav{margin-top:6px}
  .product-grid{grid-template-columns:1fr}
  .order-info span{width:100px}
}