#youjiaApp {
		--yj-ink: #0f172a;
		--yj-muted: #64748b;
		--yj-line: #e2e8f0;
		--yj-blue: #2563eb;
		--yj-blue-soft: #eff6ff;
		--yj-blue-mid: #dbeafe;
		--yj-up: #dc2626;
		--yj-up-bg: #fef2f2;
		--yj-down: #059669;
		--yj-down-bg: #ecfdf5;
		--yj-flat: #64748b;
		--yj-flat-bg: #f1f5f9;
		--yj-radius: 0.375rem;
		--yj-shell-radius: 0.375rem;
		--yj-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
	}

	#youjiaApp .yj-shell {
		background:
			radial-gradient(1200px 420px at 10% -10%, rgba(59, 130, 246, 0.16), transparent 55%),
			radial-gradient(900px 360px at 100% 0%, rgba(37, 99, 235, 0.08), transparent 50%);
		border: 1px solid var(--yj-line);
		border-radius: var(--yj-shell-radius);
		box-shadow: var(--yj-shadow);
		overflow: hidden;
	}

	#youjiaApp .yj-panel {
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(8px);
	}

	#youjiaApp .yj-hero {
		background: linear-gradient(135deg, #eff6ff 0%, #ffffff 48%, #f8fafc 100%);
		border-bottom: 1px solid var(--yj-line);
	}

	#youjiaApp .yj-meta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 1rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid #dbeafe;
	}
	#youjiaApp .yj-meta-item {
		min-width: 0;
	}
	#youjiaApp .yj-meta-label {
		display: block;
		font-size: 0.75rem;
		font-weight: 500;
		color: #64748b;
		line-height: 1.3;
	}
	#youjiaApp .yj-meta-value {
		display: block;
		margin-top: 0.2rem;
		font-size: 0.9375rem;
		font-weight: 700;
		color: #0f172a;
		line-height: 1.35;
		word-break: break-all;
	}
	#youjiaApp .yj-meta-value.is-accent {
		color: #1d4ed8;
	}

	#youjiaApp .yj-card {
		position: relative;
		border: 1px solid var(--yj-line);
		border-radius: var(--yj-radius);
		background: #fff;
		padding: 1.15rem 1.15rem 1.05rem;
		transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
		overflow: hidden;
	}
	#youjiaApp .yj-card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background: var(--yj-accent, #3b82f6);
	}
	#youjiaApp .yj-card:hover {
		border-color: #cbd5e1;
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	}
	#youjiaApp .yj-card.is-feature {
		background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
	}
	/* 窄屏四张油价卡各占一行，避免涨跌文案挤在一起 */
	@media (max-width: 639px) {
		#youjiaApp #yjGradeGrid .yj-card {
			grid-column: span 2;
		}
	}

	#youjiaApp .yj-price {
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		color: var(--yj-ink);
		line-height: 1.1;
	}
	#youjiaApp .yj-unit {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--yj-muted);
		margin-left: 0.15rem;
	}

	#youjiaApp .yj-delta {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		padding: 0.2rem 0.55rem;
		border-radius: 9999px;
		font-size: 0.75rem;
		font-weight: 600;
	}
	#youjiaApp .yj-delta.is-up {
		color: var(--yj-up);
		background: var(--yj-up-bg);
	}
	#youjiaApp .yj-delta.is-down {
		color: var(--yj-down);
		background: var(--yj-down-bg);
	}
	#youjiaApp .yj-delta.is-flat {
		color: var(--yj-flat);
		background: var(--yj-flat-bg);
	}

	#youjiaApp .yj-link-card {
		display: flex;
		align-items: center;
		gap: 0.85rem;
		padding: 1rem 1.15rem;
		border-radius: var(--yj-radius);
		border: 1px solid var(--yj-line);
		background: #fff;
		text-decoration: none;
		transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
		cursor: pointer;
	}
	#youjiaApp .yj-link-card:hover {
		border-color: #93c5fd;
		background: var(--yj-blue-soft);
		box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
	}
	#youjiaApp .yj-link-icon {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 0.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--yj-blue-mid);
		color: var(--yj-blue);
		flex-shrink: 0;
	}

	#youjiaApp .yj-empty {
		border: 1px dashed #93c5fd;
		background: var(--yj-blue-soft);
		border-radius: var(--yj-radius);
	}

	#youjiaApp .yj-right {
		display: block;
		overflow: visible;
	}
	#youjiaApp .yj-table-wrap {
		overflow: visible;
	}
	@media (min-width: 1024px) {
		#youjiaApp .yj-right {
			display: flex;
			flex-direction: column;
			min-height: 0;
			overflow: hidden;
		}
		#youjiaApp .yj-table-wrap {
			flex: 1 1 auto;
			min-height: 0;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}
	}
	#youjiaApp .yj-table {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		font-variant-numeric: tabular-nums;
	}
	#youjiaApp .yj-table th,
	#youjiaApp .yj-table td {
		padding: 0.7rem 0.85rem;
		text-align: right;
		border-bottom: 1px solid #f1f5f9;
		white-space: nowrap;
	}
	#youjiaApp .yj-table th:first-child,
	#youjiaApp .yj-table td:first-child {
		text-align: left;
		position: sticky;
		left: 0;
		background: #fff;
		z-index: 1;
		padding-left: 1.25rem;
	}
	#youjiaApp .yj-table th:last-child,
	#youjiaApp .yj-table td:last-child {
		padding-right: 1.25rem;
	}
	@media (min-width: 640px) {
		#youjiaApp .yj-table th:first-child,
		#youjiaApp .yj-table td:first-child {
			padding-left: 1.75rem;
		}
		#youjiaApp .yj-table th:last-child,
		#youjiaApp .yj-table td:last-child {
			padding-right: 1.75rem;
		}
	}
	#youjiaApp .yj-table thead th {
		position: sticky;
		top: 0;
		z-index: 2;
		font-size: 0.75rem;
		font-weight: 600;
		color: #475569;
		background: #f8fafc;
		border-bottom: 1px solid var(--yj-line);
	}
	#youjiaApp .yj-table thead th:first-child {
		z-index: 3;
		background: #f8fafc;
		border-radius: 0.5rem 0 0 0;
	}
	#youjiaApp .yj-table tbody tr:hover td,
	#youjiaApp .yj-table tbody tr:hover th {
		background: #f8fafc;
	}
	#youjiaApp .yj-table tbody tr.is-current td,
	#youjiaApp .yj-table tbody tr.is-current th {
		background: #eff6ff;
	}
	#youjiaApp .yj-table tbody tr.is-current th:first-child {
		box-shadow: inset 3px 0 0 #2563eb;
	}
	#youjiaApp .yj-prov {
		color: #1d4ed8;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}
	#youjiaApp .yj-prov:hover {
		text-decoration: underline;
	}
	#youjiaApp .yj-cell-delta {
		display: block;
		margin-top: 0.1rem;
		font-size: 0.6875rem;
		font-weight: 600;
	}
	#youjiaApp .yj-cell-delta.is-up { color: var(--yj-up); }
	#youjiaApp .yj-cell-delta.is-down { color: var(--yj-down); }
	#youjiaApp .yj-cell-delta.is-flat { color: var(--yj-flat); }

	#youjiaApp .yj-result.is-loading {
		opacity: 0.55;
		pointer-events: none;
	}
	#youjiaApp #yjQueryBtn.is-loading {
		opacity: 0.85;
		cursor: wait;
	}

	@media (prefers-reduced-motion: reduce) {
		#youjiaApp .yj-card,
		#youjiaApp #yjQueryBtn,
		#youjiaApp .yj-link-card {
			transition: none;
		}
		#youjiaApp .yj-card:hover {
			transform: none;
		}
	}