/* WueCoop Members — front end. Everything is scoped to .wcm so the theme is untouched. */

.wcm {
	--wcm-primary: var(--wcm-brand-primary, #0B74DE);
	--wcm-dark: var(--wcm-brand-dark, #131739);
	--wcm-ink: #1F2544;
	--wcm-muted: #6B7190;
	--wcm-line: #E4E7F0;
	--wcm-soft: #F5F7FB;
	--wcm-card: #FFFFFF;
	--wcm-ok: #12A150;
	--wcm-warn: #D98E04;
	--wcm-bad: #D93D42;
	--wcm-radius: 16px;
	--wcm-radius-sm: 10px;
	--wcm-shadow: 0 1px 2px rgba(19, 23, 57, .04), 0 8px 24px rgba(19, 23, 57, .06);
	--wcm-brandbar: linear-gradient(90deg, #F6B40E 0 20%, #3BB54A 20% 40%, #0B74DE 40% 60%, #7B4BC9 60% 80%, #E5484D 80% 100%);
	color: var(--wcm-ink);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.wcm *, .wcm *::before, .wcm *::after { box-sizing: border-box; }
.wcm a { color: var(--wcm-primary); text-decoration: none; }
.wcm a:hover { text-decoration: underline; }
.wcm h1, .wcm h2, .wcm h3 { color: var(--wcm-dark); margin: 0; line-height: 1.25; letter-spacing: -.01em; }
.wcm .wcm-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wcm-muted { color: var(--wcm-muted); }

/* ---------- Notices ---------- */
.wcm-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--wcm-radius-sm); margin: 0 0 20px; font-size: 14px; border: 1px solid transparent; }
.wcm-notice svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.wcm-notice--success { background: #ECFAF1; color: #0E6B37; border-color: #C7EED6; }
.wcm-notice--error { background: #FDEFEF; color: #A12227; border-color: #F6CFD0; }
.wcm-notice--info { background: #EDF5FE; color: #0B4F96; border-color: #CFE3FB; }
.wcm-notice a { color: inherit; text-decoration: underline; font-weight: 600; }
.wcm-inline-form { display: inline; margin-left: 4px; }

/* ---------- Buttons ---------- */
.wcm .wcm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s, border-color .15s; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.wcm .wcm-btn:active { transform: translateY(1px); }
.wcm .wcm-btn--primary { background: var(--wcm-primary); color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--wcm-primary) 70%, transparent); }
.wcm .wcm-btn--primary:hover { background: color-mix(in srgb, var(--wcm-primary) 88%, #000); color: #fff; text-decoration: none; }
.wcm .wcm-btn--ghost { background: #fff; color: var(--wcm-dark); border-color: var(--wcm-line); }
.wcm .wcm-btn--ghost:hover { border-color: #C9CEDD; background: var(--wcm-soft); text-decoration: none; }
.wcm .wcm-btn--block { width: 100%; }
.wcm .wcm-btn:focus-visible, .wcm input:focus-visible, .wcm select:focus-visible, .wcm textarea:focus-visible, .wcm .wcm-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--wcm-primary) 35%, transparent); outline-offset: 2px; }
.wcm .wcm-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--wcm-primary); font: inherit; font-weight: 600; cursor: pointer; }
.wcm .wcm-link .wcm-icon { width: 16px; height: 16px; }

/* ---------- Forms ---------- */
.wcm-form { display: grid; gap: 16px; }
.wcm-form--narrow { max-width: 440px; }
.wcm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wcm-field { display: grid; gap: 6px; min-width: 0; }
.wcm-field--wide { grid-column: 1 / -1; }
.wcm-field label { font-size: 13px; font-weight: 600; color: var(--wcm-dark); display: flex; align-items: center; gap: 6px; margin: 0; }
.wcm .wcm-field input, .wcm .wcm-field select, .wcm .wcm-field textarea {
	width: 100%; min-height: 48px; padding: 12px 14px; margin: 0;
	border: 1.5px solid var(--wcm-line); border-radius: 12px; background: #fff;
	font: inherit; font-size: 15px; color: var(--wcm-ink); box-shadow: none;
	transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.wcm .wcm-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7190' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.wcm .wcm-field textarea { min-height: 96px; resize: vertical; }
.wcm .wcm-field input:hover, .wcm .wcm-field select:hover, .wcm .wcm-field textarea:hover { border-color: #C9CEDD; }
.wcm .wcm-field input:focus, .wcm .wcm-field select:focus, .wcm .wcm-field textarea:focus { border-color: var(--wcm-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wcm-primary) 14%, transparent); outline: none; }
.wcm .wcm-field input::placeholder { color: #A3A8BF; }
.wcm .wcm-field.is-invalid input, .wcm .wcm-field.is-invalid select, .wcm .wcm-field.is-invalid textarea { border-color: var(--wcm-bad); }
.wcm .wcm-field.is-locked input, .wcm .wcm-field.is-locked select, .wcm .wcm-field.is-locked textarea, .wcm .wcm-field input[readonly] { background: var(--wcm-soft); color: var(--wcm-muted); cursor: not-allowed; border-style: dashed; }
.wcm-field__error { color: var(--wcm-bad); font-size: 13px; }
.wcm-hint { margin: -8px 0 0; font-size: 13px; color: var(--wcm-muted); }
.wcm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.wcm-password { position: relative; }
.wcm .wcm-password input { padding-right: 48px; }
.wcm .wcm-password__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--wcm-muted); border-radius: 8px; cursor: pointer; padding: 0; min-height: 0; }
.wcm .wcm-password__toggle:hover { background: var(--wcm-soft); color: var(--wcm-dark); }
.wcm .wcm-password__toggle.is-on { color: var(--wcm-primary); }

.wcm-strength { height: 4px; background: var(--wcm-line); border-radius: 4px; overflow: hidden; margin-top: -6px; }
.wcm-strength span { display: block; height: 100%; width: 0; background: var(--wcm-bad); transition: width .25s, background .25s; }
.wcm-strength[data-score="2"] span { width: 50%; background: var(--wcm-warn); }
.wcm-strength[data-score="3"] span { width: 75%; background: #6DBB2C; }
.wcm-strength[data-score="4"] span { width: 100%; background: var(--wcm-ok); }
.wcm-strength[data-score="1"] span { width: 25%; }

.wcm-check { display: flex !important; align-items: flex-start; gap: 10px; font-size: 14px !important; font-weight: 400 !important; color: var(--wcm-ink) !important; cursor: pointer; }
.wcm .wcm-check input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--wcm-primary); appearance: auto; -webkit-appearance: checkbox; flex: none; }
.wcm-field.wcm-check { display: grid !important; }
.wcm-field.wcm-check > label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; }
.wcm-row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }

/* Phone: country code + number */
.wcm-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; }
.wcm .wcm-phone select, .wcm .wcm-phone input { width: 100%; min-height: 48px; padding: 12px 14px; margin: 0; border: 1.5px solid var(--wcm-line); border-radius: 12px; background-color: #fff; font: inherit; font-size: 15px; color: var(--wcm-ink); box-shadow: none; appearance: none; -webkit-appearance: none; }
.wcm .wcm-phone select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7190' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; text-overflow: ellipsis; }
.wcm .wcm-phone select:focus, .wcm .wcm-phone input:focus { border-color: var(--wcm-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wcm-primary) 14%, transparent); outline: none; }
.wcm .wcm-field.is-invalid .wcm-phone input { border-color: var(--wcm-bad); }
.wcm .wcm-field.is-locked .wcm-phone select, .wcm .wcm-field.is-locked .wcm-phone input { background-color: var(--wcm-soft); color: var(--wcm-muted); border-style: dashed; cursor: not-allowed; }
.wcm-field .wcm-hint { margin: 0; }

/* reCAPTCHA */
.wcm-captcha { max-width: 100%; overflow: hidden; }
.wcm-captcha:has(.g-recaptcha) { min-height: 72px; }
.wcm-captcha .g-recaptcha { margin: 0; }
@container (max-width: 380px) { .wcm-captcha .g-recaptcha { transform: scale(.85) !important; transform-origin: 0 0 !important; } }

/* ---------- Auth (login / register / password) ---------- */
.wcm-auth { padding: 32px 0; container-type: inline-size; }
.wcm-auth__card { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; max-width: 1040px; margin: 0 auto; background: var(--wcm-card); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(19, 23, 57, .25); border: 1px solid var(--wcm-line); }
.wcm-auth__aside { position: relative; padding: 48px 40px; color: #fff; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--wcm-primary) 55%, var(--wcm-dark)) 0%, var(--wcm-dark) 60%); display: flex; flex-direction: column; gap: 28px; overflow: hidden; }
.wcm-auth__aside::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .05); }
.wcm-auth__brandbar { width: 72px; height: 6px; border-radius: 6px; background: var(--wcm-brandbar); }
.wcm .wcm-auth__aside h2 { color: #fff; font-size: 28px; font-weight: 700; }
.wcm-auth__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wcm-auth__aside li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .88); }
.wcm-auth__aside li .wcm-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .14); stroke-width: 2.5; margin-top: 1px; }
.wcm-auth__help { margin: auto 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.wcm .wcm-auth__help a { color: #fff; font-weight: 600; }
.wcm-auth__main { padding: 48px 48px 40px; }
.wcm .wcm-auth__title { font-size: 30px; font-weight: 700; }
.wcm-auth__subtitle { color: var(--wcm-muted); margin: 6px 0 28px; }
.wcm-auth__switch { text-align: center; margin: 4px 0 0; color: var(--wcm-muted); font-size: 14px; }
.wcm-auth__switch a { font-weight: 600; }

/* Narrow theme columns: stack the card based on its own width, not the screen's. */
@container (max-width: 760px) {
	.wcm-auth__card { grid-template-columns: 1fr; }
	.wcm-auth__aside { padding: 28px; gap: 16px; }
	.wcm-auth__aside ul, .wcm-auth__help { display: none; }
	.wcm-auth__main { padding: 32px 28px; }
}
@container (max-width: 460px) {
	.wcm-auth__main { padding: 24px 18px; }
	.wcm-auth .wcm-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Account ---------- */
.wcm-account { max-width: 1080px; margin: 0 auto; padding: 24px 0 48px; }
.wcm-hero { position: relative; display: flex; align-items: center; gap: 24px; padding: 32px; border-radius: 24px; color: #fff; overflow: hidden; background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--wcm-primary) 70%, var(--wcm-dark)) 0%, var(--wcm-dark) 65%); box-shadow: 0 20px 40px -20px rgba(19, 23, 57, .45); }
.wcm-hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--wcm-brandbar); }
.wcm-hero::after { content: ""; position: absolute; right: 12%; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .05); }
.wcm-hero__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.wcm-hero__greeting { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; }
.wcm .wcm-hero__name { color: #fff; font-size: 28px; font-weight: 700; margin: 2px 0 12px; overflow-wrap: anywhere; }
.wcm-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.wcm .wcm-hero__logout { position: relative; z-index: 1; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); min-height: 42px; }
.wcm .wcm-hero__logout:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.wcm-avatar { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #F6B40E, #E5484D 55%, #7B4BC9); color: #fff; font-weight: 700; overflow: hidden; flex: none; position: relative; z-index: 1; }
.wcm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcm-avatar--lg { width: 96px; height: 96px; font-size: 34px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
.wcm-avatar--md { width: 72px; height: 72px; font-size: 26px; }

.wcm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .12); color: #fff; }
.wcm-chip .wcm-icon { width: 15px; height: 15px; }
.wcm-chip--ok { background: rgba(18, 161, 80, .22); color: #8BF0B5; }
.wcm-chip--ok::before, .wcm-chip--warn::before, .wcm-chip--bad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wcm-chip--warn { background: rgba(217, 142, 4, .22); color: #FFD27A; }
.wcm-chip--bad { background: rgba(217, 61, 66, .25); color: #FFB3B5; }
.wcm-chip--ghost { background: transparent; color: rgba(255, 255, 255, .75); padding-left: 0; }

.wcm-tabs { display: flex; gap: 4px; margin: 20px 0 24px; padding: 5px; background: var(--wcm-soft); border-radius: 14px; border: 1px solid var(--wcm-line); width: fit-content; max-width: 100%; overflow-x: auto; }
.wcm .wcm-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; color: var(--wcm-muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.wcm .wcm-tab:hover { color: var(--wcm-dark); text-decoration: none; }
.wcm .wcm-tab.is-active { background: #fff; color: var(--wcm-dark); box-shadow: 0 1px 3px rgba(19, 23, 57, .1); }
.wcm .wcm-tab.is-active .wcm-icon { color: var(--wcm-primary); }

.wcm-panel { display: grid; gap: 20px; }

.wcm-progress-card { display: grid; grid-template-columns: 1fr minmax(120px, 220px) auto; align-items: center; gap: 20px; padding: 20px 24px; border-radius: var(--wcm-radius); background: linear-gradient(90deg, #FFF8E6, #FFFDF7); border: 1px solid #F8E3AE; }
.wcm-progress-card__text { display: grid; gap: 2px; }
.wcm-progress-card__text strong { color: var(--wcm-dark); }
.wcm-progress-card__text span { color: var(--wcm-muted); font-size: 14px; }
.wcm-progress { height: 8px; border-radius: 8px; background: #F3E2B8; overflow: hidden; }
.wcm-progress span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #F6B40E, #3BB54A); }

.wcm-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wcm-stat { display: flex; gap: 14px; align-items: center; padding: 20px; background: var(--wcm-card); border: 1px solid var(--wcm-line); border-radius: var(--wcm-radius); box-shadow: var(--wcm-shadow); min-width: 0; }
.wcm-stat__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.wcm-stat__icon .wcm-icon { width: 22px; height: 22px; }
.wcm-stat--blue .wcm-stat__icon { background: #E7F1FD; color: var(--wcm-primary); }
.wcm-stat--green .wcm-stat__icon { background: #E6F7EC; color: var(--wcm-ok); }
.wcm-stat--amber .wcm-stat__icon { background: #FFF3DB; color: var(--wcm-warn); }
.wcm-stat--purple .wcm-stat__icon { background: #F1EBFB; color: #7B4BC9; }
.wcm-stat__label { display: block; font-size: 13px; color: var(--wcm-muted); }
.wcm-stat__value { display: block; font-size: 22px; font-weight: 700; color: var(--wcm-dark); letter-spacing: -.01em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wcm-sync-note { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; font-size: 13px; color: var(--wcm-muted); }
.wcm-sync-note .wcm-icon { width: 15px; height: 15px; }

.wcm-section { background: var(--wcm-card); border: 1px solid var(--wcm-line); border-radius: var(--wcm-radius); padding: 24px; box-shadow: var(--wcm-shadow); }
.wcm-section--locked { background: linear-gradient(180deg, #FAFBFD, #fff); }
.wcm-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.wcm .wcm-section__head h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.wcm-section__head h2 .wcm-icon { color: var(--wcm-muted); }
.wcm-section__note { margin: -8px 0 18px; font-size: 14px; color: var(--wcm-muted); }

.wcm-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; margin: 0; }
.wcm-dl__item { min-width: 0; padding-bottom: 14px; border-bottom: 1px solid var(--wcm-line); }
.wcm-dl__item--wide { grid-column: span 2; }
.wcm-dl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--wcm-muted); font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.wcm-dl dd { margin: 0; color: var(--wcm-dark); font-weight: 500; overflow-wrap: anywhere; }
.wcm-lock { display: inline-flex; color: #9AA0B8; cursor: help; }
.wcm-lock .wcm-icon { width: 13px; height: 13px; }

.wcm-avatar-edit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wcm-avatar-edit .wcm-hint { margin: 8px 0 0; }
.wcm .wcm-file { position: relative; overflow: hidden; }
.wcm .wcm-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wcm-form--profile { gap: 20px; }
.wcm-form__actions { display: flex; justify-content: flex-end; gap: 12px; position: sticky; bottom: 12px; padding: 12px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border: 1px solid var(--wcm-line); border-radius: var(--wcm-radius); box-shadow: var(--wcm-shadow); z-index: 5; }

/* Admin preview is read-only: hide the member's own action buttons. */
.wcm-account--preview .wcm-section__head .wcm-link, .wcm-account--preview .wcm-progress-card .wcm-btn { display: none; }

/* ---------- Financial stat cards ---------- */
.wcm-fstats { --wcm-cols: 4; display: grid; grid-template-columns: repeat(var(--wcm-cols), minmax(0, 1fr)); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(19, 23, 57, .3); border: 1px solid var(--wcm-line); background: #fff; }
.wcm-fstat { padding: 44px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; }
.wcm-fstat__num { display: flex; align-items: baseline; justify-content: center; font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--wcm-dark); }
.wcm-fstat__prefix, .wcm-fstat__suffix { font-size: .85em; }
.wcm-fstat__unit { margin-top: 10px; font-size: 20px; opacity: .85; min-height: 1.3em; }
.wcm-fstat__label { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; line-height: 1.3; max-width: 16ch; }
.wcm-fstat.is-updated .wcm-fstat__num { animation: wcm-pulse .9s ease; }
@keyframes wcm-pulse { 40% { transform: scale(1.06); } }

.wcm-fstats--alternate .wcm-fstat:nth-child(odd) { background: var(--wcm-primary); color: #fff; }
.wcm-fstats--alternate .wcm-fstat:nth-child(odd) .wcm-fstat__num { color: #fff; }
.wcm-fstats--alternate .wcm-fstat:nth-child(even) { color: var(--wcm-dark); }
.wcm-fstats--light { gap: 16px; background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
.wcm-fstats--light .wcm-fstat { background: #fff; border: 1px solid var(--wcm-line); border-radius: var(--wcm-radius); box-shadow: var(--wcm-shadow); border-top: 5px solid var(--wcm-primary); }
.wcm-fstats--light .wcm-fstat__num { color: var(--wcm-primary); }
.wcm-fstats--dark { background: var(--wcm-dark); border-color: var(--wcm-dark); }
.wcm-fstats--dark .wcm-fstat { color: #fff; border-right: 1px solid rgba(255, 255, 255, .08); }
.wcm-fstats--dark .wcm-fstat__num { color: #fff; }
.wcm-fstats--dark .wcm-fstat__unit { color: #8FC2FA; }
.wcm-fstats--brand .wcm-fstat { color: #fff; }
.wcm-fstats--brand .wcm-fstat__num { color: #fff; }
.wcm-fstats--brand .wcm-fstat:nth-child(5n+1) { background: #0B74DE; }
.wcm-fstats--brand .wcm-fstat:nth-child(5n+2) { background: #3BB54A; }
.wcm-fstats--brand .wcm-fstat:nth-child(5n+3) { background: #7B4BC9; }
.wcm-fstats--brand .wcm-fstat:nth-child(5n+4) { background: #E5484D; }
.wcm-fstats--brand .wcm-fstat:nth-child(5n+5) { background: #F6B40E; }

/* ---------- Pie chart ---------- */
.wcm-fchart { position: relative; background: #fff; border-radius: 22px; padding: 28px; border: 1px solid var(--wcm-line); box-shadow: var(--wcm-shadow); }
.wcm .wcm-fchart__title { font-size: 22px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.wcm-fchart__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.wcm-fchart--legend-bottom .wcm-fchart__body { grid-template-columns: 1fr; justify-items: center; }
.wcm-fchart__canvas { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; }
.wcm-fchart__canvas svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wcm-fchart__canvas path { transition: transform .25s ease, opacity .25s; transform-origin: 50% 50%; cursor: pointer; stroke: #fff; stroke-width: 2; }
.wcm-fchart__canvas path.is-dim { opacity: .45; }
.wcm-fchart__canvas .wcm-fchart__label, .wcm-fchart__canvas text { pointer-events: none; }
.wcm-fchart__canvas .wcm-fchart__label rect { fill: none; stroke: #fff; stroke-width: 1.2; }
.wcm-fchart__canvas .wcm-fchart__label text { fill: #fff; font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.wcm-fchart__canvas .wcm-fchart__center { font-size: 30px; font-weight: 800; fill: var(--wcm-dark); text-anchor: middle; }
.wcm-fchart__canvas .wcm-fchart__center-sub { font-size: 13px; fill: var(--wcm-muted); text-anchor: middle; }
.wcm-fchart__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; color: var(--wcm-ink); }
.wcm-fchart--legend-bottom .wcm-fchart__legend { grid-auto-flow: column; gap: 20px; flex-wrap: wrap; display: flex; justify-content: center; }
.wcm-fchart__legend li { display: flex; align-items: center; gap: 10px; cursor: default; }
.wcm-fchart__legend i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.wcm-fchart__legend b { margin-left: auto; padding-left: 16px; font-variant-numeric: tabular-nums; color: var(--wcm-dark); }
.wcm-fchart__tip { position: absolute; pointer-events: none; background: var(--wcm-dark); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); z-index: 3; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.wcm-auth__card { grid-template-columns: 1fr; }
	.wcm-auth__aside { padding: 32px 28px; gap: 18px; }
	.wcm-auth__aside ul, .wcm-auth__help { display: none; }
	.wcm-auth__main { padding: 32px 28px; }
	.wcm-stats-row { grid-template-columns: 1fr; }
	.wcm-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcm-progress-card { grid-template-columns: 1fr; }
	.wcm-fstats:not(.wcm-fstats--light) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcm-fstats--alternate .wcm-fstat:nth-child(odd) { background: transparent; color: var(--wcm-dark); }
	.wcm-fstats--alternate .wcm-fstat:nth-child(odd) .wcm-fstat__num { color: var(--wcm-dark); }
	.wcm-fstats--alternate .wcm-fstat:nth-child(4n+1), .wcm-fstats--alternate .wcm-fstat:nth-child(4n+4) { background: var(--wcm-primary); color: #fff; }
	.wcm-fstats--alternate .wcm-fstat:nth-child(4n+1) .wcm-fstat__num, .wcm-fstats--alternate .wcm-fstat:nth-child(4n+4) .wcm-fstat__num { color: #fff; }
	.wcm-fstats--light { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcm-fchart__body { grid-template-columns: 1fr; }
	.wcm-fchart__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.wcm-auth { padding: 12px 0; }
	.wcm-auth__card { border-radius: 18px; }
	.wcm-auth__main { padding: 28px 20px; }
	.wcm .wcm-auth__title { font-size: 24px; }
	.wcm-grid-2 { grid-template-columns: 1fr; }
	.wcm-hero { flex-direction: column; align-items: flex-start; padding: 24px 20px 28px; gap: 16px; }
	.wcm .wcm-hero__name { font-size: 24px; }
	.wcm .wcm-hero__logout { position: absolute; top: 20px; right: 20px; padding: 0 12px; min-height: 38px; }
	.wcm .wcm-hero__logout span { display: none; }
	.wcm-avatar--lg { width: 72px; height: 72px; font-size: 26px; }
	.wcm-tabs { width: 100%; }
	.wcm .wcm-tab { flex: 1; justify-content: center; padding: 10px 12px; }
	.wcm-section { padding: 20px 16px; }
	.wcm-dl { grid-template-columns: 1fr; gap: 14px; }
	.wcm-dl__item--wide { grid-column: auto; }
	.wcm-fstat { padding: 32px 14px; }
	.wcm-fstat__unit { font-size: 16px; }
	.wcm-form__actions { bottom: 8px; }
	.wcm-form__actions .wcm-btn { flex: 1; }
	.wcm-fchart { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.wcm *, .wcm *::before, .wcm *::after { animation: none !important; transition: none !important; }
}