*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;color:#333;background:#f7f7f7}
.container{max-width:640px;margin:24px auto;padding:0 16px}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
h1{font-size:20px;margin:0 0 12px}
label{display:block;margin:12px 0 6px;color:#555}
input[type=text]{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;outline:none}
button,.btn{display:inline-block;padding:10px 14px;border:none;border-radius:6px;background:#007bff;color:#fff;cursor:pointer}
button:hover,.btn:hover{background:#0069d9}
.gray{background:#999!important}
.message{margin-top:12px}
.msg{padding:12px;border-radius:6px}
.msg.error{background:#ffecec;color:#d0021b;border:1px solid #ffb3b3}
.msg.success{background:#e9fbe9;color:#1b5e20;border:1px solid #b2dfb2}

/* 提货成功区域 */
.code-box{margin-top:8px;padding:12px;font-size:18px;background:#fafafa;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.code-value{font-weight:700;letter-spacing:1px;word-break:break-all;overflow-wrap:anywhere;min-width:0;white-space:pre-wrap}
.code-note{font-size:12px;color:#666;margin-top:8px}
.success-card{background:#e9fbe9;border:1px solid #b2dfb2}
.card-title{margin:0 0 8px;font-size:18px;color:#1b5e20}
.copy-btn.copied{background:#28a745}
.code-box .copy-btn{flex-shrink:0}

/* 文本通用换行优化 */
.info-row,.msg,.message{word-break:break-word;overflow-wrap:anywhere}
.info-row{word-break:normal;overflow-wrap:normal}
.nowrap{white-space:nowrap}

/* 单行显示：标签和值不换行 */
.info-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.info-row strong{flex:0 0 auto}
.info-row .nowrap{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000;/* iOS兼容性优化 */-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);/* 确保在iOS上覆盖整个屏幕 */top:0;left:0;right:0;bottom:0;/* 防止iOS上的点击穿透问题 */touch-action:none}
.modal.hidden{display:none}
.modal-content{width:90%;max-width:520px;background:#fff;border-radius:8px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.2);/* iOS兼容性优化 */max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;/* 确保内容区域可以正常点击 */touch-action:initial;/* 提高响应优先级 */position:relative;z-index:1005;/* 防止iOS上的滚动穿透问题 */-webkit-transform:translateZ(0);transform:translateZ(0)}
.modal-check{display:flex;align-items:center;gap:8px;margin-top:12px}
.modal-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}/* iOS触摸兼容性优化 */
.modal-actions .btn{/* 确保iOS设备识别为可点击元素 */-webkit-tap-highlight-color:transparent;cursor:pointer;/* 增加触摸区域大小 */padding:12px 16px;min-width:100px;/* 确保按钮在模态框中处于正确层级 */position:relative;z-index:1010;/* 解决iOS上可能的点击问题 */touch-action:manipulation;/* 提高点击响应优先级 */user-select:none}

/* 商品卡片：左图右文 */
.product-row{display:flex;gap:16px;align-items:flex-start}
.product-left{flex:0 0 220px;max-width:220px;overflow:hidden;display:flex;flex-direction:column;gap:8px;border-right:1px solid #eee;padding-right:12px}
.product-left .product-img{width:100%;height:auto;max-height:220px;object-fit:contain;display:block;margin-bottom:0}
.product-right{flex:1 1 0;min-width:0}

/* 右侧标题 + 状态徽章 */
.product-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.product-title{font-size:16px;font-weight:600;line-height:1.4;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badges{display:flex;align-items:center;gap:6px;flex-shrink:0}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.6;border:1px solid #ddd;background:#f5f5f5;color:#555}
.badge.success{background:#e6f4ea;color:#157a2e;border-color:#b7e2c1}
.badge.warning{background:#fff4e5;color:#9a5b00;border-color:#ffd39b}

/* 商品主信息一排：主图 + 标题 + 徽章 */
.hero-row{display:flex;gap:16px;align-items:flex-start}
.hero-left{flex:0 0 220px;max-width:220px;overflow:hidden}
.hero-left .product-img{width:100%;height:auto;max-height:220px;object-fit:contain;display:block}
.hero-right{flex:1 1 0;min-width:0}
/* 主信息头：标题单行，状态各占一行 */
.hero-header{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.product-title{font-size:16px;font-weight:600;line-height:1.4;min-width:0;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.badges{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.status-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.status-label{font-size:13px;color:#666;flex:0 0 auto}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.6;border:1px solid #ddd;background:#f5f5f5;color:#555}
.badge.success{background:#e8f5e9;color:#2e7d32;border-color:#c8e6c9}
.badge.warning{background:#fdecea;color:#b71c1c;border-color:#f5c2c7}

/* 其他详细信息独立块 */
.details-block{margin-top:12px;padding-top:10px;border-top:1px solid #eee}

/* 文本通用换行优化 */
.info-row,.msg,.message{word-break:break-word;overflow-wrap:anywhere}
.info-row{word-break:normal;overflow-wrap:normal}
.nowrap{white-space:nowrap}
/* 单行显示：标签和值不换行 */
.info-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.info-row strong{flex:0 0 auto}
.info-row .nowrap{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 手机端比例与主信息一排保持 */
@media (max-width:640px){
  .hero-row{flex-direction:row}
  .hero-left{flex:0 0 45%;max-width:45%}
  .hero-left .product-img{max-height:180px}
  .hero-right{flex:1 1 55%;min-width:0}
  /* 小屏保持垂直栈：标题单行，状态上下排 */
  .hero-header{flex-direction:column}
  .badges{flex-direction:column}
  .status-row{gap:6px}
}
/* 左侧板块在窄宽下的标题与徽章排版优化 */
  .product-left .product-header{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:4px}
  .product-left .badges{flex-wrap:wrap}

/* 提货按钮居中与加大 */
#pickup-form #submit-btn{display:block;margin:16px auto 0;padding:14px 24px;font-size:16px;border-radius:8px;min-width:240px}
@media (max-width:640px){
  #pickup-form #submit-btn{width:100%;min-width:0}
}

/* 通用隐藏类 */
.hidden{display:none!important}

/* Alert 样式 */
.alert { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; border:1px solid transparent; margin:12px 0; }
.alert .alert-icon { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.alert.success { background:#f6ffed; border-color:#b7eb8f; color:#135200; }
.alert.success .alert-icon { background:#95de64; color:#0c3a00; }
.alert.success .alert-icon::before { content:'\2713'; }
.alert.error { background:#fff2f0; border-color:#ffccc7; color:#a8071a; }
.alert.error .alert-icon { background:#ff7875; color:#5c0011; }
.alert.error .alert-icon::before { content:'!'; }
.alert.info { background:#e6f4ff; border-color:#91caff; color:#0958d9; }
.alert.info .alert-icon { background:#69b1ff; color:#002c8c; }
.alert.info .alert-icon::before { content:'i'; }
.alert .alert-text { line-height:1.4; }

/* 顶部滚动公告 */
.announcement-bar { background:#fffbe6; border-bottom:1px solid #ffe58f; color:#614700; }
.announcement-bar { padding:8px 12px; font-size:14px; }
.marquee-track { overflow:hidden; white-space:nowrap; position:relative; }
.marquee-content { display:inline-block; padding-left:100%; /* 起始在视口右侧 */
  will-change:transform; animation:marquee-left 36s linear infinite; }
@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* 悬停暂停滚动 */
.marquee-content:hover { animation-play-state: paused; }
/* 深色模式适配（若有） */
@media (prefers-color-scheme: dark) {
  .announcement-bar { background:#2b2b1f; border-bottom-color:#665c1a; color:#f5e7a1; }
}
/* 移动端微调 */
@media (max-width: 480px) {
  .announcement-bar { font-size:13px; padding:6px 10px; }
}
@media (max-width: 480px) {
  .alert { font-size: 13px; padding: 10px 12px; }
  .alert .alert-icon { width: 18px; height: 18px; font-size: 11px; }
}

/* Admin 布局与导航 */
.admin-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;z-index:100}
.admin-brand{font-weight:700;color:#0958d9}
.admin-top-actions .btn{margin-left:8px}
.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;max-width:1100px;margin:24px auto;padding:0 16px}
.admin-sidebar{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:10px}
.menu{display:flex;flex-direction:column}
.menu-item{display:block;padding:10px 12px;border-radius:6px;color:#333;text-decoration:none;border:1px solid transparent}
.menu-item:hover{background:#f5f5f5}
.menu-item.active{background:#e6f4ff;border-color:#91caff;color:#0958d9}
.admin-main{min-width:0}
.section-title{font-size:18px;margin:0 0 12px}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #eee;padding:8px;text-align:left}
.table th{background:#fafafa}

/* 表单按钮与卡片间距优化 */
.card button{margin-top:8px}

/* 响应式：窄屏下侧边栏折叠 */
@media (max-width: 768px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{order:2}
  .admin-main{order:1}
}

/* 登录页布局美化与居中 */
.login-container{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#f0f5ff 0%,#ffffff 60%,#e6f7ff 100%)}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:24px}
.login-title{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;color:#0958d9;margin-bottom:16px}
.login-title::before{content:"\1F512";font-size:20px}
.login-card form label{display:block;margin-bottom:6px;color:#555;font-weight:600}
.login-card input[type=text],.login-card input[type=password]{width:100%;padding:10px 12px;border:1px solid #d9d9d9;border-radius:8px;outline:none;transition:all .2s ease}
.login-card input[type=text]:focus,.login-card input[type=password]:focus{border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,.15)}
.login-card .form-row{margin-bottom:14px}
/* 登录页按钮布局修复：宽度、间距与对齐 */
.login-card form .btn{display:block;width:100%;margin-top:12px}
.login-card form .btn.btn-primary{background:#1677ff;border-color:#1677ff}
@media (max-width:480px){
  .login-card form .btn{width:100%}
}

.login-card .form-inline{display:flex;align-items:center;gap:8px;justify-content:flex-start}
.login-card .form-inline label{display:flex;align-items:center;gap:6px;margin:0}
.login-card .login-actions{justify-content:space-between}
.form-inline{display:flex;align-items:center;justify-content:space-between}
.login-footer{margin-top:10px;text-align:center;color:#999;font-size:12px}
.login-actions .right{margin-left:auto}
.login-actions a{color:#1677ff;text-decoration:none}
.login-actions a:hover{text-decoration:underline}
.login-note{font-size:12px;color:#999;margin-top:8px}

/* 登录页：密码可见切换按钮与输入框对齐修复 */
.login-card .input-with-icon{position:relative;display:block}
.login-card .input-with-icon input{padding-right:40px}
.login-card .input-with-icon .toggle-eye{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:16px;color:#999;background:transparent;border:none;z-index:2}
.login-card .input-with-icon .toggle-eye:hover{color:#666}
.login-card .input-with-icon .toggle-eye:focus-visible{outline:2px solid #91caff;outline-offset:2px}
.login-card .input-with-icon .toggle-eye[aria-pressed="true"]{color:#1677ff}
/* 首页页脚贴底（作用域：仅首页 body） */
.page-index { min-height: 100vh; display: flex; flex-direction: column; }
.page-index .page-wrap { flex: 1 0 auto; }
.page-index .site-footer { margin-top: auto; }
.site-footer{ text-align:center; color:#666; font-size:12px; padding:16px; margin:24px auto 0; }
.site-footer .footer-line{ margin:4px 0; }
.site-footer .footer-line a.mail { color: #1677ff; font-weight: 700; }
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.login-actions .right{margin-left:auto}
.login-actions a{color:#1677ff;text-decoration:none}
.login-actions a:hover{text-decoration:underline}
.login-note{font-size:12px;color:#999;margin-top:8px}
/* 错误提示的摇晃动效，与旧版交互一致 */
@keyframes modal-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}
.modal-content.shake { animation: modal-shake .4s ease-in-out; }

/* 协议弹窗样式增强（恢复原样式美化） */
.modal-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid #f0f0f0}
.modal-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:#0958d9}
.modal-title::before{content:"\1F4C4";font-size:20px;line-height:1}

/* 协议勾选美化 */
.modal-check{padding:10px 12px;background:#fffbe6;border:1px solid #ffe58f;border-radius:8px;transition:background .2s ease,border-color .2s ease;cursor:pointer}
.modal-check:hover{background:#fffdf0;border-color:#ffd666}
.modal-check input[type=checkbox]{width:18px;height:18px;border-radius:4px;accent-color:#0958d9;cursor:pointer}
.modal-check input[type=checkbox]:focus-visible{outline:2px solid #91caff;outline-offset:2px}
.modal-check input[type=checkbox]:active{transform:scale(.96)}
#pickup-form #submit-btn{display:block;margin:16px auto 0;padding:14px 24px;font-size:16px;border-radius:8px;min-width:240px}
@media (max-width:640px){
  #pickup-form #submit-btn{width:100%;min-width:0}
}

/* 通用隐藏类 */
.hidden{display:none!important}

/* Alert 样式 */
.alert { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; border:1px solid transparent; margin:12px 0; }
.alert .alert-icon { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.alert.success { background:#f6ffed; border-color:#b7eb8f; color:#135200; }
.alert.success .alert-icon { background:#95de64; color:#0c3a00; }
.alert.success .alert-icon::before { content:'\2713'; }
.alert.error { background:#fff2f0; border-color:#ffccc7; color:#a8071a; }
.alert.error .alert-icon { background:#ff7875; color:#5c0011; }
.alert.error .alert-icon::before { content:'!'; }
.alert.info { background:#e6f4ff; border-color:#91caff; color:#0958d9; }
.alert.info .alert-icon { background:#69b1ff; color:#002c8c; }
.alert.info .alert-icon::before { content:'i'; }
.alert .alert-text { line-height:1.4; }
/* 修正：成功卡片头部复制按钮与标题垂直对齐 */
.success-card .card-header .btn,
.success-card .card-header .copy-btn{margin-top:0}

.success-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.success-card .card-header .card-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.success-card .card-header .copy-btn{flex:0 0 auto}
@media (max-width:480px){
  .success-card .card-header{gap:6px}
  .success-card .card-header .card-title{font-size:16px}
}
/* 提货成功文本字号调整：降低 code-box 字体 */
.success-card .code-box{font-size:16px}
@media (max-width:480px){.success-card .code-box{font-size:15px}}