/* ===== 通用公共类 ===== */

/* 链接全局去下划线 */
a, a:hover, a:active, a:visited, a:focus { text-decoration: none !important; color: inherit; }

/* 布局 */
.container { padding: 0 var(--space-lg); }
.page-wrap { padding-bottom: calc(var(--tabbar-height) + var(--space-lg)); min-height: 100vh; background: var(--bg); }

/* Flex */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: var(--radius); font-size: var(--font-md); font-weight: 500; transition: all .2s; }
.btn-primary { background: var(--publish-primary); color: var(--white); }
.btn-primary:active { background: var(--publish-primary-dark); }
.btn-success { background: var(--task-primary); color: var(--white); }
.btn-success:active { background: var(--task-primary-dark); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 14px 32px; font-size: var(--font-lg); border-radius: var(--radius-lg); }
.btn-sm { padding: 6px 12px; font-size: var(--font-sm); }
.btn-disabled, .btn[disabled] { opacity: 0.5; pointer-events: none; }

/* 卡片 */
.card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow); }
.card-title { font-size: var(--font-lg); font-weight: 600; margin-bottom: var(--space-md); }

/* 输入框 */
.input-group { margin-bottom: var(--space-lg); }
.input-group label { display: block; margin-bottom: var(--space-sm); font-size: var(--font-md); color: var(--text); font-weight: 500; }
.input-control { width: 100%; padding: 12px var(--space-md); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--font-md); background: var(--white); transition: border-color .2s; }
.input-control:focus { border-color: var(--publish-primary); }
.input-control::placeholder { color: var(--text-light); }
textarea.input-control { min-height: 100px; resize: vertical; }

/* 标签 */
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-xs); }
.tag-primary { background: #FFF0E8; color: var(--publish-primary); }
.tag-success { background: #E8FFF2; color: var(--task-primary); }
.tag-danger { background: #FFE8E8; color: var(--danger); }
.tag-warning { background: #FFF8E8; color: var(--warning); }
.tag-info { background: #E8F4FF; color: var(--info); }

/* 图片 */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 60px; height: 60px; }

/* 间距 */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* 文本 */
.text-primary { color: var(--publish-primary); }
.text-success { color: var(--task-primary); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: var(--font-sm); }
.text-lg { font-size: var(--font-lg); }
.text-bold { font-weight: 600; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 分割线 */
.divider { height: 1px; background: var(--border); margin: var(--space-lg) 0; }
.divider-dashed { border-top: 1px dashed var(--border); }

/* 空状态 */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-secondary); }
.empty-state .fa { font-size: 48px; margin-bottom: var(--space-lg); }
.empty-state p { font-size: var(--font-md); }

/* 加载 */
.loading-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--publish-primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 12px 24px; border-radius: var(--radius-lg); font-size: var(--font-md); z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s; }
.toast.show { opacity: 1; }

/* 价格 */
.price { color: var(--danger); font-weight: 600; }
.price-lg { font-size: var(--font-xxl); }
.price-num { font-size: var(--font-xl); }

/* Badge (角标) */
.badge { position: relative; }
.badge::after { content: attr(data-count); position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; line-height: 18px; background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px; text-align: center; padding: 0 5px; }
.badge[data-count="0"]::after { display: none; }

/* 颜色点 */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot-green { background: var(--success); }
.dot-orange { background: var(--warning); }
.dot-red { background: var(--danger); }
.dot-blue { background: var(--info); }