/* ==========================================================================
   df_user.css — Homepage "df_user" widget (user dashboard card)
   Loaded by frontend/widgets/df_user/widget.html
   Reuses login.css tokens (--lg-*); all selectors namespaced under .du-wrap
   so the widget can be embedded inside legacy page chrome without leaking.
   Style: clean glass card, same accent #28A271 as login/register.
   ========================================================================== */

:root {
	/* Surfaces */
	--du-bg:            #f7f7f8;
	--du-surface:       #ffffff;
	--du-line:          #ececef;
	--du-line-strong:   #d9d9de;

	/* Text */
	--du-text-1:        #1a1a1a;
	--du-text-2:        #555560;
	--du-text-3:        #8a8a93;

	/* Brand */
	--du-accent:        #28A271;
	--du-accent-hover:  #239263;
	--du-accent-soft:   #ecf8ed;
	--du-accent-deep:   #1e7a55;
	--du-accent-2:      #6fd0a8;

	/* Type scale */
	--du-fs-xs:         12px;
	--du-fs-sm:         13px;
	--du-fs-base:       14px;
	--du-fs-md:         15px;
	--du-fs-lg:         16px;
	--du-fs-xl:         18px;

	/* Rhythm */
	--du-r-1:           4px;
	--du-r-2:           8px;
	--du-r-3:           12px;
	--du-r-4:           16px;
	--du-r-5:           20px;

	/* Radius */
	--du-radius-sm:     6px;
	--du-radius:        10px;
	--du-radius-lg:     16px;

	--du-ease:          cubic-bezier(0.2, 0, 0, 1);
}

/* --------------------------------------------------------------------------
   Local reset
   -------------------------------------------------------------------------- */
.du-wrap,
.du-wrap *,
.du-wrap *::before,
.du-wrap *::after { box-sizing: border-box !important; }

.du-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
	font-size: var(--du-fs-base) !important;
	line-height: 1.55 !important;
	color: var(--du-text-1) !important;
	display: block !important;
	width: 100% !important;
}
.du-wrap a {
	color: inherit !important;
	text-decoration: none !important;
	transition: color .15s var(--du-ease) !important;
}
.du-wrap a:hover { color: var(--du-accent) !important; }
.du-wrap img { display: block; max-width: 100%; }
.du-wrap ul,
.du-wrap ol { list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   1. Card shell
   ========================================================================== */
.du-wrap .du-card {
	position: relative !important;
	background: rgba(255, 255, 255, 0.85) !important;
	-webkit-backdrop-filter: saturate(180%) blur(16px) !important;
	backdrop-filter: saturate(180%) blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-top: 3px solid var(--du-accent) !important;
	border-radius: var(--du-radius-lg) !important;
	padding: 0 !important;
	overflow: hidden !important;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 8px 24px rgba(16, 24, 40, 0.06),
		0 24px 48px rgba(40, 162, 113, 0.08) !important;
}

/* ==========================================================================
   2. Profile (avatar + greeting + actions)
   ========================================================================== */
.du-wrap .du-profile {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 22px 18px 18px !important;
	background: linear-gradient(180deg, #fff 0%, #fcfdfb 100%) !important;
}
.du-wrap .du-avatar {
	flex: 0 0 auto !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var(--du-accent-soft) !important;
	border: 2px solid #fff !important;
	box-shadow: 0 2px 8px rgba(40, 162, 113, 0.18) !important;
	position: relative !important;
}
.du-wrap .du-avatar a { display: block !important; width: 100% !important; height: 100% !important; }
.du-wrap .du-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.du-wrap .du-avatar .du-avatar-fallback {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--du-accent-deep) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
}

.du-wrap .du-greet {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
.du-wrap .du-greet-hi {
	margin: 0 0 4px 0 !important;
	font-size: var(--du-fs-sm) !important;
	color: var(--du-text-3) !important;
}
.du-wrap .du-greet-name {
	margin: 0 !important;
	font-size: var(--du-fs-md) !important;
	font-weight: 600 !important;
	color: var(--du-text-1) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 180px !important;
}

.du-wrap .du-actions {
	display: flex !important;
	gap: 8px !important;
	padding: 0 18px 18px !important;
	background: linear-gradient(180deg, #fcfdfb 0%, #fff 100%) !important;
}
.du-wrap .du-btn {
	flex: 1 1 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	height: 38px !important;
	padding: 0 14px !important;
	border-radius: var(--du-radius) !important;
	font-size: var(--du-fs-sm) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: background .15s var(--du-ease), color .15s var(--du-ease), border-color .15s var(--du-ease), transform .1s var(--du-ease) !important;
	text-align: center !important;
	white-space: nowrap !important;
}
.du-wrap .du-btn-primary {
	background: var(--du-accent) !important;
	color: #fff !important;
	border: 1px solid var(--du-accent) !important;
	box-shadow: 0 4px 12px rgba(40, 162, 113, 0.25) !important;
}
.du-wrap .du-btn-primary:hover {
	background: var(--du-accent-hover) !important;
	border-color: var(--du-accent-hover) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(40, 162, 113, 0.32) !important;
}
.du-wrap .du-btn-primary:active { transform: translateY(1px) !important; }
.du-wrap .du-btn-ghost {
	background: var(--du-accent-soft) !important;
	color: var(--du-accent-deep) !important;
	border: 1px solid var(--du-accent-soft) !important;
}
.du-wrap .du-btn-ghost:hover {
	background: #fff !important;
	border-color: var(--du-accent) !important;
	color: var(--du-accent) !important;
}
.du-wrap .du-btn-line {
	background: #fff !important;
	color: var(--du-text-2) !important;
	border: 1px solid var(--du-line) !important;
}
.du-wrap .du-btn-line:hover {
	color: var(--du-accent) !important;
	border-color: var(--du-accent) !important;
}

/* ==========================================================================
   3. Stats strip (only when logged in)
   ========================================================================== */
.du-wrap .du-stats {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0 !important;
	padding: 14px 0 !important;
	background: linear-gradient(180deg, #f7fbf8 0%, #fff 100%) !important;
	border-top: 1px solid var(--du-line) !important;
	border-bottom: 1px solid var(--du-line) !important;
}
.du-wrap .du-stats a {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 4px 6px !important;
	border-right: 1px solid var(--du-line) !important;
}
.du-wrap .du-stats a:last-child { border-right: 0 !important; }
.du-wrap .du-stats-num {
	font: 600 var(--du-fs-lg) / 1 -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: var(--du-text-1) !important;
	font-variant-numeric: tabular-nums !important;
}
.du-wrap .du-stats-num.du-accent { color: var(--du-accent) !important; }
.du-wrap .du-stats-label {
	font-size: var(--du-fs-xs) !important;
	color: var(--du-text-3) !important;
}
.du-wrap .du-stats a:hover .du-stats-num { color: var(--du-accent) !important; }

/* ==========================================================================
   4. Quick links grid (3×2)
   ========================================================================== */
.du-wrap .du-quick {
	padding: 8px 6px 14px !important;
}
.du-wrap .du-section-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 14px 8px !important;
}
.du-wrap .du-section-title h3 {
	margin: 0 !important;
	font-size: var(--du-fs-md) !important;
	font-weight: 600 !important;
	color: var(--du-text-1) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.du-wrap .du-section-title h3::before {
	content: "" !important;
	width: 3px !important;
	height: 14px !important;
	background: var(--du-accent) !important;
	border-radius: 2px !important;
}
.du-wrap .du-section-title a {
	font-size: var(--du-fs-xs) !important;
	color: var(--du-text-3) !important;
}
.du-wrap .du-section-title a:hover { color: var(--du-accent) !important; }

.du-wrap .du-quick-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 4px !important;
	padding: 0 4px !important;
}
.du-wrap .du-quick-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 12px 6px !important;
	border-radius: var(--du-radius) !important;
	transition: background .15s var(--du-ease), transform .15s var(--du-ease) !important;
}
.du-wrap .du-quick-item:hover {
	background: var(--du-accent-soft) !important;
	transform: translateY(-1px) !important;
}
.du-wrap .du-quick-item:hover .du-quick-name { color: var(--du-accent) !important; }
.du-wrap .du-quick-icon {
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 10px !important;
	background: var(--du-accent-soft) !important;
	color: var(--du-accent-deep) !important;
	transition: background .15s var(--du-ease), color .15s var(--du-ease) !important;
}
.du-wrap .du-quick-item:hover .du-quick-icon {
	background: var(--du-accent) !important;
	color: #fff !important;
}
.du-wrap .du-quick-icon svg { width: 18px !important; height: 18px !important; }
.du-wrap .du-quick-name {
	font-size: var(--du-fs-xs) !important;
	color: var(--du-text-2) !important;
}

/* ==========================================================================
   5. Help / article list (tabbed)
   ========================================================================== */
.du-wrap .du-help {
	border-top: 1px solid var(--du-line) !important;
	padding: 0 0 6px !important;
}
.du-wrap .du-help .du-section-title { padding: 14px 14px 0 !important; }
.du-wrap .du-help-tabs {
	display: flex !important;
	gap: 18px !important;
	padding: 0 14px 8px !important;
	border-bottom: 1px solid var(--du-line) !important;
}
.du-wrap .du-help-tabs .tab-head-item {
	position: relative !important;
	padding: 6px 0 !important;
	font-size: var(--du-fs-sm) !important;
	color: var(--du-text-2) !important;
	cursor: pointer !important;
	transition: color .15s var(--du-ease) !important;
}
.du-wrap .du-help-tabs .tab-head-item::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	bottom: -1px !important;
	transform: translateX(-50%) !important;
	width: 0 !important;
	height: 2px !important;
	background: var(--du-accent) !important;
	border-radius: 2px !important;
	transition: width .2s var(--du-ease) !important;
}
.du-wrap .du-help-tabs .tab-head-item:hover { color: var(--du-accent) !important; }
.du-wrap .du-help-tabs .tab-head-item.active {
	color: var(--du-accent) !important;
	font-weight: 500 !important;
}
.du-wrap .du-help-tabs .tab-head-item.active::after { width: 100% !important; }

.du-wrap .du-help-content { padding: 4px 14px 0 !important; }
.du-wrap .du-help-list { display: none !important; }
.du-wrap .du-help-list.active { display: block !important; }
.du-wrap .du-help-list li {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 0 !important;
	font-size: var(--du-fs-sm) !important;
	border-bottom: 1px dashed var(--du-line) !important;
}
.du-wrap .du-help-list li:last-child { border-bottom: 0 !important; }
.du-wrap .du-help-list li::before {
	content: "" !important;
	flex: 0 0 4px !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: var(--du-line-strong) !important;
}
.du-wrap .du-help-list li a {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	color: var(--du-text-2) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.du-wrap .du-help-list li a:hover { color: var(--du-accent) !important; }

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.du-wrap .du-btn,
	.du-wrap .du-quick-item,
	.du-wrap .du-quick-item:hover,
	.du-wrap .du-quick-icon,
	.du-wrap .du-help-tabs .tab-head-item::after,
	.du-wrap a { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   7. Compact (very narrow embed) — single-row quick grid + slimmer padding
   ========================================================================== */
@media (max-width: 320px) {
	.du-wrap .du-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.du-wrap .du-greet-name { max-width: 110px !important; }
}

/* ==========================================================================
   8. Widget container override (legacy `#widgets-xxx .account`)
   The plugin renders inside <div id="widgets-xxx" class="widget">…</div>.
   The legacy `.account` class lives inside; we strip the legacy chrome
   but leave structure intact.
   ========================================================================== */
.du-wrap.account,
.du-wrap .account {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	display: block !important;
	width: 100% !important;
}
.du-wrap .user-info,
.du-wrap .index-notice,
.du-wrap .quick { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }

/* Kill the legacy icon backgrounds that the previous skin used */
.du-wrap .i-con {
	background: none !important;
	width: auto !important;
	height: auto !important;
}