/* 账户页面样式 - 科技蓝主题 */
.auth-wrapper {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: var(--accent-primary);
	padding: 40px 16px;
}

/* 登录页背景单独调整：深色底 + 绿色点缀，避免整屏纯绿 */
.auth-login-page .auth-wrapper,
.auth-register-page .auth-wrapper {
	background:
		radial-gradient(circle at 15% 20%, rgba(0, 255, 136, 0.12) 0%, transparent 38%),
		radial-gradient(circle at 85% 80%, rgba(0, 255, 136, 0.08) 0%, transparent 42%),
		linear-gradient(135deg, #060a0f 0%, #0c1219 55%, #111827 100%);
}

.auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--bg-tertiary);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	padding: 32px 28px;
}

.auth-title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
}

.auth-form .form-item {
	margin-bottom: 16px;
}

.auth-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--text-secondary);
	font-weight: 600;
}

.auth-form input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border-light);
	border-radius: 10px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-form input:focus {
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px rgba(0,255,136,.2);
}

.auth-submit {
	width: 100%;
	margin-top: 8px;
}

.auth-alt {
	margin-top: 12px;
	text-align: center;
	color: var(--text-secondary);
}

.auth-alt a { color: var(--accent-primary); text-decoration: none; }

/* 个人中心 */
.profile-wrapper { min-height: 100vh; background: var(--bg-secondary); padding: 32px 16px; }
.profile-header { max-width: 960px; margin: 0 auto 16px; display: flex; justify-content: space-between; align-items: center; }
.profile-header h1 { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.profile-card { max-width: 960px; margin: 0 auto 16px; background: var(--bg-tertiary); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); padding: 20px; }
.profile-row { display: flex; align-items: center; gap: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-primary); color: #fff; display:flex; align-items:center; justify-content:center; font-size: 24px; }
.profile-row .muted { color: var(--text-secondary); margin: 4px 0 0; }
.profile-grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.profile-item { background: var(--bg-tertiary); border-radius: 14px; padding: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); display: flex; gap: 12px; color: var(--text-primary); text-decoration: none; }
.profile-item i { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-primary); color:#fff; display:flex; align-items:center; justify-content:center; }
.profile-item h4 { margin: 0 0 6px; font-weight: 700; }
.profile-item .muted { color: var(--text-secondary); margin: 0; }
.profile-actions .btn { background: var(--bg-tertiary); color: var(--accent-primary); border: 2px solid var(--accent-primary); }
.profile-actions .btn:hover { background: var(--accent-primary); color: #fff; }

/* 个人中心布局：侧栏 + 内容 */
.profile-layout { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.profile-sidebar { background:var(--bg-tertiary); border-radius:16px; box-shadow:0 12px 40px rgba(0, 0, 0, 0.3); padding:14px; position:sticky; top:16px; height: fit-content; }
.profile-menu { list-style:none; margin:0; padding:0; }
.profile-menu li { margin-bottom:6px; }
.profile-menu a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--text-primary); text-decoration:none; }
.profile-menu a:hover { background:var(--bg-tertiary); }
.profile-menu a.active { background:linear-gradient(90deg, var(--accent-primary), var(--accent-primary)); color:#fff; box-shadow:0 6px 18px rgba(0,255,136,.25); }
.profile-content { min-height: 420px; }

@media (max-width: 980px){ .profile-layout { grid-template-columns: 1fr; } .profile-sidebar { position: static; } }

/* 设置页面补充样式 */
.case-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--border-light); border-radius:10px; margin-bottom:8px; }
.case-item a { color:#ef4444; text-decoration:none; }
.case-item a:hover { text-decoration: underline; }

/* 设置页面表单布局（提高优先级，确保生效） */
.profile-wrapper .order-form { max-width: 760px; }
.profile-wrapper .order-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-wrapper .order-form .form-item { display: flex; flex-direction: column; }
.profile-wrapper .order-form .form-item.span-2 { grid-column: span 2; }
.profile-wrapper .order-form label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-weight: 600; line-height: 1.2; }
.profile-wrapper .order-form input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 10px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; background: var(--bg-tertiary); color: var(--text-primary); }
.profile-wrapper .order-form input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(0,255,136,.18); }
.profile-wrapper .order-form .btn { margin-top: 12px; }

/* 订单状态徽章 */
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge--pending { background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border-light); }
.badge--shipped { background:var(--bg-tertiary); color:var(--accent-primary); border:1px solid var(--border-accent); }
.badge--paid { background:var(--accent-glow); color:var(--accent-primary); border:1px solid var(--border-accent); }

/* 订单表格提升对比度与悬浮 */
.order-table { width:100%; border-collapse: separate; border-spacing: 0 10px; }
.order-table thead th { background:var(--bg-tertiary); border-radius:10px; }
.order-table tbody tr { background:var(--bg-tertiary); box-shadow:0 6px 20px rgba(0, 0, 0, 0.3); }
.order-table th, .order-table td { padding: 14px 16px; border-bottom: none; }
.order-table tbody tr:hover { transform: translateY(-2px); transition: transform .2s ease; }

/* 订单列表商品摘要 */
.order-sum { display:flex; align-items:center; gap:10px; }
.order-sum .thumbs { display:flex; }
.order-sum .thumbs img { width:32px; height:32px; border-radius:6px; object-fit:cover; box-shadow:0 2px 8px rgba(0, 0, 0, 0.4); margin-right:-6px; border:2px solid var(--bg-secondary); }
.order-sum .more { color:var(--text-secondary); font-size:12px; }

/* 地址卡片列表 */
.addr-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.addr-card { background:var(--bg-tertiary); border-radius:12px; padding:14px; box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); display:flex; justify-content:space-between; align-items:flex-start; }
.addr-meta { color:var(--text-secondary); }
.addr-actions a { color:#ef4444; text-decoration:none; }
.addr-actions a:hover { text-decoration: underline; }

/* 优惠券卡片 */
.coupon-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.coupon { background: var(--bg-tertiary); border:1px dashed var(--border-accent); border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(0,255,136,.15); color:var(--text-primary); position:relative; }
.coupon:before, .coupon:after { content:''; position:absolute; top:50%; width:16px; height:16px; background:var(--bg-secondary); border-radius:50%; transform:translateY(-50%); }
.coupon:before { left:-8px; }
.coupon:after { right:-8px; }
.coupon small { color:var(--text-secondary); display:block; margin-top:6px; }

/* 订单详情 */
.order-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.order-head .meta { color:var(--text-secondary); }
.order-steps { display:flex; gap:10px; margin:10px 0 16px; }
.order-step { flex:1; padding:10px; text-align:center; border-radius:10px; background:var(--bg-tertiary); color:var(--text-secondary); font-weight:600; }
.order-step.active { background:linear-gradient(90deg, var(--accent-primary), var(--accent-primary)); color:#fff; box-shadow:0 6px 18px rgba(0,255,136,.25); }

.order-items-table { width:100%; border-collapse: separate; border-spacing:0 8px; }
.order-items-table th, .order-items-table td { padding:12px 14px; }
.order-items-table thead th { background:var(--bg-tertiary); border-radius:10px; text-align:left; }
.order-items-table tbody tr { background:var(--bg-tertiary); box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); }
.order-item { display:flex; align-items:center; gap:10px; }
.order-item img { width:48px; height:48px; border-radius:10px; object-fit:cover; box-shadow:0 4px 12px rgba(0, 0, 0, 0.4); }
.order-summary { margin-top:12px; display:flex; justify-content:flex-end; }
.order-summary .card { min-width:320px; background:var(--bg-tertiary); border-radius:14px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); padding:14px; }
.order-summary .row { display:flex; justify-content:space-between; margin:6px 0; color:var(--text-secondary); }
.order-summary .row.total { font-weight:800; color:var(--text-primary); font-size:18px; }
.address-card { background:var(--bg-tertiary); border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); color:var(--text-secondary); }

/* 全局细节统一 */
.profile-card { border:1px solid var(--border-light); }
.btn { border-radius:12px; padding:10px 16px; font-weight:700; }
.btn.btn-primary { background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary)); color:#fff; border:none; box-shadow:0 8px 24px rgba(0,255,136,.25); }
.btn.btn-primary:hover { transform: translateY(-1px); }

.profile-menu a i { width: 36px; height:36px; border-radius:10px; background: var(--accent-primary); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,255,136,.25); }
.profile-menu a.active i { background:var(--bg-tertiary); color: var(--accent-primary); box-shadow:none; }
.profile-menu a.active { border:1px solid rgba(0,255,136,.25); }

/* 表格条纹与横向滚动 */
.table-scroll { overflow:auto; }
.order-table thead th { position: sticky; top:0; z-index:1; }
.order-table tbody tr:nth-child(even) { filter: brightness(0.99); }

/* 小屏适配 */
@media (max-width: 640px){
	.profile-header { flex-direction: column; align-items: flex-start; gap:10px; }
	.order-summary { justify-content: stretch; }
	.order-summary .card { width:100%; min-width: unset; }
	.profile-grid { grid-template-columns: 1fr; }
}

/* 收藏卡片 */
.fav-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.fav-card { background:var(--bg-tertiary); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); display:flex; flex-direction:column; }
.fav-card img { width:100%; height:140px; object-fit:cover; }
.fav-card .body { padding:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.fav-card .title { font-weight:800; color:var(--text-primary); }
.fav-card .actions { display:flex; gap:8px; }
.fav-card .actions a { text-decoration:none; padding:6px 10px; border-radius:10px; font-weight:700; }
.fav-card .actions .primary { background:linear-gradient(90deg, var(--accent-primary), var(--accent-primary)); color:#fff; }
.fav-card .actions .danger { background:rgba(239,68,68,0.15); color:#ef4444; }

/* 收藏卡片加强 */
.fav-card { transition: transform .2s ease, box-shadow .2s ease; }
.fav-card:hover { transform: translateY(-3px); box-shadow:0 16px 40px rgba(0, 0, 0, 0.4); }
.fav-card img { aspect-ratio: 16/9; height: auto; }
.fav-card .title { line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fav-card .actions a { padding:8px 12px; box-shadow:0 6px 16px rgba(0, 0, 0, 0.3); }
.fav-card .actions a:hover { transform: translateY(-1px); }
.fav-card .actions .danger { background:rgba(239,68,68,0.15); color:#ef4444; }

/* 统一标题与留白 */
.profile-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color:var(--text-primary); }
.section-title { display:flex; align-items:center; gap:8px; margin: 8px 0 12px; font-weight:800; }
.section-title:before { content:''; width:6px; height:6px; border-radius:50%; background: var(--accent-primary); box-shadow:0 0 0 6px rgba(0,255,136,.15); }

/* 通用徽章色系 */
.badge { letter-spacing:.2px; }
.badge--info { background:var(--bg-tertiary); color:var(--accent-primary); border:1px solid var(--border-accent); }

/* 按钮尺寸统一 */
.btn { padding:10px 16px; font-size:14px; }

/* 列表卡片化 */
.list-card { background:var(--bg-tertiary); border-radius:14px; box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); border:1px solid var(--border-light); }
.list-row { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border-light); }
.list-row:last-child { border-bottom:none; }

/* 空态占位 */
.empty { text-align:center; color:var(--text-secondary); padding:28px 12px; }

/* 骨架屏（可复用） */
.skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-light) 37%, var(--bg-tertiary) 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; border-radius:10px; }
@keyframes sk { 0%{ background-position: 100% 0 } 100%{ background-position: -100% 0 } }

/* 表格卡片化统一阴影与圆角（复用订单表格） */
.table-card { border-collapse: separate; border-spacing:0 8px; width:100%; }
.table-card thead th { background:var(--bg-tertiary); border-radius:10px; padding:12px 14px; text-align:left; }
.table-card tbody tr { background:var(--bg-tertiary); box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); }
.table-card tbody td { padding:12px 14px; }

/* 浏览记录行样式复用 */
#historyTable { border-collapse: separate; border-spacing:0 8px; }
#historyTable thead th { background:var(--bg-tertiary); border-radius:10px; }
#historyTable tbody tr { background:var(--bg-tertiary); box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); }

/* 积分表 */
#pointsTable { border-collapse: separate; border-spacing:0 8px; }
#pointsTable thead th { background:var(--bg-tertiary); border-radius:10px; }
#pointsTable tbody tr { background:var(--bg-tertiary); box-shadow:0 8px 24px rgba(0, 0, 0, 0.3); }

/* 微交互 */
.list-row .btn { transition: transform .15s ease; }
.list-row .btn:hover { transform: translateY(-1px); }