/* ============================================================
   CPMLS 商家分潤監控台 — 前台「我的帳號」儀表板樣式
   全部 scope 在 .cpmls-mc-frontend 之下，避免影響佈景主題。
   ============================================================ */
.cpmls-mc-frontend {
	--fe-primary: #6366f1;
	--fe-primary-d: #4f46e5;
	--fe-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	--fe-card: #ffffff;
	--fe-border: #e6e8f0;
	--fe-text: #1f2430;
	--fe-muted: #6b7280;
	--fe-radius: 16px;
	--fe-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .07);
	color: var(--fe-text);
	font-size: 15px;
}
.cpmls-mc-frontend * { box-sizing: border-box; }

/* Brand switcher */
.cpmls-mc-fe-brandbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cpmls-mc-fe-brandbar-label { font-size: 13px; font-weight: 700; color: var(--fe-muted); }

/* Chips */
.cpmls-mc-fe-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cpmls-mc-fe-chip {
	padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none;
	color: var(--fe-muted); background: #fff; border: 1px solid var(--fe-border); transition: all .15s ease;
}
.cpmls-mc-fe-chip:hover { color: var(--fe-primary-d); border-color: #c7cbff; }
.cpmls-mc-fe-chip.is-active { background: var(--fe-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(99, 102, 241, .32); }
.cpmls-mc-fe-rangechips { margin-bottom: 22px; }

/* Header */
.cpmls-mc-fe-header { margin-bottom: 16px; }
.cpmls-mc-fe-title { font-size: 24px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.4px; }
.cpmls-mc-fe-sub { color: var(--fe-muted); font-size: 13.5px; margin: 0; }

/* Stat cards */
.cpmls-mc-fe-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.cpmls-mc-fe-card {
	background: var(--fe-card); border: 1px solid var(--fe-border); border-radius: var(--fe-radius);
	padding: 20px; box-shadow: var(--fe-shadow); display: flex; flex-direction: column; gap: 8px;
}
.cpmls-mc-fe-card .lbl { font-size: 13px; color: var(--fe-muted); font-weight: 600; }
.cpmls-mc-fe-card .val { font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.cpmls-mc-fe-card.accent { background: var(--fe-grad); border: none; color: #fff; box-shadow: 0 10px 28px rgba(99, 102, 241, .38); }
.cpmls-mc-fe-card.accent .lbl { color: rgba(255, 255, 255, .85); }

/* Panel */
.cpmls-mc-fe-panel {
	background: var(--fe-card); border: 1px solid var(--fe-border); border-radius: var(--fe-radius);
	box-shadow: var(--fe-shadow); padding: 20px 22px; margin-bottom: 22px;
}
.cpmls-mc-fe-panel-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.cpmls-mc-fe-chart-wrap { position: relative; height: 300px; }
.cpmls-mc-fe-empty { color: var(--fe-muted); text-align: center; padding: 30px 0; margin: 0; }

/* Product grid */
.cpmls-mc-fe-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cpmls-mc-fe-product {
	display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--fe-border);
	border-radius: 12px; transition: border .15s, box-shadow .15s;
}
.cpmls-mc-fe-product:hover { border-color: #c7cbff; box-shadow: var(--fe-shadow); }
.cpmls-mc-fe-product .thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.cpmls-mc-fe-product .info { flex: 1; min-width: 0; }
.cpmls-mc-fe-product .name {
	display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpmls-mc-fe-product .metrics { display: flex; gap: 16px; font-size: 13px; color: var(--fe-muted); }
.cpmls-mc-fe-product .metrics strong { color: var(--fe-text); font-weight: 700; }

@media (max-width: 900px) {
	.cpmls-mc-fe-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.cpmls-mc-fe-cards { grid-template-columns: 1fr 1fr; }
	.cpmls-mc-fe-products { grid-template-columns: 1fr; }
	.cpmls-mc-fe-card .val { font-size: 23px; }
}