/* =========================================================
   1. 基础重置与排版 (已收紧行高)
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", -apple-system, sans-serif; font-size: 14px; background-color: #f4f5f7; color: #333; line-height: 1.5; }
a { text-decoration: none; color: #2969a6; transition: color 0.2s; }
a:hover { color: #fc6703; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

/* =========================================================
   2. 文字颜色、宽度与徽章工具类
========================================================= */
.ec-text-primary { color: #2969a6 !important; }
.ec-text-danger { color: #d9534f !important; }
.ec-text-orange { color: #fc6703 !important; text-decoration: underline !important; }
.ec-text-orange-bold { color: #fc6703 !important; font-weight: bold !important; }
.ec-text-muted { color: #999 !important; }
.ec-font-bold { font-weight: bold; }
.ec-font-mono { font-family: monospace, monospace; }
.ec-text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.w-5 { width: 5% !important; } .w-10 { width: 10% !important; } .w-12 { width: 12% !important; }
.w-15 { width: 15% !important; } .w-20 { width: 20% !important; } .w-22 { width: 22% !important; }
.w-25 { width: 25% !important; } .w-30 { width: 30% !important; } .w-35 { width: 35% !important; }
.w-40 { width: 40% !important; } .w-45 { width: 45% !important; } .w-50 { width: 50% !important; }
.w-55 { width: 55% !important; } .w-60 { width: 60% !important; }

.ec-badge-blue { background: #e8f4fd; color: #2969a6; padding: 2px 6px; border-radius: 4px; font-size: 12px; display: inline-block; }
.ec-badge-gray { background: #f0f4f7; color: #555; padding: 2px 6px; border-radius: 4px; font-size: 12px; display: inline-block; border: 1px solid #eaeaea; }
.ec-badge-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; padding: 2px 6px; border-radius: 4px; font-size: 12px; display: inline-block; margin: 1px 0; }
.ec-badge-warning { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; padding: 2px 6px; border-radius: 4px; font-size: 12px; display: inline-block; margin: 1px 0; }
.ec-badge-danger  { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; padding: 2px 6px; border-radius: 4px; font-size: 12px; display: inline-block; margin: 1px 0; }
.ec-badge-default { background: #f5f5f5; color: #666; border: 1px solid #e0e0e0; padding: 2px 6px; border-radius: 4px; font-size: 12px; display: inline-block; margin: 1px 0; }

/* =========================================================
   3. 核心布局框架 (Header / Sidebar / Content / Footer)
========================================================= */
.ec-container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
.ec-header { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 12px 15px; margin-top: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.ec-logo img { max-height: 50px; }
.ec-user-info { text-align: right; color: #666; }
.ec-user-links { margin-top: 3px; font-size: 13px; }
.ec-divider { height: 3px; background: #2969a6; margin: 10px 0; border-radius: 2px; }
.ec-breadcrumb { background: #fff; padding: 8px 15px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); margin-bottom: 10px; font-size: 13px; color: #666; }
.ec-main { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 15px; }
.ec-sidebar { width: 200px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; flex-shrink: 0; }
.ec-content { flex-grow: 1; background: #fff; min-height: 400px; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.ec-footer-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 15px; text-align: center; font-size: 13px; color: #888; margin-bottom: 20px; line-height: 1.8; }
.ec-footer-links { margin-bottom: 8px; }
.ec-footer-links a { color: #333; margin: 0 8px; text-decoration: none; transition: color 0.2s; }
.ec-footer-links a:hover { color: #2969a6; }
.ec-footer-links span { color: #ccc; }
.ec-footer-info a { color: #888; text-decoration: none; transition: color 0.2s; }
.ec-footer-info a:hover { color: #2969a6; }

/* =========================================================
   4. 卡片与容器组件
========================================================= */
.ec-container-sm { max-width: 600px; margin: 0 auto; padding-top: 10px; }
.ec-card { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); padding: 20px; margin-bottom: 15px; }
.ec-card-pd { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.ec-card-box { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); margin-bottom: 15px; overflow: hidden; }
.ec-card-title { font-size: 16px; color: #333; font-weight: bold; border-left: 4px solid #2969a6; padding-left: 10px; margin-bottom: 15px; }
.ec-card-header { background: #fbfbfb; padding: 10px 15px; border-bottom: 1px solid #eaeaea; font-size: 15px; font-weight: bold; color: #333; }
.ec-card-body { padding: 15px; }
.ec-title-center { text-align: center; margin-bottom: 15px; font-size: 16px; color: #333; font-weight: bold; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
.ec-alert-warning { background: #fff8e1; border: 1px solid #ffe082; color: #856404; padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-size: 13px; line-height: 1.5; }
.ec-alert-info { background: #e8f4fd; border: 1px solid #b6d4fe; color: #084298; padding: 12px 15px; border-radius: 8px; margin-bottom: 15px; text-align: center; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }

/* =========================================================
   5. 表单与按钮通用组件
========================================================= */
.ec-form-row { display: flex; align-items: center; margin-bottom: 12px; }
.ec-form-row-top { display: flex; align-items: flex-start; margin-bottom: 12px; }
.ec-label { width: 100px; text-align: right; margin-right: 15px; color: #555; font-weight: bold; flex-shrink: 0; }
.ec-input { flex: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s; box-sizing: border-box; width: 100%; }
.ec-input:focus { border-color: #2969a6; }
.ec-help-text { margin-left: 10px; color: #999; font-size: 12px; white-space: nowrap; }
.ec-link-text { margin-left: 10px; color: #fc6703; font-size: 13px; white-space: nowrap; text-decoration: none; }

.ec-radio-group { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: #555; }
.ec-radio-label { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.ec-radio-label input[type="radio"], .ec-radio-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2969a6; cursor: pointer; }

.ec-btn { display: inline-block; border: none; padding: 8px 25px; border-radius: 4px; font-size: 14px; cursor: pointer; font-weight: bold; transition: all 0.2s; text-align: center; }
.ec-btn-primary { background: #2969a6; color: #fff; }
.ec-btn-primary:hover { background: #1e5285; }
.ec-btn-default { background: #f5f5f5; color: #333; border: 1px solid #ccc; }
.ec-btn-default:hover { background: #e5e5e5; }
.ec-btn-orange { background: #fc6703; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; font-size: 14px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
.ec-btn-orange:hover { background: #e65c00; }
.ec-btn-group { display: flex; gap: 10px; flex: 1; }

/* 强力覆盖帝国CMS动态生成的丑陋表格 */
.modern-form-wrap table { width: 100% !important; border-collapse: collapse !important; background: transparent !important; }
.modern-form-wrap td { border: none !important; padding: 8px 0 !important; vertical-align: middle !important; background: transparent !important; }
.modern-form-wrap td:first-child { width: 110px !important; color: #555; font-weight: bold; text-align: right; padding-right: 15px !important; }
.modern-form-wrap input[type="text"], .modern-form-wrap input[type="password"], .modern-form-wrap select { width: 100% !important; max-width: 400px !important; padding: 8px 10px !important; border: 1px solid #ccc !important; border-radius: 4px !important; font-size: 14px !important; outline: none !important; box-sizing: border-box; }
.modern-form-wrap input[type="text"]:focus, .modern-form-wrap select:focus { border-color: #2969a6 !important; }
.modern-form-wrap textarea { width: 100% !important; padding: 8px !important; border: 1px solid #ccc !important; border-radius: 4px !important; min-height: 100px; font-size: 14px !important; outline: none !important; }
.modern-form-wrap textarea:focus { border-color: #2969a6 !important; }
.modern-form-wrap input[type="file"] { padding: 5px 0; font-size: 13px; }

/* =========================================================
   6. 列表、表格与信息展示
========================================================= */
.ec-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.ec-list-header { display: flex; background: #f8f9fa; padding: 10px 15px; font-weight: bold; color: #555; border-bottom: 1px solid #eaeaea; font-size: 13px; }
.ec-list-row { display: flex; padding: 10px 15px; border-bottom: 1px solid #f0f0f0; align-items: center; font-size: 13px; transition: background 0.2s; }
.ec-list-row:hover { background: #f9fbfc; }
.ec-list-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: #fbfbfb; flex-wrap: wrap; gap: 10px; }

.ec-info-list { border-radius: 8px; overflow: hidden; border: 1px solid #f0f4f7; }
.ec-info-item { display: flex; border-bottom: 1px solid #eee; padding: 10px 15px; font-size: 13px; }
.ec-info-item:last-child { border-bottom: none; }
.ec-info-label { width: 100px; color: #888; flex-shrink: 0; }
.ec-info-value { flex: 1; color: #333; word-break: break-all; }

.ec-table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ec-search-group { display: flex; align-items: center; margin: 0; }
.ec-search-input { padding: 6px 10px; border: 1px solid #ccc; border-right: none; border-radius: 4px 0 0 4px; outline: none; font-size: 13px; width: 160px; }
.ec-search-btn { background: #2969a6; color: #fff; border: 1px solid #2969a6; padding: 6px 15px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 13px; }

.ec-tab-group { display: flex; gap: 8px; }
.ec-tab { padding: 6px 15px; border-radius: 4px; font-size: 13px; text-decoration: none; background: #f5f5f5; color: #555; transition: all 0.2s; }
.ec-tab:hover { background: #e5e5e5; }
.ec-tab.ec-tab-active { background: #2969a6; color: #fff; font-weight: bold; }
.ec-tab.ec-tab-active:hover { background: #1e5285; }

/* =========================================================
   7. 专属业务组件：会员中心 Dashboard、模板、空状态
========================================================= */
.ec-dashboard-top { display: flex; gap: 20px; padding: 20px; border-bottom: 1px dashed #eee; }
.ec-dash-avatar { width: 150px; flex-shrink: 0; text-align: center; }
.ec-dash-avatar img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #f8f9fa; box-shadow: 0 4px 10px rgba(0,0,0,0.08); margin-bottom: 10px; }
.ec-dash-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; align-content: center; }
.ec-dash-item { background: #f9fbfc; padding: 10px 15px; border-radius: 6px; border: 1px solid #f0f4f7; }
.ec-dash-label { color: #888; font-size: 12px; margin-bottom: 3px; }
.ec-dash-value { color: #333; font-weight: bold; font-size: 14px; }
.ec-dash-quick { padding: 15px 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; text-align: center; }
.ec-quick-item { display: block; padding: 10px 5px; border-radius: 6px; background: #f8f9fa; color: #555; text-decoration: none; transition: all 0.2s; border: 1px solid transparent; }
.ec-quick-item:hover { background: #fff; border-color: #2969a6; color: #2969a6; box-shadow: 0 4px 12px rgba(41,105,166,0.1); }
.ec-quick-item img { display: block; margin: 0 auto 5px; width: 20px; height: 20px; }
.ec-quick-item span { font-size: 12px; }

.ec-template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.ec-template-card { position: relative; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.02); transition: all 0.2s; display: flex; flex-direction: column; }
.ec-template-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.ec-template-card.is-active { border: 2px solid #2969a6; }
.ec-template-badge { position: absolute; top: -1px; right: -1px; background: #2969a6; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 0 8px 0 8px; }
.ec-template-img-box { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; background: #f9f9f9; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.ec-template-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ec-template-name { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-template-action { margin-top: auto; }

.ec-empty-wrapper { display: flex; justify-content: center; align-items: center; min-height: 300px; padding: 15px; }
.ec-empty-card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 30px 20px; text-align: center; max-width: 500px; width: 100%; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.ec-empty-icon-box { width: 60px; height: 60px; margin: 0 auto 15px; background: linear-gradient(135deg, #e8f4fd 0%, #d0e8ff 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(41,105,166,0.15); }
.ec-empty-title { margin: 0 0 10px 0; font-size: 18px; color: #333; font-weight: bold; }
.ec-empty-desc { margin: 0; color: #888; font-size: 13px; line-height: 1.5; }

/* =========================================================
   8. 专属业务组件：消息、留言、弹窗
========================================================= */
.ec-msg-card { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); overflow: hidden; }
.ec-msg-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: #fbfbfb; border-bottom: 1px solid #f0f0f0; }
.ec-msg-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #666; }
.ec-msg-text { padding: 15px; font-size: 13px; color: #333; line-height: 1.6; word-break: break-all; }
.ec-msg-reply { padding: 10px 15px; background: #f0f7ff; border-top: 1px dashed #eaeaea; font-size: 13px; color: #555; line-height: 1.6; }
.ec-msg-quote { background: #f9f9f9; padding: 10px 15px; border-radius: 4px; border: 1px solid #eee; color: #555; margin-bottom: 15px; font-size: 13px; word-break: break-all; }
.ec-unread-row { background: #f0f7ff !important; }
.ec-read-row { background: #fff !important; }

.ec-modal-wrapper { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: #f4f5f7; font-family: "Microsoft YaHei", sans-serif; padding: 15px; margin: 0; box-sizing: border-box; }
.ec-modal-card { width: 100%; max-width: 600px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
.ec-modal-header { background: #2969a6; color: #fff; padding: 12px 15px; font-size: 15px; font-weight: bold; }
.ec-modal-body { padding: 15px; }
.ec-modal-row { display: flex; border-bottom: 1px dashed #eee; padding: 10px 0; font-size: 13px; line-height: 1.5; }
.ec-modal-row:last-child { border-bottom: none; }
.ec-modal-label { width: 80px; flex-shrink: 0; color: #888; font-weight: bold; }
.ec-modal-value { flex: 1; color: #333; word-break: break-all; }
.ec-modal-footer { padding: 10px; background: #fbfbfb; text-align: center; border-top: 1px solid #eee; }
.ec-popup-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f4f5f7; font-family: "Microsoft YaHei", sans-serif; }
.ec-popup-card { width: 100%; max-width: 400px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* =========================================================
   9. 专属业务组件：充值、投票、购物车与订单
========================================================= */
.ec-bind-container { display: flex; gap: 15px; margin-bottom: 15px; }
.ec-bind-card { flex: 1; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 20px 15px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s; }
.ec-bind-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.ec-bind-card h4 { margin: 0 0 10px 0; font-size: 15px; color: #333; }
.ec-bind-card p { color: #888; font-size: 13px; margin-bottom: 15px; line-height: 1.5; }

.ec-package-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ec-package-item { display: flex; align-items: flex-start; padding: 15px; background: #f9fbfc; border: 1px solid #eaeaea; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.ec-package-item:hover { border-color: #2969a6; background: #fff; box-shadow: 0 4px 12px rgba(41,105,166,0.08); }
.ec-package-item input[type="radio"] { width: 18px; height: 18px; margin-right: 10px; margin-top: 2px; cursor: pointer; accent-color: #2969a6; flex-shrink: 0; }
.ec-package-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.ec-package-title { font-size: 15px; font-weight: bold; color: #333; }
.ec-package-price { font-size: 18px; font-weight: bold; color: #d9534f; }
.ec-package-desc { font-size: 13px; color: #888; line-height: 1.5; }
.ec-pay-footer { background: #fbfbfb; padding: 15px; border-radius: 6px; border: 1px solid #eee; }
.ec-pay-columns { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 900px; }

.ec-type-box { background: #f9fbfc; border: 1px solid #f0f4f7; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.ec-type-label { display: flex; align-items: center; padding: 10px 15px; background: #fff; border: 1px solid #eaeaea; border-radius: 6px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; }
.ec-type-label:hover { border-color: #2969a6; box-shadow: 0 2px 8px rgba(41,105,166,0.1); }
.ec-type-label input[type="radio"] { width: 18px; height: 18px; margin-right: 10px; cursor: pointer; accent-color: #2969a6; }
.ec-type-text { font-size: 14px; color: #333; font-weight: bold; }

.ec-info-box { display: flex; align-items: center; background: #f9f9f9; padding: 10px 15px; border-radius: 4px; margin-bottom: 15px; }
.ec-info-box-label { width: 100px; color: #555; flex-shrink: 0; font-weight: bold; }
.ec-tips-box { font-size: 12px; color: #999; margin-bottom: 20px; background: #f9f9f9; padding: 8px 10px; border-radius: 4px; }
.ec-upload-input { display: block; width: 100%; padding: 8px; border: 1px dashed #ccc; border-radius: 4px; background: #fafafa; margin-bottom: 10px; cursor: pointer; box-sizing: border-box; }

/* 投票弹窗 */
.vote-body-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f4f5f7; font-family: "Microsoft YaHei", -apple-system, sans-serif; padding: 15px; box-sizing: border-box; margin: 0; }
.vote-card { width: 100%; max-width: 500px; background: #fff; border-radius: 10px; box-shadow: 0 4px 25px rgba(0,0,0,0.08); overflow: hidden; }
.vote-header { background: #2969a6; color: #fff; padding: 15px; text-align: center; }
.vote-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; line-height: 1.4; }
.vote-class { font-size: 12px; opacity: 0.8; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; display: inline-block; }
.vote-body { padding: 15px; }
.vote-option { display: flex; align-items: center; padding: 10px 15px; background: #f9fbfc; border: 1px solid #eaeaea; border-radius: 6px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; }
.vote-option:hover { border-color: #2969a6; background: #fff; box-shadow: 0 2px 8px rgba(41,105,166,0.1); }
.vote-option input[type="radio"] { width: 16px; height: 16px; margin-right: 10px; cursor: pointer; accent-color: #2969a6; }
.vote-option-text { font-size: 14px; color: #333; font-weight: bold; }
.vote-footer { background: #fbfbfb; border-top: 1px solid #eee; padding: 15px; }
.vote-meta { font-size: 12px; color: #888; margin-bottom: 10px; text-align: center; }
.vote-meta b { color: #fc6703; font-size: 14px; margin: 0 2px; }
.vote-btn-group { display: flex; gap: 10px; }
.vote-btn-submit { flex: 2; background: #2969a6; color: #fff; border: none; padding: 10px 0; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background 0.2s; font-weight: bold; }
.vote-btn-submit:hover { background: #1e5285; }
.vote-btn-close { flex: 1; background: #f5f5f5; color: #333; border: 1px solid #ccc; padding: 10px 0; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; font-weight: bold; }
.vote-btn-close:hover { background: #e5e5e5; }
.vote-result-item { margin-bottom: 15px; }
.vote-result-item:last-child { margin-bottom: 0; }
.vote-result-info { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; font-size: 13px; }
.vote-result-name { color: #333; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.vote-result-name::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #2969a6; border-radius: 50%; }
.vote-result-stats { color: #888; font-size: 12px; }
.vote-result-stats b { color: #fc6703; font-size: 13px; margin-right: 3px; }
.vote-progress-bg { width: 100%; height: 8px; background: #e8f4fd; border-radius: 4px; overflow: hidden; }
.vote-progress-fill { height: 100%; background: linear-gradient(90deg, #2969a6 0%, #4facfe 100%); border-radius: 4px; transition: width 0.8s ease-in-out; }

/* 购物车与订单 */
.cart-body-wrap { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: #f4f5f7; font-family: "Microsoft YaHei", sans-serif; padding: 15px; margin: 0; box-sizing: border-box; }
.cart-card { width: 100%; max-width: 1000px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; padding: 15px; }
.cart-title { font-size: 16px; font-weight: bold; color: #333; border-bottom: 2px solid #2969a6; padding-bottom: 10px; margin-bottom: 15px; }
.cart-table { width: 100%; margin-bottom: 15px; }
.cart-row { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
.cart-header { background: #f8f9fa; font-weight: bold; color: #555; border-radius: 6px 6px 0 0; }
.cart-col-img { width: 10%; text-align: center; }
.cart-col-title { width: 40%; padding-left: 10px; }
.cart-col-price { width: 15%; text-align: center; }
.cart-col-num { width: 15%; text-align: center; }
.cart-col-total { width: 15%; text-align: right; }
.cart-col-del { width: 5%; text-align: center; }
.cart-img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; }
.cart-total-bar { display: flex; justify-content: flex-end; align-items: center; padding: 10px 15px; background: #fff8e1; border-radius: 6px; font-size: 15px; margin-bottom: 15px; }
.cart-total-bar strong { color: #d9534f; font-size: 20px; margin-left: 10px; }

.pay-method-list { display: flex; flex-direction: column; gap: 8px; }
.pay-method-item { display: flex; align-items: flex-start; padding: 10px 15px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; cursor: pointer; }
.pay-method-item:hover { border-color: #2969a6; background: #fff; }
.pay-method-item input[type="radio"] { margin-top: 3px; margin-right: 10px; width: 16px; height: 16px; accent-color: #2969a6; }
.pay-method-content { flex: 1; }
.pay-method-name { font-weight: bold; color: #333; margin-bottom: 3px; display: flex; justify-content: space-between; }
.pay-method-desc { font-size: 12px; color: #888; }

.order-info-block { background: #f9fbfc; border: 1px solid #f0f4f7; border-radius: 8px; padding: 15px; margin-bottom: 15px; }
.order-info-title { font-size: 15px; font-weight: bold; color: #333; border-left: 4px solid #2969a6; padding-left: 10px; margin-bottom: 10px; }
.order-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; }
.order-info-item { display: flex; }
.order-info-label { width: 90px; color: #888; }
.order-info-value { flex: 1; color: #333; font-weight: bold; }

/* 强制表格转 Div 的纯CSS魔法 (兼容旧购物车) */
.cart-card table, .cart-card tbody { display: block !important; width: 100% !important; border: none !important; background: transparent !important; }
.cart-card tr { display: flex !important; width: 100% !important; border-bottom: 1px solid #eee !important; padding: 10px 0 !important; align-items: center; }
.cart-card th { display: none !important; }
.cart-card td { display: flex !important; flex: 1 !important; border: none !important; padding: 5px 10px !important; justify-content: center; align-items: center; text-align: center; }
.cart-card td:first-child { flex: 2 !important; justify-content: flex-start; text-align: left; }
.cart-card td:first-child img { max-width: 50px; height: auto; border-radius: 4px; margin-right: 10px; }
.cart-card input[type="text"] { width: 50px !important; text-align: center; padding: 5px !important; border: 1px solid #ccc !important; border-radius: 4px !important; }
.cart-card input[type="submit"], .cart-card input[type="button"], .cart-card .ec-btn { background: #2969a6; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }

/* =========================================================
   10. 极致的移动端自适应 (统一合并到一个 @media)
========================================================= */
@media screen and (max-width: 992px) {
    .ec-template-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 768px) {
    /* 基础布局 */
    .ec-container { width: 100% !important; padding: 0 10px !important; }
    .ec-header { flex-direction: column !important; text-align: center; gap: 10px; margin-top: 10px; }
    .ec-user-info { text-align: center; width: 100%; }
    .ec-main { flex-direction: column !important; gap: 12px !important; }
    .ec-sidebar { width: 100% !important; }
    .ec-content { width: 100% !important; padding: 12px !important; min-height: auto; }
    .ec-divider { margin: 10px 0; }

    /* 卡片与内边距 */
    .ec-card, .ec-card-pd { padding: 12px; }
    .ec-card-header { padding: 10px 12px; font-size: 14px; }
    .ec-alert-warning, .ec-alert-info { padding: 10px 12px; font-size: 13px; }

    /* 表单与按钮 */
    .ec-form-row, .ec-form-row-top { flex-direction: column; align-items: flex-start; }
    .ec-label { width: 100%; text-align: left; margin-bottom: 6px; margin-right: 0; }
    .ec-input { width: 100% !important; max-width: 100% !important; }
    .ec-btn { width: 100%; margin-bottom: 8px; }
    .ec-btn-group { width: 100%; flex-direction: column; gap: 8px; margin-left: 0 !important; }
    .ec-help-text, .ec-link-text { margin-left: 0; margin-top: 5px; display: inline-block; }
    .ec-submit-group { padding-left: 0 !important; flex-direction: column; gap: 8px !important; }
    .ec-submit-group input { width: 100%; }
    .modern-form-wrap { overflow-x: auto; }
    .modern-form-wrap table { min-width: 450px; }

    /* 列表与表格 */
    .ec-list-header { display: none; }
    .ec-list-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .ec-list-row > div { width: 100% !important; text-align: left !important; }
    .ec-list-footer { flex-direction: column; }
    .ec-search-group { width: 100%; }
    .ec-search-input { flex: 1; width: auto; }
    .ec-info-row, .ec-info-item, .ec-modal-row { flex-direction: column; margin-bottom: 10px; gap: 4px; }
    .ec-info-label, .ec-modal-label { width: 100%; margin-bottom: 4px; font-weight: bold; }
    .ec-info-value { width: 100%; }
    .ec-top-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ec-top-bar form { width: 100%; }
    .ec-tab-group { width: 100%; }
    .ec-tab { flex: 1; text-align: center; }
    .ec-table-responsive table, .ec-table-responsive .ec-list-header, .ec-table-responsive .ec-list-row { min-width: 700px; }

    /* 首页 Dashboard */
    .ec-dashboard-top { flex-direction: column; padding: 15px; gap: 15px; }
    .ec-dash-avatar { width: 100%; border-right: none; border-bottom: 1px dashed #eee; padding-bottom: 15px; }
    .ec-dash-grid { grid-template-columns: 1fr; gap: 8px; }
    .ec-dash-quick { grid-template-columns: repeat(3, 1fr); padding: 12px; }
    
    /* 模板、空状态、绑定 */
    .ec-template-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ec-template-img-box { height: 120px; }
    .ec-empty-wrapper { min-height: 250px; padding: 10px; }
    .ec-empty-card { padding: 20px 15px; }
    .ec-empty-icon-box { width: 50px; height: 50px; margin-bottom: 10px; }
    .ec-empty-icon-box svg { width: 25px; height: 25px; }
    .ec-empty-title { font-size: 16px; }
    .ec-bind-container { flex-direction: column; }

    /* 弹窗与消息 */
    .ec-modal-wrapper { padding: 10px; align-items: center; }
    .ec-modal-card { border-radius: 0; box-shadow: none; }
    .ec-msg-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ec-msg-meta { flex-wrap: wrap; gap: 8px; }

    /* 充值支付与投票 */
    .ec-pay-columns { flex-direction: column; align-items: stretch; }
    .ec-pay-columns > div { max-width: 100% !important; min-width: 100% !important; flex: 1 1 auto !important; }
    .ec-info-box { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ec-info-box-label { width: 100%; text-align: left; }
    .vote-body-wrap { padding: 10px; align-items: flex-start; }
    .vote-card { border-radius: 0; box-shadow: none; }
    .vote-title { font-size: 15px; }
    .vote-body { padding: 12px; }
    .vote-option { padding: 10px; }
    .vote-footer { padding: 12px; }
    .vote-btn-group { flex-direction: column; }
    .vote-btn-close { flex: 1; padding: 10px 0; }

    /* 购物车与订单 */
    .cart-body-wrap { padding: 10px; }
    .cart-card { padding: 12px; border-radius: 0; }
    .cart-row { flex-wrap: wrap; gap: 8px; text-align: center; }
    .cart-col-img { width: 20%; }
    .cart-col-title { width: 75%; padding-left: 0; text-align: left; }
    .cart-col-price, .cart-col-num, .cart-col-total { width: 30%; text-align: left; }
    .cart-col-del { width: 10%; }
    .cart-header { display: none; }
    .order-info-grid { grid-template-columns: 1fr; }
    
    /* 强制表格转 Div (手机端上下堆叠) */
    .cart-card tr { flex-direction: column; align-items: flex-start; padding: 12px 10px !important; gap: 8px; }
    .cart-card td { justify-content: flex-start !important; text-align: left !important; padding: 0 !important; width: 100% !important; }
}

/* =========================================================
   11. 打印样式
========================================================= */
@media print {
    .ec-print-hide { display: none !important; }
    .cart-body-wrap { padding: 0 !important; background: #fff !important; }
    .cart-card { box-shadow: none !important; border: none !important; }
}

/* =========================================
   针对移动端特殊页面的终极修复
========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. 修复会员空间右侧文字竖排问题 */
    .ec-container [style*="display: flex;"], 
    .ec-container [style*="display:flex;"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .ec-content, .ec-content * {
        word-break: break-all !important;
        white-space: normal !important;
    }
    .ec-container > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. 修复修改资料页系统表格的惨状 (彻底干掉 table 布局) */
    .modern-form-wrap table { display: block !important; border: none !important; }
    .modern-form-wrap tbody { display: block !important; }
    .modern-form-wrap tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 0 !important;
        border-bottom: 1px dashed #eee !important;
    }
    .modern-form-wrap td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 4px 0 !important;
    }
    .modern-form-wrap input[type="text"], 
    .modern-form-wrap input[type="password"], 
    .modern-form-wrap select,
    .modern-form-wrap textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. 修复空间顶部导航在手机上可能拥挤的问题 */
    .ec-container [style*="white-space: nowrap;"] {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* =========================================
   终极修复：手机端系统动态表格彻底破拆
========================================= */
@media screen and (max-width: 768px) {
    .modern-form-wrap { overflow-x: hidden !important; }
    .modern-form-wrap table, 
    .modern-form-wrap tbody, 
    .modern-form-wrap tr { 
        display: block !important; 
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .modern-form-wrap td { 
        display: block !important; 
        width: 100% !important; 
        max-width: 100% !important;
        padding: 5px 0 !important; 
        text-align: left !important;
        box-sizing: border-box !important;
    }
    
    .modern-form-wrap input[type="text"], 
    .modern-form-wrap input[type="password"], 
    .modern-form-wrap input[type="email"],
    .modern-form-wrap input[type="file"],
    .modern-form-wrap select,
    .modern-form-wrap textarea {
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-top: 3px !important;
    }

    .ec-content, .ec-card, .ec-card-pd { 
        width: 100% !important; 
        max-width: 100% !important; 
        box-sizing: border-box !important; 
        padding: 12px !important; 
    }
    
    .modern-form-wrap td:first-child {
        text-align: left !important;
        padding-right: 0 !important;
    }
}

/* ==================================================================
   全站通用：验证码图片变大 + 输入框对齐 (PC + 手机)
=================================================================================== */

/* 1. PC端及全局设置：图片拉高到 36px，输入框锁死宽度 */
[id*="showkey"] img, 
[id$="showkey"] img {
    height: 36px !important;      /* 图片高度稍微大一点点 */
    width: auto !important;       /* 保持原有比例 */
    max-width: none !important;   /* 防止被全局 max-width 限制 */
    border: 1px solid #ccc !important; /* 加个细边框显得更精致 */
    border-radius: 4px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* 全站所有 name="key" 的验证码输入框 */
input[name="key"] {
    width: 130px !important;
    height: 36px !important;      /* 高度与图片匹配 */
    padding: 6px 10px !important;
    font-size: 16px !important;   /* 字体稍微大一点方便输入 */
    line-height: normal !important;
}

/* ==================================================================
   手机端专属适配：调整验证码尺寸
=================================================================================== */
@media screen and (max-width: 768px) {
    /* 手机端图片高度和电脑端一致，缩小到 36px */
    [id*="showkey"] img, 
    [id$="showkey"] img {
        height: 36px !important;
        box-sizing: border-box !important; /* 保证边框计算在内 */
    }
    
    /* 手机端输入框高度也变成 36px，和图片严格对齐 */
    input[name="key"] {
        width: 120px !important;
        max-width: 120px !important;
        height: 36px !important;
        box-sizing: border-box !important; /* 保证边框计算在内 */
        flex: 0 0 120px !important;
        padding: 0 8px !important; /* 稍微调整内边距，防止文字贴边 */
    }
}
/* =========================================================
   12. 会员投稿中心 (DoInfo) 快捷发布按钮自适应
========================================================= */
.ec-publish-actions {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.ec-publish-btn {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
    padding: 12px 0;
    font-size: 15px;
    border-radius: 6px;
}
/* 手机端专属：按钮满宽，且强制上下堆叠 */
@media screen and (max-width: 768px) {
    .ec-publish-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .ec-publish-btn {
        width: 100%;
        max-width: 100%;
    }
}
/* =========================================================
   13. 修复左侧菜单“退出”按钮没有左对齐的问题
========================================================= */
.ec-sidebar div[onclick*="enews=exit"] {
    justify-content: flex-start !important; /* 强制从左侧开始排列 */
    padding-left: 15px !important;          /* 保持和上面菜单一样的内边距 */
}